JavaScript對象鏈式操作代碼(jquery)
更新時間:2010年07月04日 19:43:48 作者:
自從使用了jQuery以后,對它的鏈式操作很是依賴,以至于常常覺得其他庫不好用。。
雖然現(xiàn)在慢慢減少了對jQuery的使用(項目上還是用,效率高點。平時基本不用了),希望從而減少對jQuery的依賴度。
但是這鏈式操作的方式實在吸引人(貌似現(xiàn)在不少新庫都采用了鏈式操作)。
新手無畏嘛,所以寫了以下代碼。主要是避免以后又忘了,呵呵。
window.k = function() {
return new k.fn.init(arguments);
}
k.fn = k.prototype = {
init:function() {
this.length = 0;
//var args = Array.prototype.slice.call(arguments,0);
Array.prototype.push.apply(this,arguments[0]);
return this;
},
show:function() {
console.log(Array.prototype.slice.call(this,0).join("$"));
return this;
},
hide:function() {
console.log(this);
return this;
}
}
k.fn.init.prototype = k.fn;
console.log(k("0",1,2,3,4,5).show().hide());
這只是進行了鏈式操作。但是在firbug下可以看到j(luò)Query對象返回的是數(shù)組/類數(shù)組。要實現(xiàn)這個卻不知道怎么辦好。。
總不能讓k.fn.prototype = new Array()吧。真要看jQuery源代碼還真是有點累。。
下面是針對網(wǎng)友的一些回復(fù)
其實鏈式操作很簡單,就是每次返回操作對象本身,這樣就可以持續(xù)的調(diào)用該對象本身定義的所有方法了。
最簡單的例子:
var o = function() {
/**
do something
*/
return this;
}
o.prototype = {
action1: function() {
/**
do something
*/
return this;
},
action2: function() {
/**
do something
*/
return this;
}
}
你可以這樣調(diào)用:
new o() //
.action1() //
.action2(); //每一步操作返回的都是實例化的o對象
它其實等同于這樣:
var a = new o();//如果沒有返回this,那么就不能在這里繼續(xù)調(diào)用了。因為返回的是undefined。
a.action1(); //這個時候就只能對a(實例化的o對象的引用)來操作。
a.action2();
如果你用過jQuery就應(yīng)該發(fā)現(xiàn)了。jQuery并不需要你使用new來實例化一個對象,在使用的時候顯得更方便。
所以我們定義另一個對象來封裝上面提到的o對象:
var k = function() {
return new o();
}
這樣我們就可以這樣調(diào)用了:
k().action1().action2();
我為你推薦 一個叫 "函數(shù)化"的 構(gòu)造JS的方法。
//加粗表示強調(diào)
//這個方法是 《javascript語言精粹》第52頁 5.4函數(shù)化 上的。
var constructor = function (spec,my){
var that,其他的私有實例變量;
my = my || {};
把共享的變量和函數(shù)添加到my中
that = 一個新對象
添加給that 的特權(quán)方法
return that;
}
但是這鏈式操作的方式實在吸引人(貌似現(xiàn)在不少新庫都采用了鏈式操作)。
新手無畏嘛,所以寫了以下代碼。主要是避免以后又忘了,呵呵。
復(fù)制代碼 代碼如下:
window.k = function() {
return new k.fn.init(arguments);
}
k.fn = k.prototype = {
init:function() {
this.length = 0;
//var args = Array.prototype.slice.call(arguments,0);
Array.prototype.push.apply(this,arguments[0]);
return this;
},
show:function() {
console.log(Array.prototype.slice.call(this,0).join("$"));
return this;
},
hide:function() {
console.log(this);
return this;
}
}
k.fn.init.prototype = k.fn;
console.log(k("0",1,2,3,4,5).show().hide());
這只是進行了鏈式操作。但是在firbug下可以看到j(luò)Query對象返回的是數(shù)組/類數(shù)組。要實現(xiàn)這個卻不知道怎么辦好。。
總不能讓k.fn.prototype = new Array()吧。真要看jQuery源代碼還真是有點累。。
下面是針對網(wǎng)友的一些回復(fù)
其實鏈式操作很簡單,就是每次返回操作對象本身,這樣就可以持續(xù)的調(diào)用該對象本身定義的所有方法了。
最簡單的例子:
復(fù)制代碼 代碼如下:
var o = function() {
/**
do something
*/
return this;
}
o.prototype = {
action1: function() {
/**
do something
*/
return this;
},
action2: function() {
/**
do something
*/
return this;
}
}
你可以這樣調(diào)用:
new o() //
.action1() //
.action2(); //每一步操作返回的都是實例化的o對象
它其實等同于這樣:
var a = new o();//如果沒有返回this,那么就不能在這里繼續(xù)調(diào)用了。因為返回的是undefined。
a.action1(); //這個時候就只能對a(實例化的o對象的引用)來操作。
a.action2();
如果你用過jQuery就應(yīng)該發(fā)現(xiàn)了。jQuery并不需要你使用new來實例化一個對象,在使用的時候顯得更方便。
所以我們定義另一個對象來封裝上面提到的o對象:
var k = function() {
return new o();
}
這樣我們就可以這樣調(diào)用了:
k().action1().action2();
我為你推薦 一個叫 "函數(shù)化"的 構(gòu)造JS的方法。
復(fù)制代碼 代碼如下:
//加粗表示強調(diào)
//這個方法是 《javascript語言精粹》第52頁 5.4函數(shù)化 上的。
var constructor = function (spec,my){
var that,其他的私有實例變量;
my = my || {};
把共享的變量和函數(shù)添加到my中
that = 一個新對象
添加給that 的特權(quán)方法
return that;
}
相關(guān)文章
Javascript面向?qū)ο笤O(shè)計一 工廠模式
工廠模式抽象了創(chuàng)建具體對象的過程,但是在ECMAScript中無法創(chuàng)建類,所以就使用一種函數(shù)來封裝以特定接口創(chuàng)建對象的細節(jié)2011-12-12javascript中的對象創(chuàng)建 實例附注釋
為了讓你的js代碼更加的專業(yè)與代碼的條理性,很多情況下都是定義成對象的方式來書寫代碼,想深入的朋友可以參考下。2011-02-02Javascript 類與靜態(tài)類的實現(xiàn)(續(xù))
由于MM的事件已干完,接著我們的靜態(tài)類的實現(xiàn)。這東西在Javascript里用得會非常的頻繁,因為針對現(xiàn)在的網(wǎng)頁,多個基于同一個類對象的頁面不多,往往不同塊對象的交互就可以解決問題了,這就需要在JS針對元素定義幾個靜態(tài)類就可以完事了,進入正題。2010-04-04學(xué)習面向?qū)ο笾嫦驅(qū)ο蟮幕靖拍?對象和其他基本要素
學(xué)習面向?qū)ο笾嫦驅(qū)ο蟮幕靖拍?對象和其他基本要素2010-11-11DOMAssitant最新版 DOMAssistant 2.5發(fā)布
google code上的project ,值得大家學(xué)習它的類庫2007-12-12javascript 面向?qū)ο笕吕砭氈當?shù)據(jù)的封裝
JavaScript 是一種非常靈活的面向?qū)ο蟪绦蛟O(shè)計語言,它與傳統(tǒng)的強類型的面向?qū)ο蟪绦蛟O(shè)計語言(如 C++,Java,C# 等)有很大不同,所以要實現(xiàn)如 C++、java、C# 當中的一些特性就需要換一種思考方式來解決。2009-12-12JavaScript 工具庫 Cloudgamer JavaScript Library v0.1 發(fā)布
研究了一年多的js,也差不多寫一個自己的js庫了。 我寫這個不算框架,只是一個小型的js工具庫,所以我用的名字是Library。2009-10-10