JavaScript自執行函數和jQuery擴展的示例分析

這篇文章主要為大家展示了“JavaScript自執行函數和jQuery擴展的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“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：<script src="custome.js"></script>，自執行函數會立即執行，進而執行內部定義的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函數

以上是“JavaScript自執行函數和jQuery擴展的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！