让JavaScript拥有类似Lambda表达式编程能力的方法


Posted in Javascript onSeptember 12, 2010

但是我后来也跟人说,因为接受的参数太多,所以如果不把智能提示写得很清楚的话,连我自己都常常搞不清楚该怎么用。

不过,接受参数多,除了容易弄错用法以外,还会产生另一个问题,这也是我编写出今天发布的这个东西的原因。
来看一下JS版的页码呈现组件的完全版函数签名:

function pnView( 
currentPage, actionCurrent, 
beginPage, endPage, 
actionBegin, actionEnd, 
currentSiblings, actionCurrentSibling, 
preventFolding, actionFolding, 
endOfBegin, beginOfEnd, 
actionBeginSibling, actionEndSibling 
)

可以看到,这个可以最大幅度进行自定义的完全版函数签名,接受14个参数,而其中有一半——也就是7个参数,是要接受回调函数的。
由此产生的问题就是需要手工写入多次的“function(){}”等字符组合,就像这样:
function ww(s) { document.write(s); } 
function ws(n) { ww(' <A href="#">(' + n + ')</A> '); } 
pnView(14, function (n) { ww(' [' + n + '] ') }, 
1, 27, 
function (n) { ww('<A href="#">|< ' + n + '</A> '); }, function (n) { ww(' <A href="#">' + n + ' >|</A>'); }, 
2, ws, 
1, function () { ww(' ... '); }, 
2, 2, 
ws, ws 
);

当我在网页中测试这个组件的时候我就觉得自己非常想念C#中的Lambda表达式——虽然有些人、有些JS框架会把匿名函数称作“Lambda表达式”,但其实那只相当于C#中的“匿名委托/函数”,而Lambda的(表面)特征是使用简短的语法模式来反映一个(回调)函数/过程(或者说动作)的逻辑,而不被“delegate”或者别的什么关键字分散精力。

出于这样的原因,我编写了这个可以转译JS代码、把一种特定的模式(pattern)翻译成函数定义的模块。
在使用这个模块以后,前面的那个调用可以变成这个样子:

eval(function () { 
var ww = (s, document.write(s)); 
var ws = (n, ww(' <A href="#">(' + n + ')</A> ')); 
pnView(14, (n, ww(' [' + n + '] ')), 
1, 27, 
(n, ww('<A href="#">|< ' + n + '</A> ')), (n, ww(' <A href="#">' + n + ' >|</A>')), 
2, ws, 
1, (0, ww(' ... ')), 
2, 2, 
ws, ws 
); 
}.lamda())();

模块的完整代码如下:
/*! 
L-amda "a-Lambda", a module provides Alternate "Lambda" style programming ability for JavaScript. 
Created By NanaLich. 2010-09-08 
This module is published under WTFPL v2, so you just DO WHAT THE Fxxx YOU WANT TO with it. 
*/ 
!function () { 
function attachEntry(o, a, m) { 
var i, j, n; 
o = [].concat(o); 
//if (!(o instanceof Array)) o = [o]; 
while (i = o.shift()) { 
for (j in a) { 
if (!i[n = a[j]]) i[n] = m; 
} 
} 
} 
var rx0 = /^\s*(0|NaN|null)\s*,$/; 
var rx1 = /([\W]\s*)\((\s*0\s*,|(?:\s*[a-z_$][\w$]*\s*,)+)|"(\\[\s\S]|[^\x22])*"|'(\\[\s\S]|[^\x27])*'/gi; 
var rx2 = /\)/g; 
function rxGetFlags(rx) { // 取出正则表达式的创建选项 
return (rx.global ? 'g' : '') + (rx.ignoreCase ? 'i' : '') + (rx.multiline ? 'm' : ''); 
//return /\/([gim]*)$/.exec('' + rx)[1]; 
} 
attachEntry(RegExp, ['getFlags'], rxGetFlags); 
attachEntry(RegExp.prototype, ['getFlags'], function () { 
return rxGetFlags(this); 
}); function translateLambda(s) { 
if (typeof (s) != 'string') s = '' + s; 
var x = new RegExp(rx1.source, rx1.getFlags()); 
var y = new RegExp(rx2.source, rx2.getFlags()); // 由于firefox、safari等浏览器对全局匹配正则表达式有过度的优化,所以这里采用一种迂回的办法创建不重复的正则表达式实例 
var m, l = 0, r = ''; 
while (m = x.exec(s)) { 
var c = m[0], h, p, q, t; 
switch (c.charAt(0)) { // 判断期待的语法成分 
case '$': 
case ')': 
case ']': 
case '"': 
case "'": 
continue; // 函数传参,跳过 
} 
h = m[2]; 
if (rx0.test(h)) 
h = ''; 
else 
h = h.substr(0, h.length - 1); // 去掉末尾的逗号 
r += s.substring(l, p = m.index); // 在结果字符串上附加之前余留的内容 
y.lastIndex = l = p + c.length; // 从逗号之后开始寻找右括号 
while (q = y.exec(s)) { 
q = q.index; 
try { 
t = 'return ' + s.substring(l, q) + ';'; 
new Function(t); // 语法测试 
//r += c + 'function(' + h + '){ ' + translateLambda(t) + ' }'; // 翻译里面的内容 
r += m[1] + 'function(' + h + '){ ' + translateLambda(t) + ' }'; // 翻译里面的内容 
x.lastIndex = l = q + 1; // 下一次查找从括号之后开始 
break; 
} catch (ex) { } 
} 
if (!q) l = p; // 说明找不到右括号或者有效的代码,直接附加所有匹配的内容 
} 
try { 
r += s.substr(l); 
if (/[\w$]*|"(\\[\s\S]|[^\x22])*"|'(\\[\s\S]|[^\x27])*'/.exec(r)[0] == 'function') // 粗略判断产生的是不是函数(可以应付绝大部分情况) 
r = '0,' + r; // 使用这种“怪”形式可以在所有浏览器(包括IE)中得到预期的效果 
new Function(r); // 语法测试 
return r; 
} catch (ex) { // 失败,返回原文 
return s; 
} 
}; 
var lamdaAliases = ["translateLambda", "lambda", "lamda"]; 
attachEntry([Function, String], lamdaAliases, translateLambda); 
attachEntry([Function.prototype, String.prototype], lamdaAliases, function () { 
return translateLambda(this); 
}); 
} ();

