我們通常將JS代碼寫(xiě)在一個(gè)單獨(dú)的JS文件中，然后在頁(yè)面中引入該文件。但是，有時(shí)候引入后會(huì)碰到變量名或函數(shù)名與其它JS代碼沖突的問(wèn)題。那么如何解決這個(gè)問(wèn)題呢？作用域隔離。在JS中，作用域是通過(guò)函數(shù)來(lái)劃分的，將JS代碼封裝到函數(shù)中進(jìn)行調(diào)用可以避免變量名/函數(shù)名沖突的問(wèn)題，但是這也并不是萬(wàn)無(wú)一失，因?yàn)榉庋b函數(shù)本身有可能和其它函數(shù)重名，解決方案：自執(zhí)行函數(shù)。

自執(zhí)行函數(shù)是用一對(duì)圓括號(hào)將匿名函數(shù)包起來(lái)，加括號(hào)（傳參）會(huì)立即執(zhí)行。因?yàn)楹瘮?shù)無(wú)名字，實(shí)現(xiàn)了作用域的絕對(duì)隔離和函數(shù)名的沖突問(wèn)題?；拘问饺缦拢?/p>

(function () {
  console.log('do something');
})();

比如我們?cè)赾ustome.js文件中寫(xiě)了一些JS邏輯，并封裝到函數(shù)init中。我們用自執(zhí)行函數(shù)將自己定義的函數(shù)init包起來(lái)，就像下面這樣。

(function () {

  function init() {
    console.log('execute init...');
  }

  init();
})();

當(dāng)我們?cè)趆tml中引入custome.js：<script src="custome.js"></script>，自執(zhí)行函數(shù)會(huì)立即執(zhí)行，進(jìn)而執(zhí)行內(nèi)部定義的init函數(shù)：

不過(guò)，自執(zhí)行函數(shù)立即執(zhí)行的特性，使其很難調(diào)用。通過(guò)定義jQuery擴(kuò)展方法，可以解決這一問(wèn)題，拿到自執(zhí)行函數(shù)調(diào)用和執(zhí)行的主動(dòng)權(quán)。

首先我們看一下定義jQuery擴(kuò)展方法的基本形式：

jQuery.extend({
  'myMethod': function () {
    console.log('do something');
  }
});

這樣，通過(guò)$.myMethod()或jQuery.myMethod()就可以調(diào)用上面定義的方法。

定義jQuery擴(kuò)展方法還有另外一種方式：.fn

jQuery.fn.extend({
  'myMethod': function () {
    console.log('do something');;
  }
});

通過(guò)如上方式定義的擴(kuò)展方法，需要通過(guò)jQuery選擇器調(diào)用，比如通過(guò)標(biāo)簽選擇器$("button").myMethod(args)

了解了JS自執(zhí)行函數(shù)和jQuery擴(kuò)展方法后，我們將二者結(jié)合起來(lái)。

下面我們利用自執(zhí)行函數(shù)立即執(zhí)行的特點(diǎn)，來(lái)定義jQuery擴(kuò)展方法：

(function (jq) {

  function init() {
    console.log('do something');
  }

  jq.extend({
    'myMethod': function () {
      init();
    }
  })
})(jQuery);

說(shuō)明，這個(gè)自執(zhí)行函數(shù)接收jQuery對(duì)象作為參數(shù)，然后在內(nèi)部為jQuery定義一個(gè)擴(kuò)展方法myMethod，該方法執(zhí)行真正的邏輯代碼init函數(shù)

調(diào)用：

<script src="jquery-3.2.1.js"></script>
<script src="custome.js"></script>
<script>

 $(function () {
  $.myMethod();
 });

</script>

說(shuō)明：

jQuery文件引入后，jQuery對(duì)象全局可用；
緊接著引入自定義JS文件custome.js，其中的自執(zhí)行函數(shù)接收jQuery對(duì)象為參數(shù)，立即執(zhí)行，在內(nèi)部為jQuery定義一個(gè)擴(kuò)展方法myMethod
然后我們就可以在頁(yè)面加載完成后，通過(guò)調(diào)用$.meMethod()或jQuery.myMethod()來(lái)執(zhí)行init函數(shù)

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論