JavaScript中两种链式调用实现代码
2011-01-12 00:00
881 查看
一、方法体内返回对象实例自身(this)
定义了function/类ClassA。有三个属性/字段prop1,prop2,prop3,三个方法methed1,method2,method3分别设置prop1,prop2,prop3。
链式调用如下:
可以看到对obj进行了连续三次操作,只要愿意ClassA的N多方法都这样定义,调用链会一直延续。
该方式缺点是链方法唯一地绑定于一种对象类型(ClaaaA),按这种方式实现链式操作,每定义一个类,其方法体中都要返回this。第二种方式可以解决这个问题。
二、对象传入后每次调用返回函数自身
注意ClassB的method1,method2,method3中不再返回this了。
链式调用如下:
第一种方式3次调用后返回了对象自身,这里使用一个空"()"取回对象
这种方式写类时方法体中无须返回this,且可以对任何对象进行链式调用。
从写法上总结下两种的调用方式:
最后,感谢沐海,我是从wee库中获取以上灵感的。
/201101/yuanma/chain.rar
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)
- Javascript 链式调用实现代码(参考jquery)
- MSScriptControl详解(可实现在C#等语言中调用JAVASCRIPT代码)
- Javascript 调用C# 代码并传递参数的两种方法
- Javascript 调用C# 代码并传递参数的两种方法
- javascript实现简单的链式调用
- 通过Javascript调用微软认知服务情感检测接口的两种实现方式
- 简谈 JavaScript、Java 中链式方法调用大致实现原理
- 第51讲:Scala中链式调用风格的实现代码实战及其在Spark编程中的广泛运用学习笔记
- 51.Scala中链式调用风格的实现代码实战及其在Spark编程中的广泛运用
- 写个 JavaScript 异步调用框架 (Part 5 - 链式实现)
- ASP.NET中服务器控件Button调用javascript代码运用正则表达式验证TextBox中输入的是否为正整数或正小数,符合要求则继续运行服务器端代码功能的实现
- 谈谈从库函数API和C代码中嵌入汇编两种方式来实现系统调用
- Scala 深入浅出实战经典 第51讲:Scala中链式调用风格的实现代码实战及其在Spark中应用
- 两种方法调用Bootstrap3的Javascript组件:data属性定义和书写JS代码
- JavaScript实现二级、多级(N级)联动下拉列表框更新版,支持IE6,FireFox,函数和类两种调用方式,支持到N级,非常通用。
- JavaScript调用ajax获取文本文件内容实现代码
- RxJava(十一)defer操作符实现代码支持链式调用