如果和C#中的Lambda表达式相比的话,我的这个模块还是有很多不足的,不过现在这个样子已经让我很满意了,至少我不用再写太多的“function”了。
简单来说,这个模块的规格特性是这样的——
优点:
减少编写代码时“function”的出现次数;
使用可以在一般的JavaScript编辑器中正常编辑的语法模式(pattern),直接写在函数体中不会导致语法错误。
局限性:
在任何时候使用这个模块都必须调用转译方法(“translateLambda”、“lambda”或者“lamda”)和eval函数,无法省略;
如果存在一个函数A,不可能通过对A进行处理来达到转译传递至A的参数的目的(也就是说a.lambda()或者类似的操作并不会让a((x, x * 2))等同于a(function(x){ return x * 2; }));
不能包含表达式之外的任何语句、不能包含使用“;”来分隔的多条语句。
缺点:
连续出现的括号可能会让代码变得难以理解;
任何编辑器都无法为Lambda表达式提供语法高亮;
存在错误地转译现有代码的可能性——这个模块选择进行匹配的模式是在正常的代码中没有实用价值、也通常不会出现的模式,如:(x, x * 2)等价于单纯的x * 2、(0, a.method())等价于单纯的a.method(),所以这个缺点影响到实际代码的可能性无限趋近于0。
以下是几种不当的用法:
1、使用这个模块并不会节省很多代码量的时候:本末倒置。
eval(function(){ // 不仅没减少代码量,反而还增加了 
window.onload = (0, alert('载入完成!')); 
}.lambda());

2、对接受参数的函数进行转译处理:之前已经提到过这种情况。
eval(somefunction.lambda())((x, x.toString(16))); // somefunction可能会产生预料外的结果,而且收到的参数会是x.toString(16)的结果(如果x在此处并没有被定义过,还会产生一个“变量不存在”的异常),而非一个回调函数。

3、为了使用此模块而规避语法检查:
因为使用的是在JavaScript中有效但无实用价值的语法,所以规避语法检查是完全没有必要的。
eval("somefunction((x, x.toString(16)))".lamda()); // 失去了语法检查,可能在运行的时候产生意外

4、在(伪)Lambda中使用过多的操作,甚至多条语句:
在设计这个模块的时候我并没有找出可以使用多条语句且可以通过语法检查的模式(pattern),原因是在Lambda表达式中使用多条语句时,“function”、“return”等几个字符所增加的代码量通常是可以忽略的,这样去使用Lambda表达式本身就属于一种偏离了初衷的做法。
eval(function(){ somefunction((x, y.something(x); return x.toString(16))); }.lamda())(); // 语法错误 
eval(function(){ somefunction((x, y.something(x), x.toString(16))); }.lamda())(); // 容易产生理解上的歧义 
eval(function(){ somefunction((x, ++x)); }.lamda())(); // 简单的表达式可以被接受

最佳使用场合:
现在很多人写JavaScript的时候喜欢把自己的代码都写在一个闭包里面,这样可以避免全局作用域污染问题,就像这样:
(function(){ 
// 所有的代码都放在这里 
})();

——而这种“大”闭包正好是使用本模块的最佳场合:
eval(function(){ // 括号前增加eval 
// 所有的代码都放在这里 
}.lamda())(); // 括号里增加.lamda()

昨天codeplex抽疯,代码和release上传总出错。再考虑到这个模块的使用场合比较有限,不适合缺乏JavaScript经验的人使用,所以不另外提供源代码打包下载——有需要的话请直接从文中复制。
Javascript 相关文章推荐
基于Jquery的温度计动画效果
Jun 18 Javascript
判断文件是否正在被使用的JS代码
Dec 21 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
使用three.js 画渐变的直线
Jun 05 Javascript
JavaScript_ECMA5数组新特性详解
Jun 12 Javascript
全面理解JavaScript中的继承(必看)
Jun 16 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
Vue中插入HTML代码的方法
Sep 21 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
从零搭一个自用的前端脚手架的方法步骤
Sep 23 Javascript
JavaScript实现滚动加载更多
Dec 27 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 #Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 #Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
Sep 12 #Javascript
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 #Javascript
jQuery UI 应用不同Theme的办法
Sep 12 #Javascript
基于jquery的表格排序
Sep 11 #Javascript
javascript多种数据类型表格排序代码分析
Sep 11 #Javascript
You might like
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
JQquery的一些使用心得分享
2012/08/01 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
python解析xml模块封装代码
2014/02/07 Python
python实现socket端口重定向示例
2014/02/10 Python
python通过pil为png图片填充上背景颜色的方法
2015/03/17 Python
Python中pygame安装方法图文详解
2015/11/11 Python
Python打包可执行文件的方法详解
2016/09/19 Python
python更改已存在excel文件的方法
2018/05/03 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
武汉英思工程科技有限公司&ndash;ORACLE面试测试题目
2012/04/30 面试题
理工大学毕业生自荐信范文
2014/02/22 职场文书
农民工工资承诺书范文
2014/03/31 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
借钱欠条怎么写
2015/07/03 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
如何解决.cuda()加载用时很长的问题
2021/05/24 Python
python turtle绘图
2022/05/04 Python