如何實現(xiàn)JavaScript鏈式調用

小編這次要給大家分享的是如何實現(xiàn)JavaScript鏈式調用，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

創(chuàng)新互聯(lián)專注于大連企業(yè)網(wǎng)站建設,自適應網(wǎng)站建設,電子商務商城網(wǎng)站建設。大連網(wǎng)站建設公司,為大連等地區(qū)提供建站服務。全流程按需設計網(wǎng)站，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務

1、什么是鏈式調用？

這個很容易理解，例如

$('text').setStyle('color', 'red').show();

一般的函數(shù)調用和鏈式調用的區(qū)別：鏈式調用完方法后，return this返回當前調用方法的對象。

首先，我們先來看看一般函數(shù)的調用方式

（1）先創(chuàng)建一個簡單的類

//創(chuàng)建一個bird類
  function Bird(name) {
    this.name=name;
    this.run=function () {
    document.write(name+" "+"start run;");
        }
    this.stopRun=function () {
     document.write(name+" "+"start run;");
        }
    this.sing=function () {
      document.write(name+" "+"start sing;");
    }
    this.stopSing=function () {
      document.write(name+" "+"start stopSing;");
    }
  }

（2）使用方式：一般的調用方式

 var bird=new Bird("測試");
  bird.run();
  birdbird.sing();
  bird.stopSing();
  bird.stopRun();

//結果為;測試 start run;測試 start sing;測試 start stopSing;測試 start run;

（3）總結，該種方式有一個弊端就是：多次重復使用一個對象變量

然后，我們再來看看將上述改成鏈式調用的格式

（1）在創(chuàng)建的簡單類中加上return this，如下

//創(chuàng)建一個bird類
  function Bird(name) {
    this.name=name;
    this.run=function () {
      document.write(name+" "+"start run;");
      return this;// return this返回當前調用方法的對象。
    }
    this.stopRun=function () {
      document.write(name+" "+"start run;");
      return this;
    }
    this.sing=function () {
      document.write(name+" "+"start sing;");
      return this;
    }
    this.stopSing=function () {
      document.write(name+" "+"start stopSing;");
      return this;
    }
  }

（2）使用鏈式調用（連綴的方式）

var bird=new Bird("測試");
  bird.run().sing().stopSing().stopRun();//結果為;測試 start run;測試 start sing;測試 start stopSing;測試 start run;

（3）總結此種方式的調用結果與一般的調用方式產(chǎn)生的結果一樣，優(yōu)點是：鏈式調用這種風格有助于簡化代碼的編寫工作，讓代碼更加簡潔、易讀，同時也避免多次重復使用一個對象變量

2.模仿jquery的鏈式調用

第一步，定義一個含參數(shù)的空對象

(function(){
 //下劃線：表示私有變量的寫法
  function _$(els) { };//有參數(shù)的空對象
})()//程序啟動的時候 里面的代碼直接執(zhí)行了

第二步，準備方法在_$上定義一個onrReady方法

(function(){

  //第一步，下劃線：表示私有變量的寫法
  function _$(els) { };//有參數(shù)的空對象

  //第二步，準備方法 在_$上定義一個onrReady方法
  _$.onrReady=function (fn) {
    //按要求把對象（_$）注冊到window對象上
    //對外開放的接口
    window.$=function () {
      return new _$(arguments);//傳遞相應的方法調用參數(shù) 返回一可以使用function類原型上的方法的對象（$("")=_$(參數(shù))）
    }
    fn();
  }
  }
})()

第三步，為了類（Function）能擴展函數(shù)，我們定義一個它的靜態(tài)函數(shù)

Function.prototype.method=function (name,fn) {//（函數(shù)名稱，函數(shù)本身）
   this.prototype[name]=fn;
   return this;//鏈式調用關鍵
};//這個函數(shù)的意思：為function對象增加函數(shù)，會用鏈式調用，鏈式調用有兩個參數(shù)name,和fn

第四步，擴展類的相應方法鏈式的對象增加jquery庫提供的操作函數(shù)

(function(){
  //下劃線：表示私有變量的寫法
  function _$(els) { };//有參數(shù)的空對象
  //第二步，準備方法 在_$上定義一個onrReady方法
  _$.onrReady=function (fn) {
    //按要求把對象（_$）注冊到window對象上  
    //對外開放的接口
    window.$=function () {
      return new _$(arguments);//傳遞相應的方法調用參數(shù) 返回一可以使用function類原型上的方法的對象（$("")=_$(參數(shù))）
    }
    fn();
  }
//第四步
  //擴展類的相應方法 鏈式的對象增加jquery庫提供的操作函數(shù) 
_$.method("AddEvent",function (type,fn) {//_$本身是一個function要繼承原型鏈上的東西。
  fn();
}).method("getEvent",function (fn,e) {
  fn();
})

})()

第五步，使用，需要調用_$.onReady方法才可以返回對象使用從function類繼承而來的原型上的方法

