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数组处理方法汇总
Jun 20 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
May 05 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
JS正则表达式封装与使用操作示例
May 15 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
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
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
PHP生成sitemap.xml地图函数
2013/11/13 PHP
深入分析PHP引用(&)
2014/09/04 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
一个tab标签切换效果代码
2009/03/27 Javascript
jquery ajax执行后台方法
2010/03/18 Javascript
jquery 使用点滴函数代码
2011/05/20 Javascript
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
vue使用keep-alive实现数据缓存不刷新
2017/10/21 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
python多线程用法实例详解
2015/01/15 Python
在Python中使用模块的教程
2015/04/27 Python
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
Python实现简单的代理服务器
2015/07/25 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
英国计算机商店:Technextday
2019/12/28 全球购物
经典演讲稿范文
2013/12/30 职场文书
党员干部承诺书
2014/03/25 职场文书
优质服务演讲稿
2014/05/14 职场文书
2014年安全生产工作总结
2014/11/13 职场文书
2015年招聘工作总结
2014/12/12 职场文书
喋血孤城观后感
2015/06/08 职场文书
高二化学教学反思
2016/02/22 职场文书
vue引入Excel表格插件的方法
2021/04/28 Vue.js