JavaScript自執行函數和jquery擴充方法

標籤：參數   javascrip   style   函數   ext   rip   button   一個   載入完成   

　　我們通常將JS代碼寫在一個單獨的JS檔案中，然後在頁面中引入該檔案。但是，有時候引入後會碰到變數名或函數名與其它JS代碼通途的問題。那麼如何解決這個問題呢？範圍隔離。在JS中，範圍是通過函數來劃分的，將JS代碼封裝到函數中進行調用可以筆記面變數名/函數名衝突的問題，但是這也並不是萬無一失，因為封裝函數本身有可能和其他函數重名，解決方案：自執行函數。

　　自執行函數是用一堆圓括弧將匿名函數包起來，加括弧（傳參）會立即執行。因為函數無名字，實現了範圍的絕對隔離和函數名的衝突問題。基本形式如下：

(function () {    console.log(111);})();

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

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

　　當我們在html中引入nb-list.js，自執行函數會立即執行，進而執行內部定義的init函數。

　　但是由於自執行函數的特性，使其很難調用，所以我們需要jQuery擴充來給外部一個介面來調用這個自執行函數，把主動權掌握在自己手中。

　　jQuery擴充方法的基本形式：

jQuery.extend({    ‘myMethod‘: function () {        console.log(111);    }});

　　這樣，通過$.myMethod（）或者jQuery.myMethod（）就可以調用上面定義的方法。

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

jQuery.fn.extend({    ‘myMethod‘: function () {        console.log(111);    }});

　　通過.fn定義的擴充方法，需要通過jQuery選取器調用，比如通過標籤選取器$("button").myMethod(args)

　　下面我們把二者結合起來來調用自執行函數。

(function (jq) {    function init() {        console.log(111);    }    jq.extend({        ‘myMethod‘: function () {            init();        }    })})(jQuery);

　　說明，這個自執行函數接收jQuery對象作為參數，然後在內部為jQuery定義一個擴充方法myMethod，該方法執行真正的邏輯代碼init函數

　　使用：

<script src="jquery-3.2.1.js"></script><script src="nb-list.js"></script><script>  $(function () {      $.myMethod();  });</script>

　　說明：

　　1.jQuery檔案引入後，jQuery對象全域可用。

　　2.之後引入自訂的nb-list.js檔案，其中的自執行函數接收jQuery對象為參數，立即執行，在內部為jQuery定以一個擴充方法myMethod

　　3.最後我們就可以在頁面載入完成之後調用myMethod函數來執行內部的自執行函數。

 

JavaScript自執行函數和jquery擴充方法