我們通常將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擴展方法