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 相关文章推荐
JavaScript将Table导出到Excel实现思路及代码
Mar 13 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
JS实现数字格式千分位相互转换方法
Aug 01 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
微信小程序排坑指南详解
May 23 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 Javascript
JS+Canvas实现五子棋游戏
Aug 26 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
跟我学Laravel之配置Laravel
2014/10/15 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
windows下python和pip安装教程
2018/05/25 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
Python LMDB库的使用示例
2021/02/14 Python
eDreams澳大利亚:预订机票、酒店和度假产品
2017/04/19 全球购物
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
英语系本科生求职信范文
2013/12/18 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
学生会副主席竞聘书
2014/03/31 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
建筑节能汇报材料
2014/08/22 职场文书
二年级学生期末评语
2014/12/26 职场文书
画展观后感
2015/06/17 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers