JavaScript鏈?zhǔn)秸{(diào)用原理與實(shí)現(xiàn)方法詳解

更新時(shí)間：2020年05月16日 12:19:03 作者：WFaceBoss

這篇文章主要介紹了JavaScript鏈?zhǔn)秸{(diào)用,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript鏈?zhǔn)秸{(diào)用基本原理、實(shí)現(xiàn)方法與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了JavaScript鏈?zhǔn)秸{(diào)用原理與實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：

1、什么是鏈?zhǔn)秸{(diào)用？

這個(gè)很容易理解，例如

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

一般的函數(shù)調(diào)用和鏈?zhǔn)秸{(diào)用的區(qū)別：鏈?zhǔn)秸{(diào)用完方法后，return this返回當(dāng)前調(diào)用方法的對(duì)象。

首先，我們先來(lái)看看一般函數(shù)的調(diào)用方式

（1）先創(chuàng)建一個(gè)簡(jiǎn)單的類

//創(chuàng)建一個(gè)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）使用方式：一般的調(diào)用方式

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

//結(jié)果為;測(cè)試 start run;測(cè)試 start sing;測(cè)試 start stopSing;測(cè)試 start run;

（3）總結(jié)，該種方式有一個(gè)弊端就是：多次重復(fù)使用一個(gè)對(duì)象變量

然后，我們?cè)賮?lái)看看將上述改成鏈?zhǔn)秸{(diào)用的格式

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

//創(chuàng)建一個(gè)bird類
  function Bird(name) {
    this.name=name;
    this.run=function () {
      document.write(name+" "+"start run;");
      return this;// return this返回當(dāng)前調(diào)用方法的對(duì)象。
    }
    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）使用鏈?zhǔn)秸{(diào)用（連綴的方式）

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

（3）總結(jié)此種方式的調(diào)用結(jié)果與一般的調(diào)用方式產(chǎn)生的結(jié)果一樣，優(yōu)點(diǎn)是：鏈?zhǔn)秸{(diào)用這種風(fēng)格有助于簡(jiǎn)化代碼的編寫工作，讓代碼更加簡(jiǎn)潔、易讀，同時(shí)也避免多次重復(fù)使用一個(gè)對(duì)象變量

2.模仿jquery的鏈?zhǔn)秸{(diào)用

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

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

第二步，準(zhǔn)備方法在_$上定義一個(gè)onrReady方法

(function(){

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

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

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

Function.prototype.method=function (name,fn) {//（函數(shù)名稱，函數(shù)本身）
   this.prototype[name]=fn;
   return this;//鏈?zhǔn)秸{(diào)用關(guān)鍵
};//這個(gè)函數(shù)的意思：為function對(duì)象增加函數(shù)，會(huì)用鏈?zhǔn)秸{(diào)用，鏈?zhǔn)秸{(diào)用有兩個(gè)參數(shù)name,和fn

第四步，擴(kuò)展類的相應(yīng)方法鏈?zhǔn)降膶?duì)象增加jquery庫(kù)提供的操作函數(shù)

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

})()

第五步，使用，需要調(diào)用_$.onReady方法才可以返回對(duì)象使用從function類繼承而來(lái)的原型上的方法

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

})()

上述綜合的代碼為

//第三步，為了類（Function）能擴(kuò)展函數(shù)，我們定義一個(gè)它的靜態(tài)函數(shù)
Function.prototype.method=function (name,fn) {//（函數(shù)名稱，函數(shù)本身）
   this.prototype[name]=fn;
   return this;//鏈?zhǔn)秸{(diào)用關(guān)鍵
};//這個(gè)函數(shù)的意思：為function對(duì)象增加函數(shù)，會(huì)用鏈?zhǔn)秸{(diào)用，鏈?zhǔn)秸{(diào)用有兩個(gè)參數(shù)name,和fn

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

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

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

//第三步，為了類（Function）能擴(kuò)展函數(shù)，我們定義一個(gè)它的靜態(tài)函數(shù)
Function.prototype.method=function (name,fn) {//（函數(shù)名稱，函數(shù)本身）
   this.prototype[name]=fn;
   return this;//鏈?zhǔn)秸{(diào)用關(guān)鍵
};//這個(gè)函數(shù)的意思：為function對(duì)象增加函數(shù)，會(huì)用鏈?zhǔn)秸{(diào)用，鏈?zhǔn)秸{(diào)用有兩個(gè)參數(shù)name,和fn

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

自己畫一個(gè)圖簡(jiǎn)單理解一下上面的過(guò)程及思路：