1：發展歷史

早期的Javascript是作為瀏覽器的腳本語言，使用<script>標籤直接引入，沒有所謂的模塊化。也就是説如果我們需要一個js文件，我們就加一個<script>標籤，把需要的js引入進來。這種方式的特點在於：簡單粗暴。

但是當項目越來越大，依賴越來越多時可能就會出現問題，比如邏輯越來越混亂，頁面也越複雜，然後可維護性就變差了，除此之外還存在全局變量暴露、文件的引入順序的問題。比如説一個文件引入另一個文件，另一個文件又依賴另一個文件，那麼這三個加載數據就會很重要，如果第一個沒有加載完，那麼接下來就會出錯。

實際上，在JavaScript的發展歷史上，第一個真正模塊化的是nodejs，nodejs就是使用了我們其中的一個模塊化標準的規範，它就是common js。

有了這個模塊化的概念後，便有了node，node的文件管理都是基於模塊化的；我們可以從另一個角度來看，如果JavaScript想要進軍服務端，在服務端沒有模塊化這是一個災難，因此common js社區制定了一個commonjs規範，也就是模塊化的規範；有了這個規範之後，node就出現了。

JavaScript引入模塊化解決了哪些問題：

• 避免了全局污染
• 模塊複用，提高了開發效率和協作
• 模塊功能單一職能方便維護
• 解決了文件依賴順序

模塊化的標準（有三個）：

• CommonJs
• AMD - 異步模塊
• CMD - 通用模塊

2：CommonJs(CommonJS社區貢獻)

定義了哪些規範：

• 定義了模塊標識規範，也就是説這個模塊這個文件怎麼命名

    var basic = 1;
    var increase = function(value){
        return value + basic;
    }
    module.exports.increase = increase;

• 定義了一個全局的require，require是引用模塊，我們可以傳入模塊標識符來引入其他模塊，解決了模塊之間的相互引用。引入其他模塊我們引入的是另外的模塊導出的內容，或者叫做暴露的API。定義require的同時，也定義了一個exports導出模塊。

    var myModule = require('./myModule.js');
    console.log(myModule.increase(1));

• 模塊嵌套，依次加載引用模塊
• 通過exports暴露API

Common.js解決了模塊依賴但是沒有解決順序。

3：AMD(Asynchronous Module Definition)

AMD又叫做異步加載模塊，它做的主要的事情是在加載模塊的時候允許傳入另外一個回調，在加載完之後，就會執行這個回調，只有在回調裏面，我們就能保證需要加載的文件已經加載完成了。

AMD使用define關鍵字定義模塊，define接收三個參數：id,dependencies,factory；第一個參數是id，或者是模塊的名字，第二個參數是模塊的依賴，這個依賴是一個數組['module1','module2']，第三個參數是工廠，也就是模塊的邏輯，我們的回調函數。

• 定義模塊

    define(['increase', 'reduce'], function(increase, reduce) {
        return function(value) {
            return increase(value) + reduce(value);
        }
    });

• 引入模塊

    require.config({
        baseUrl: "./js",
        paths: {
            "myModule": "myModule.js"
        }
    });
    require(['myModule'], (myModule) => console.log(myModule(1)));

AMD解決了瀏覽器端異步的依賴問題。

4：CMD(Common Module Definition)

CMD 是由一個阿里巴巴的前端工程師提出的一個概念，開源出的一個代碼叫sea.js。
AMD叫require.js，CMD叫sea.js。CMD解決了按需加載，它不像AMD一樣在引入第一次時就全部加載完成。
CMD有一個標準，一個文件只能有一個模塊。

定義模塊

define(function(require,exports,module) {
    var increase = require('increase');
    var reduce = require('./reduce');
    module.exports = function(value){
        return increase(value) + reduce(value);
    }
});

引入模塊

seajs.use('./myModule',function(myModule){
    console.log(myModule(1));
})