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

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

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

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

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

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


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

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


(function () {

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

  init();
})();

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

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

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


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

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

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


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

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

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

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


#
(function (jq) {

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

  jq.extend({
    'myMethod': 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函數。

相關推薦:

js函數中的自執行函數

#javascript自執行函數之偽命名空間封裝法_javascript技巧

js自執行函數的幾個不同寫法的比較_javascript技巧

#

以上是詳解JavaScript自執行函數和jQuery擴充方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn