簡(jiǎn)單技巧創(chuàng)建JS的鏈?zhǔn)秸{(diào)用, 相信很多人都知道，jQuery的鏈?zhǔn)秸{(diào)用用起來非常的爽，就像下面這樣，把自己需要用的方法串聯(lián)起來，一條語句就可以完成多個(gè)動(dòng)作：

jquery代碼：

$("div").addClass("newClass").text("Hello").show();

上面的語句為div元素添加了名為"newClass"的CSS class，把內(nèi)容改為"Hello"，最后將其顯示出來，非常的方便簡(jiǎn)潔。

下面我們也來創(chuàng)建自己的鏈?zhǔn)秸{(diào)用（由于本文只是說明如何實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用，為了簡(jiǎn)單起見，我們將只支持id選擇器），最后你會(huì)發(fā)現(xiàn)，實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用是非常簡(jiǎn)單的事情，唯一需要做的就是在每個(gè)方法后面返回this。

(function(){

function _$(id){

this.ele = document.getElementById(id);

}

_$.prototype = {

setColor : function(c){

this.ele.style.color = c;

return this; // Important

},

setBold : function(){

this.ele.style.fontWeight = "bold";

return this; // Important

}

/** 更多方法 **/

}

window.$ = function(id){

return new _$(id);

}

})();

說明：在上面的例子中，我們創(chuàng)建了一個(gè)閉包，同樣使用了$的命名空間，作為唯一提供給外部訪問的$函數(shù)，它返回一個(gè)內(nèi)部構(gòu)造器_$的實(shí)例化對(duì)象，通過prototype實(shí)現(xiàn)了 setColor 和 setBold 方法，在每次調(diào)用這些方法時(shí)都會(huì)返回當(dāng)前對(duì)象，于是返回的對(duì)象同樣再次具有在prototype中定義的各種方法，這就是鏈?zhǔn)秸{(diào)用的唯一訣竅，就這么簡(jiǎn)單。

如果一切順利，下面的語句將被成功執(zhí)行，它會(huì)將id為 test 的元素設(shè)置為紅色并加粗。

$('test').setColor("red").setBold();

更多信息請(qǐng)查看IT技術(shù)專欄