首頁 > 文章 > web前端 > 詳解JavaScript自執行函數和jQuery擴充方法

詳解JavaScript自執行函數和jQuery擴充方法

小云云原創: 2018-01-20 13:33:511568瀏覽

本文主要為大家詳細介紹了JavaScript自執行函數和jQuery擴充方法，具有一定的參考價值，有興趣的小夥伴們可以參考一下，希望能幫助到大家。

我們通常將JS程式碼寫在一個單獨的JS檔案中，然後在頁面中引入該檔案。但是，有時候引入後會碰到變數名稱或函數名稱與其它JS程式碼衝突的問題。那麼如何解決這個問題呢？作用域隔離。在JS中，作用域是透過函數來劃分的，將JS程式碼封裝到函數中進行呼叫可以避免變數名稱/函數名稱衝突的問題，但這也並不是萬無一失，因為封裝函數本身有可能和其它函數重名，解決方案：自執行函數。

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

(function () {
  console.log(&#39;do something&#39;);
})();

例如我們在custome.js檔案中寫了一些JS邏輯，並封裝到函數init中。我們用自執行函數將自己定義的函數init包起來，就像下面這樣。

(function () {

  function init() {
    console.log(&#39;execute init...&#39;);
  }

  init();
})();

當我們在html中引入custome.js：3019c6ef3f8bcf961bbf6376030eb6612cacc6d41bbb37262a98f745aa00fbf0，自執行函數會立即執行，進而執行內部定義的init函數：

不過，自執行函數立即執行的特性，使其很難呼叫。透過定義jQuery擴充方法，可以解決這個問題，拿到自執行函數呼叫和執行的主動權。

首先我們先來看看定義jQuery擴充方法的基本形式：

jQuery.extend({
  &#39;myMethod&#39;: function () {
    console.log(&#39;do something&#39;);
  }
});

這樣，透過$.myMethod()或jQuery.myMethod()就可以呼叫上面定義的方法。

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

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

透過如上定義的擴充方法，需要透過jQuery選擇器調用，例如透過標籤選擇器$("button").myMethod(args)

了解了JS自執行函數和jQuery擴充方法後，我們將二者結合。

下面我們利用自執行函數立即執行的特點，定義jQuery擴充方法：

(function (jq) {

  function init() {
    console.log(&#39;do something&#39;);
  }

  jq.extend({
    &#39;myMethod&#39;: function () {
      init();
    }
  })
})(jQuery);

說明，這個自執行函數接收jQuery物件作為參數，然後在內部為jQuery定義一個擴展方法myMethod，該方法執行真正的邏輯代碼init函數

#呼叫：

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

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

</script>

說明：

jQuery檔案引入後，jQuery物件全域可用；
緊接著引入自訂JS檔案custome.js，其中的自執行函數接收jQuery物件為參數，立即執行，在內部為jQuery定義一個擴充方法myMethod
然後我們就可以在頁面載入完成後，透過呼叫$.meMethod()或jQuery.myMethod()來執行init函數。

詳解JavaScript自執行函數和jQuery擴充方法

相關文章