JavaScript中两种链式调用实现代码


Posted in Javascript onJanuary 12, 2011

一、方法体内返回对象实例自身(this)

function ClassA(){ 
this.prop1 = null; 
this.prop2 = null; 
this.prop3 = null; 
} 
ClassA.prototype = { 
method1 : function(p1){ 
this.prop1 = p1; 
return this; 
}, 
method2 : function(p2){ 
this.prop2 = p2; 
return this; 
}, 
method3 : function(p3){ 
this.prop3 = p3; 
return this; 
} 
}

定义了function/类ClassA。有三个属性/字段prop1,prop2,prop3,三个方法methed1,method2,method3分别设置prop1,prop2,prop3。
链式调用如下:
var obj = new ClassA(); 
obj.method1(1).method2(2).method(3); // obj -> prop1=1,prop2=2,prop3=3

可以看到对obj进行了连续三次操作,只要愿意ClassA的N多方法都这样定义,调用链会一直延续。
该方式缺点是链方法唯一地绑定于一种对象类型(ClaaaA),按这种方式实现链式操作,每定义一个类,其方法体中都要返回this。第二种方式可以解决这个问题。
二、对象传入后每次调用返回函数自身
/** 
* chain 精简版 
* @param {Object} obj 
*/ 
function chain(obj){ 
return function(){ 
var Self = arguments.callee; Self.obj = obj; 
if(arguments.length==0){ 
return Self.obj; 
} 
Self.obj[arguments[0]].apply(Self.obj,[].slice.call(arguments,1)); 
return Self; 
} 
} //定义的function/类ClassB 
function ClassB(){ 
this.prop1 = null; 
this.prop2 = null; 
this.prop3 = null; 
} 
ClassB.prototype = { 
method1 : function(p1){ 
this.prop1 = p1; 
}, 
method2 : function(p2){ 
this.prop2 = p2; 
}, 
method3 : function(p3){ 
this.prop3 = p3; 
} 
}

注意ClassB的method1,method2,method3中不再返回this了。

链式调用如下:

var obj = new ClassB(); 
chain(obj)('method1',4)('method2',5)('method3',6); // obj -> prop1=4,prop2=5,prop3=6

第一种方式3次调用后返回了对象自身,这里使用一个空"()"取回对象
// result -> prop1=4,prop2=5,prop3=6 
var result = chain(obj)('method1',4)('method2',5)('method3',6)();

这种方式写类时方法体中无须返回this,且可以对任何对象进行链式调用。

从写法上总结下两种的调用方式:

obj 
.method1(arg1) 
.method2(arg2) 
.method3(arg3) 
... chain(obj) 
(method1,arg1) 
(method2,arg2) 
(method3,arg3) 
...

最后,感谢沐海,我是从wee库中获取以上灵感的。

/201101/yuanma/chain.rar

Javascript 相关文章推荐
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
node.js中 stream使用教程
Aug 28 Javascript
node.js实现博客小爬虫的实例代码
Oct 08 Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 Javascript
webpack常用配置总览(小结)
Nov 18 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 Javascript
Chrome中JSON.parse的特殊实现
Jan 12 #Javascript
js中将字符串转换成json的三种方式
Jan 12 #Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 #Javascript
基于JQuery实现相同内容合并单元格的代码
Jan 12 #Javascript
jquery EasyUI的formatter格式化函数代码
Jan 12 #Javascript
Script的加载方法小结
Jan 12 #Javascript
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 #Javascript
You might like
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
jQuery实现html双向绑定功能示例
2017/10/09 jQuery
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
JS严格模式知识点总结
2018/02/27 Javascript
Mac下安装vue
2018/04/11 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
Python实现的中国剩余定理算法示例
2017/08/05 Python
python利用thrift服务读取hbase数据的方法
2018/12/27 Python
详解python中list的使用
2019/03/15 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
Python读写Excel表格的方法
2021/03/02 Python
美国婚礼装饰和活动用品批发供应商:Event Decor Direct
2018/10/12 全球购物
低碳环保口号
2014/06/12 职场文书
心理学专业求职信
2014/06/16 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
2015年财务部工作总结
2015/04/10 职场文书
大学生读书笔记大全
2015/07/01 职场文书
正规欠条模板
2015/07/03 职场文书
小学美术教学反思
2016/02/17 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
PyTorch的Debug指南
2021/05/07 Python
配置nginx 重定向到系统维护页面
2021/06/08 Servers
解析Redis Cluster原理
2021/06/21 Redis
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers