本文主要為大家詳細介紹了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函數。
相關推薦:
#javascript自執行函數之偽命名空間封裝法_javascript技巧
js自執行函數的幾個不同寫法的比較_javascript技巧
#以上是詳解JavaScript自執行函數和jQuery擴充方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!