441      阿裏雲  技術社區[雲棲]

javascript中方法的鏈式調用(jQuery中的重要特性)

     方法的鏈式調用是jQuery最重要的特性，也是jQeury得以標榜的重要亮點，那麼今天我們就來看看這個特性是如何實現的？？？

     方法的鏈式調用隻是一種語法招數（紙老虎喲，不要被嚇到）。

      那我們就先來看看怎麼來消化掉這個紙老虎。為了實現這中技術。我們首先

      （1）創建一個取得HTML元素的對象的工廠（使用工廠模式創建，以後會有專門章節講解）。

      （2）創建一批對這些HTML元素執行某些操作的方法。

        僅僅需要這兩個步驟就可以完成。很簡單喲

        下麵我們就來看看如何實現這個技術：在實現這個技術之前。我們先來看看一個工具方法：

function $(){ var elements = []; if() for(var i=0,l=arguments.length;i<l;i++){ var element = arguments[i]; if(typeof element === "string"){ element = document.getElementById(element); } if(arguments.length ===1){ return element; } elements.push(element); } return elements; } 

大家對他肯定都非常熟悉。了，如果不太熟悉，自己反省一下。嗬嗬

書接上文，繼續：

如果把這個函數改造為一個構造函數，把函數所返回的元素作為數組保存在一個實例屬性中，並讓所有定義在構造函數的prototype屬性所指對象中的方法都返回用以調用方法的那個實例的引用，那麼它就具有了進行鏈式調用的能力。（這句話聽起來有點拗口，下麵會一一解釋）

首先把上麵的函數$改為一個工廠方法，它負責創建支持鏈式調用的對象，修改後的代碼如下：

(function(){ function _$(els){ this.elements = []; if() for(var i=0,l=els.length;i<l;i++){ var element = arguments[i]; if(typeof element === "string"){ element = document.getElementById(element); } this.elements.push(element); } } window.$ = function(){ return new _$(arguments); } })(); 

由於所有對象和屬性都會繼承其原型（prototype）對象的屬性和方法，所以我們可以讓定義在原型對象中的那些方法都返回用以調用方法的實例對象的引用（即定義在prototype上的方法都返回this），下麵繼續修改上述方法：

(function(){ function _$(els){ this.elements = []; if() for(var i=0,l=els.length;i<l;i++){ var element = arguments[i]; if(typeof element === "string"){ element = document.getElementById(element); } this.elements.push(element); } } //向_$的prototype屬性上添加方法，並且都放回當前實例對象的引用（this） _$.prototype ={ each : function(fn){ for(var i=0,l=this.elements.length; i<l;i++){ fn.call(this,this.elements[i]); } return this; }, setStyle:function(prop,val){ this.each(function(el){ el.style[prop]=val; }); return this; }, show:function(){ var that=this; this.each(function(){ that.setStyle("display","block"); }) return this; } } window.$ = function(){ return new _$(arguments); } })(); 

//由於是第一次發表技術文章，有不足之處希望大家多多指出。小弟在此恭候

最後更新：2017-04-02 00:06:42

  上一篇： 元素的ID慎用length

  下一篇： Mango配置