如何寫 JS 的鏈式調用 ---》JS 設計模式《----方法的鏈式調用

1.以$ 函數為例。通常返回一個HTML元素或一個元素集合。

代碼如下：

function $(){
    var elements = [];
    for(var i=0;i<arguments.length;i++){
     var element = argument[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 = [];
    for(var i=0;i<els.length;i++)  {
      var element = els[i];
      if(typeOf element === "String") {
         element = document.getElementById(element);
      }
       this.elements.push(element);
    }    
//共有借口 仍然一樣
  window.$ = function() {
     return new _$(arguments);
   }

})()

由於所有對象都會繼承其原型對象的屬性和方法，所以我們可以讓定義在原型對象中的幾個方法都返回用於調用方法的實例對象的引用，這樣就可以對那些方法進行鏈式調用---》有了這一點《-----我們就可以動手在_$這個私有構造函數的prototype對象中添加方法，用於實現鏈式調用；

代碼如下：

(function() {
// 私有構造器
  function _$(els){
    this.elements = [];
    for(var i = 0;i<els.length;i++){
     var element = els[i];
     if(typeOf element === "String") {
       element = document.getElementById(element);
      }
     this.elements.push(element);
    }
// 在原型中添加屬性和方法
   _$.prototype = {
       each: function(){
          for(var i = 0;i<this.elements.length;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(el){
            that.setStyle('display', 'block');
           });
          return this;
         },
        addEvent: function(type, fn){
          var add = function(el){
              if(window.addEventListener) {
                el.addEventListener(type, fn,false);
               } else if(window.attachEvent) {
                 el.attachEvent(on + 'type', fn);
               }
             this.each(function(el){
                add(el);
              });
            }
           return this;
         }
    };
  window.$ = function() {
    return new _$(arguments);
   }

}



})

到目前為止，該類的每一個方法的最后一行都是以 return this 結束。 這會將用以調用方法的對象傳給調用鏈上的下一個方法。支持鏈式調用的接口帶來的可能性是無窮的。現在你就可以實現代碼的鏈式調用了

$(window).addEvent('load',function(){
   $('xxx').show().setStyle().addEvent('click',function(){
   //想寫的代碼 
    }) 
})

ps: 到此為止，你基本上可以理解JS 或者 Jquery是如何實現了方法的鏈式調用。。。

     如果覺得文章不錯，歡迎打賞

下一篇將介紹如何設計一個支持方法鏈式調用的JS 庫