js中的模塊

函數封裝

我們在講函數的時候提到，函數一個功能就是實現特定邏輯的一組語句打包，而且JavaScript的作用域就是基於函數的，所以把函數作爲模塊化的第一步是很自然的事情，在一個文件裏面編寫幾個相關函數就是最開始的模塊了

這樣在需要的以後夾在函數所在文件，調用函數就可以了

這種做法的缺點很明顯：污染了全局變量，無法保證不與其他模塊發生變量名衝突，而且模塊成員之間沒什麼關係。

function fn1(){
    statement
}

function fn2(){
    statement
}

對象

爲了解決上面問題，對象的寫法應運而生，可以把所有的模塊成員封裝在一個對象中

var myModule = {
    var1: 1,
    var2: 2, 
    fn1: function(){

    },

    fn2: function(){

    }

}

這樣我們在希望調用模塊的時候引用對應文件，然後

myModule.fn2();

這樣避免了變量污染，只要保證模塊名唯一即可，同時同一模塊內的成員也有了關係

看似不錯的解決方案，但是也有缺陷，外部可以隨意修改內部成員

myModel.var1 = 100;

這樣就會產生意外的安全問題

立即執行函數

可以通過立即執行函數，來達到隱藏細節的目的

var myModule = (function(){
    var var1 = 1;
    var var2 = 2;

    function fn1(){

    }

    function fn2(){

    }

    return {

        fn1: fn1,

        fn2: fn2

    };

})();

這樣在模塊外部無法修改我們沒有暴露出來的變量、函數

上述做法就是我們模塊化的基礎，目前，通行的JavaScript模塊規範主要有兩種：CommonJS和AMD