JavaScript中兩種鏈式調(diào)用實現(xiàn)代碼
更新時間:2011年01月12日 18:02:02 作者:
方法鏈一般適合對一個對象進行連續(xù)操作(集中在一句代碼)。一定程度上可以減少代碼量,缺點是它占用了函數(shù)的返回值。
一、方法體內(nèi)返回對象實例自身(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。
鏈式調(diào)用如下:
var obj = new ClassA();
obj.method1(1).method2(2).method(3); // obj -> prop1=1,prop2=2,prop3=3
可以看到對obj進行了連續(xù)三次操作,只要愿意ClassA的N多方法都這樣定義,調(diào)用鏈會一直延續(xù)。
該方式缺點是鏈方法唯一地綁定于一種對象類型(ClaaaA),按這種方式實現(xiàn)鏈式操作,每定義一個類,其方法體中都要返回this。第二種方式可以解決這個問題。
二、對象傳入后每次調(diào)用返回函數(shù)自身
/**
* 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了。
鏈式調(diào)用如下:
var obj = new ClassB();
chain(obj)('method1',4)('method2',5)('method3',6); // obj -> prop1=4,prop2=5,prop3=6
第一種方式3次調(diào)用后返回了對象自身,這里使用一個空"()"取回對象
// result -> prop1=4,prop2=5,prop3=6
var result = chain(obj)('method1',4)('method2',5)('method3',6)();
這種方式寫類時方法體中無須返回this,且可以對任何對象進行鏈式調(diào)用。
從寫法上總結下兩種的調(diào)用方式:
obj
.method1(arg1)
.method2(arg2)
.method3(arg3)
...
chain(obj)
(method1,arg1)
(method2,arg2)
(method3,arg3)
...
最后,感謝沐海,我是從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。
鏈式調(diào)用如下:
復制代碼 代碼如下:
var obj = new ClassA();
obj.method1(1).method2(2).method(3); // obj -> prop1=1,prop2=2,prop3=3
可以看到對obj進行了連續(xù)三次操作,只要愿意ClassA的N多方法都這樣定義,調(diào)用鏈會一直延續(xù)。
該方式缺點是鏈方法唯一地綁定于一種對象類型(ClaaaA),按這種方式實現(xiàn)鏈式操作,每定義一個類,其方法體中都要返回this。第二種方式可以解決這個問題。
二、對象傳入后每次調(diào)用返回函數(shù)自身
復制代碼 代碼如下:
/**
* 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了。
鏈式調(diào)用如下:
復制代碼 代碼如下:
var obj = new ClassB();
chain(obj)('method1',4)('method2',5)('method3',6); // obj -> prop1=4,prop2=5,prop3=6
第一種方式3次調(diào)用后返回了對象自身,這里使用一個空"()"取回對象
復制代碼 代碼如下:
// result -> prop1=4,prop2=5,prop3=6
var result = chain(obj)('method1',4)('method2',5)('method3',6)();
這種方式寫類時方法體中無須返回this,且可以對任何對象進行鏈式調(diào)用。
從寫法上總結下兩種的調(diào)用方式:
復制代碼 代碼如下:
obj
.method1(arg1)
.method2(arg2)
.method3(arg3)
...
chain(obj)
(method1,arg1)
(method2,arg2)
(method3,arg3)
...
最后,感謝沐海,我是從wee庫中獲取以上靈感的。
/201101/yuanma/chain.rar
您可能感興趣的文章:
- JavaScript鏈式調(diào)用原理與實現(xiàn)方法詳解
- 《javascript設計模式》學習筆記四:Javascript面向對象程序設計鏈式調(diào)用實例分析
- 在JavaScript中實現(xiàn)鏈式調(diào)用的實現(xiàn)
- JavaScript的級聯(lián)函數(shù)用法簡單示例【鏈式調(diào)用】
- JavaScript鏈式調(diào)用實例淺析
- javascript簡單鏈式調(diào)用案例分析
- 學習JavaScript設計模式(鏈式調(diào)用)
- JavaScript DSL 流暢接口(使用鏈式調(diào)用)實例
- JS鏈式調(diào)用的實現(xiàn)方法
- javascript中的鏈式調(diào)用
- javascript 支持鏈式調(diào)用的異步調(diào)用框架Async.Operation
- JavaScript 異步調(diào)用框架 (Part 5 - 鏈式實現(xiàn))
- 詳解JavaScript中的鏈式調(diào)用
相關文章
JavaScript中的惰性載入函數(shù)及優(yōu)勢
這篇文章主要介紹了JavaScript中的惰性載入函數(shù)及優(yōu)勢,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02JavaScript中“過于”犀利地for/in循環(huán)使用示例
Java中的增強for循環(huán)很是好用,但是JavaScript中為我們提供的for/in循環(huán)已然不是這么簡單了,下面有個簡單的示例,大家不妨參考下2013-10-10