(function () {
  // （1）下劃線：表示私有變量的寫法
  function _$(els) { };//有參數(shù)的空對象
  //（2）準備方法 在_$上定義一個onrReady方法
   // window.$=_$;
  _$.onrReady=function (fn) {
    //按要求把對象（_$）注冊到window對象上  在任何地方都可以使用
    //對外開放的接口
    window.$=function () {//window 上先注冊一個全局變量 與外界產(chǎn)生關系
      return new _$(arguments);//傳遞相應的方法調用參數(shù) 返回一可以使用function類原型上的方法的對象（$("")=_$(參數(shù))）
    }
    fn();
  }
  //（4）擴展類的相應方法 鏈式的對象增加jquery庫提供的操作函數(shù)
_$.method("AddEvent",function (type,fn) {//_$本身是一個function要繼承原型鏈上的東西。
  fn();
}).method("getEvent",function (fn,e) {
  fn();
});
  //第五步，開始使用 ，需要調用_$.onready方法才可以返回對象使用從function類繼承而來的原型上的方法
   _$.onrReady(function () {//$是綁定在Windows上的
    $("").AddEvent("click",function () {
      alert("click")
    })
  })

})()

上述綜合的代碼為

//第三步，為了類（Function）能擴展函數(shù)，我們定義一個它的靜態(tài)函數(shù)
Function.prototype.method=function (name,fn) {//（函數(shù)名稱，函數(shù)本身）
   this.prototype[name]=fn;
   return this;//鏈式調用關鍵
};//這個函數(shù)的意思：為function對象增加函數(shù)，會用鏈式調用，鏈式調用有兩個參數(shù)name,和fn

(function () {
  // 第一步，下劃線：表示私有變量的寫法
  function _$(els) { };//有參數(shù)的空對象
  //第二步，準備方法 在_$上定義一個onrReady方法
   // window.$=_$;
  _$.onrReady=function (fn) {
    //按要求把對象（_$）注冊到window對象上 
    //對外開放的接口
    window.$=function () {
      return new _$(arguments);//傳遞相應的方法調用參數(shù) 返回一可以使用function類原型上的方法的對象（$("")=_$(參數(shù))）
    }
    fn();
  }
  //第四步，擴展類的相應方法 鏈式的對象增加jquery庫提供的操作函數(shù)
_$.method("AddEvent",function (type,fn) {//_$本身是一個function要繼承原型鏈上的東西，所以可以使用method方法
  fn();
}).method("getEvent",function (fn,e) {
  fn();
});
  //第五步，開始使用，需要調用_$.onready方法才可以返回對象使用從function類繼承而來的原型上的方法
   _$.onrReady(function () {//$是綁定在Windows上的
    $("").AddEvent("click",function () {
      alert("click")
    })
  })
})()

上述是將$綁定到window上的操作，如果我們想將$綁定到一個指定對象上我們可以這通過改變上述的第二步和第五步如下，

/**
 * Created by 與你在巔峰相會 on 2017/10/12.
 */

//第三步，為了類（Function）能擴展函數(shù)，我們定義一個它的靜態(tài)函數(shù)
Function.prototype.method=function (name,fn) {//（函數(shù)名稱，函數(shù)本身）
   this.prototype[name]=fn;
   return this;//鏈式調用關鍵
};//這個函數(shù)的意思：為function對象增加函數(shù)，會用鏈式調用，鏈式調用有兩個參數(shù)name,和fn

(function () {
  // 第一步，下劃線：表示私有變量的寫法
  function _$(els) { };//有參數(shù)的空對象
  //第二步，準備方法 在_$上定義一個onrReady方法
  _$.onReady=function (obj,fn) {//obj傳進來的對象
    if(obj){
      //按要求把對象（_$）注冊到window對象上 
      //對外開放的接口
      obj.$=function () {
        return new _$(arguments);//傳遞相應的方法調用參數(shù) 返回一可以使用function類原型上的方法的對象（$("")=_$(參數(shù))）
      }
    }else {
      //按要求把對象（_$）注冊到window對象上  
      //對外開放的接口
      window.$=function () {
        return new _$(arguments);//傳遞相應的方法調用參數(shù) 返回一可以使用function類原型上的方法的對象（$("")=_$(參數(shù))）
      }
    }
    fn();
  }
  //第四步，擴展類的相應方法 鏈式的對象增加jquery庫提供的操作函數(shù)
_$.method("AddEvent",function (type,fn) {//_$本身是一個function要繼承原型鏈上的東西，可以直接使用method方法
  fn();
}).method("getEvent",function (fn,e) {
  fn();
});
  //第五步，開始使用，需要調用_$.onready方法才可以返回對象使用從function類繼承而來的原型上的方法
   var com={};
  _$.onReady(com,function () {//$是綁定在Windows上的
    com.$("").AddEvent("click",function () {
      alert("click")
    })
  })
})()

自己畫一個圖簡單理解一下上面的過程及思路：

如何實現(xiàn)JavaScript鏈式調用

看完這篇關于如何實現(xiàn)JavaScript鏈式調用的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。

當前名稱：如何實現(xiàn)JavaScript鏈式調用
路徑分享：http://chinadenli.net/article34/pehpse.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設、Google、標簽優(yōu)化、小程序開發(fā)、用戶體驗、App開發(fā)

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

如何實現(xiàn)JavaScript鏈式調用