首頁 > web前端 > js教程 > JS自執行函數與jQuery擴充使用方法

JS自執行函數與jQuery擴充使用方法

php中世界最好的语言
發布: 2018-04-16 14:09:37
原創
1502 人瀏覽過

這次帶給大家JS自執行函數jQuery擴充使用方法,JS自執行函數與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:,自執行函數會立即執行,進而執行內部定義的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函數          

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

在vue2中使用ref步奏詳解

vue-resource攔截器設定頭資訊的步奏詳解

實作ajax發送非同步請求方法

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板