這次帶給大家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中文網其它相關文章!
推薦閱讀:
以上是JS自執行函數與jQuery擴充使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!