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

自執(zhí)行函數(shù)是用一對圓括號將匿名函數(shù)包起來，加括號（傳參）會立即執(zhí)行。因為函數(shù)無名字，實現(xiàn)了作用域的絕對隔離和函數(shù)名的沖突問題。基本形式如下：

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

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

(function () {

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

  init();
})();

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

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

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

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

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

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

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

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

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

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

(function (jq) {

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

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

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

調(diào)用：

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

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

</script>

說明：

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

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

最新評論