JavaScript對(duì)象鏈?zhǔn)讲僮鞔a(jquery)
更新時(shí)間：2010年07月04日 19:43:48 作者：
自從使用了jQuery以后，對(duì)它的鏈?zhǔn)讲僮骱苁且蕾?，以至于常常覺得其他庫(kù)不好用。。
雖然現(xiàn)在慢慢減少了對(duì)jQuery的使用（項(xiàng)目上還是用，效率高點(diǎn)。平時(shí)基本不用了），希望從而減少對(duì)jQuery的依賴度。
但是這鏈?zhǔn)讲僮鞯姆绞綄?shí)在吸引人（貌似現(xiàn)在不少新庫(kù)都采用了鏈?zhǔn)讲僮鳎?
新手無(wú)畏嘛，所以寫了以下代碼。主要是避免以后又忘了，呵呵。
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());
這只是進(jìn)行了鏈?zhǔn)讲僮?。但是在firbug下可以看到j(luò)Query對(duì)象返回的是數(shù)組/類數(shù)組。要實(shí)現(xiàn)這個(gè)卻不知道怎么辦好。。
總不能讓k.fn.prototype = new Array()吧。真要看jQuery源代碼還真是有點(diǎn)累。。
下面是針對(duì)網(wǎng)友的一些回復(fù)
其實(shí)鏈?zhǔn)讲僮骱芎?jiǎn)單，就是每次返回操作對(duì)象本身，這樣就可以持續(xù)的調(diào)用該對(duì)象本身定義的所有方法了。
最簡(jiǎn)單的例子：
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(); //每一步操作返回的都是實(shí)例化的o對(duì)象
它其實(shí)等同于這樣：
var a = new o();//如果沒有返回this，那么就不能在這里繼續(xù)調(diào)用了。因?yàn)榉祷氐氖莡ndefined。
a.action1(); //這個(gè)時(shí)候就只能對(duì)a（實(shí)例化的o對(duì)象的引用）來(lái)操作。
a.action2();
如果你用過jQuery就應(yīng)該發(fā)現(xiàn)了。jQuery并不需要你使用new來(lái)實(shí)例化一個(gè)對(duì)象，在使用的時(shí)候顯得更方便。
所以我們定義另一個(gè)對(duì)象來(lái)封裝上面提到的o對(duì)象：
var k = function() {
return new o();
}
這樣我們就可以這樣調(diào)用了：
k().action1().action2();
我為你推薦 一個(gè)叫 "函數(shù)化"的 構(gòu)造JS的方法。
//加粗表示強(qiáng)調(diào)
//這個(gè)方法是 《javascript語(yǔ)言精粹》第52頁(yè) 5.4函數(shù)化 上的。
var constructor = function (spec,my){
var that,其他的私有實(shí)例變量;
my = my || {};
把共享的變量和函數(shù)添加到my中
that = 一個(gè)新對(duì)象
添加給that 的特權(quán)方法
return that;
}
但是這鏈?zhǔn)讲僮鞯姆绞綄?shí)在吸引人（貌似現(xiàn)在不少新庫(kù)都采用了鏈?zhǔn)讲僮鳎?
新手無(wú)畏嘛，所以寫了以下代碼。主要是避免以后又忘了，呵呵。
復(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());
這只是進(jìn)行了鏈?zhǔn)讲僮?。但是在firbug下可以看到j(luò)Query對(duì)象返回的是數(shù)組/類數(shù)組。要實(shí)現(xiàn)這個(gè)卻不知道怎么辦好。。
總不能讓k.fn.prototype = new Array()吧。真要看jQuery源代碼還真是有點(diǎn)累。。
下面是針對(duì)網(wǎng)友的一些回復(fù)
其實(shí)鏈?zhǔn)讲僮骱芎?jiǎn)單，就是每次返回操作對(duì)象本身，這樣就可以持續(xù)的調(diào)用該對(duì)象本身定義的所有方法了。
最簡(jiǎn)單的例子：
復(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(); //每一步操作返回的都是實(shí)例化的o對(duì)象
它其實(shí)等同于這樣：
var a = new o();//如果沒有返回this，那么就不能在這里繼續(xù)調(diào)用了。因?yàn)榉祷氐氖莡ndefined。
a.action1(); //這個(gè)時(shí)候就只能對(duì)a（實(shí)例化的o對(duì)象的引用）來(lái)操作。
a.action2();
如果你用過jQuery就應(yīng)該發(fā)現(xiàn)了。jQuery并不需要你使用new來(lái)實(shí)例化一個(gè)對(duì)象，在使用的時(shí)候顯得更方便。
所以我們定義另一個(gè)對(duì)象來(lái)封裝上面提到的o對(duì)象：
var k = function() {
return new o();
}
這樣我們就可以這樣調(diào)用了：
k().action1().action2();
我為你推薦 一個(gè)叫 "函數(shù)化"的 構(gòu)造JS的方法。
復(fù)制代碼 代碼如下:
//加粗表示強(qiáng)調(diào)
//這個(gè)方法是 《javascript語(yǔ)言精粹》第52頁(yè) 5.4函數(shù)化 上的。
var constructor = function (spec,my){
var that,其他的私有實(shí)例變量;
my = my || {};
把共享的變量和函數(shù)添加到my中
that = 一個(gè)新對(duì)象
添加給that 的特權(quán)方法
return that;
}
相關(guān)文章
Javascript面向?qū)ο笤O(shè)計(jì)一 工廠模式
工廠模式抽象了創(chuàng)建具體對(duì)象的過程，但是在ECMAScript中無(wú)法創(chuàng)建類，所以就使用一種函數(shù)來(lái)封裝以特定接口創(chuàng)建對(duì)象的細(xì)節(jié)2011-12-12
這篇起，會(huì)由淺到深的分析js OO之寫類方式，大概會(huì)有5-8篇。后面陸續(xù)會(huì)分析流行庫(kù)（框架）的寫類方式。為了討論的單一性，暫不考慮類的繼承，(私有,受保護(hù))屬性或方法。2009-07-07
javascript中的對(duì)象創(chuàng)建 實(shí)例附注釋
為了讓你的js代碼更加的專業(yè)與代碼的條理性，很多情況下都是定義成對(duì)象的方式來(lái)書寫代碼，想深入的朋友可以參考下。2011-02-02
Javascript 類與靜態(tài)類的實(shí)現(xiàn)(續(xù))
由于MM的事件已干完，接著我們的靜態(tài)類的實(shí)現(xiàn)。這東西在Javascript里用得會(huì)非常的頻繁，因?yàn)獒槍?duì)現(xiàn)在的網(wǎng)頁(yè)，多個(gè)基于同一個(gè)類對(duì)象的頁(yè)面不多，往往不同塊對(duì)象的交互就可以解決問題了，這就需要在JS針對(duì)元素定義幾個(gè)靜態(tài)類就可以完事了，進(jìn)入正題。2010-04-04
在"初識(shí)Javascript"章節(jié)中，提到通過作用域和閉包來(lái)隱藏內(nèi)部細(xì)節(jié)，并給外部提供訪問接口，就初次接觸到了信息隱藏的概念了2012-01-01
學(xué)習(xí)面向?qū)ο笾嫦驅(qū)ο蟮幕靖拍?對(duì)象和其他基本要素
學(xué)習(xí)面向?qū)ο笾嫦驅(qū)ο蟮幕靖拍?對(duì)象和其他基本要素2010-11-11
DOMAssitant最新版 DOMAssistant 2.5發(fā)布
google code上的project ,值得大家學(xué)習(xí)它的類庫(kù)2007-12-12
有時(shí)間重新審視了遍 Javascript 的面向?qū)ο髾C(jī)制。與其他的語(yǔ)言不同，Javascript 可以說(shuō)提供了更靈活的面向?qū)ο髾C(jī)制（比如 function 在完成其自身功能的同時(shí)也是對(duì)象）。2010-04-04
javascript 面向?qū)ο笕吕砭氈當(dāng)?shù)據(jù)的封裝
JavaScript 是一種非常靈活的面向?qū)ο蟪绦蛟O(shè)計(jì)語(yǔ)言，它與傳統(tǒng)的強(qiáng)類型的面向?qū)ο蟪绦蛟O(shè)計(jì)語(yǔ)言（如 C++，Java，C# 等）有很大不同，所以要實(shí)現(xiàn)如 C++、java、C# 當(dāng)中的一些特性就需要換一種思考方式來(lái)解決。2009-12-12
JavaScript 工具庫(kù) Cloudgamer JavaScript Library v0.1 發(fā)布
研究了一年多的js，也差不多寫一個(gè)自己的js庫(kù)了。 我寫這個(gè)不算框架，只是一個(gè)小型的js工具庫(kù)，所以我用的名字是Library。2009-10-10