摘要：最后衍生出面向各種使用場景的模塊標(biāo)準(zhǔn)。定義模塊返回對象的匿名模塊調(diào)用模塊應(yīng)用由模塊組成，采用模塊規(guī)范。其模塊功能主要由兩個命令構(gòu)成和。命令用于規(guī)定模塊的對外接口，導(dǎo)出模塊暴露的命令用于輸入其他模塊提供的功能引入其他模塊。

JS誕生之初面向簡單頁面開發(fā)， 沒有模塊的概念。后來頁面逐漸復(fù)雜， 人類構(gòu)造到 IIFE 立即執(zhí)行函數(shù)來模擬 模塊；之前也有雅虎的實踐，使用命名空間 作為模塊名。最后衍生出 面向各種使用場景 的 JS 模塊標(biāo)準(zhǔn)。例如：
面向瀏覽器的 AMD
面向Nodejs的 CommonJS
對于這種分裂狀態(tài)ES標(biāo)準(zhǔn)也在盡力彌合。 但是目前流行的實踐是 UMD模式。

AMD 是requirejs 推廣產(chǎn)出的規(guī)范，主要用于瀏覽器環(huán)境，通過define和require這兩個定義模塊、調(diào)用模塊。

   define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
       exports.verb = function() {
           return beta.verb();
           //Or:
           return require("beta").verb();
       }
   });
//  返回對象的匿名模塊
 define(["alpha"], function (alpha) {
       return {
         verb: function(){
           return alpha.verb() + 2;
         }
       };
   });

require(["foo", "bar"], function ( foo, bar ) {
        foo.doSomething();
});

define(function (require) {
        require(["a", "b"], function (a, b) {
            //modules a and b are now available for use.
        });
    }); 

Node 應(yīng)用由模塊組成，采用 CommonJS 模塊規(guī)范。
每個文件就是一個模塊，有自己的作用域。在一個文件里面定義的變量、函數(shù)、類，都是私有的，對其他文件不可見。
CommonJS 加載模塊是同步的，所以只有加載完成才能執(zhí)行后面的操作。像Node.js主要用于服務(wù)器的編程，加載的模塊文件一般都已經(jīng)存在本地硬盤，所以加載起來比較快，不用考慮異步加載的方式，所以CommonJS規(guī)范比較適用。但如果是瀏覽器環(huán)境，要從服務(wù)器加載模塊，這是就必須采用異步模式。所以就有了 AMD CMD 解決方案。

// a.js
// 相當(dāng)于這里還有一行：var exports = module.exports;代碼
exports.a = "Hello world"; // 相當(dāng)于：module.exports.a = "Hello world";

// b.js
var moduleA = require("./a.js");
console.log(moduleA.a); // 打印出hello world

兼容 AMD 和 commonjs,也兼容 全局變量定義的 通用的模塊化規(guī)范

(function (root, factory) {
    if (typeof define === "function" && define.amd) {
        // AMD
        define(["jquery"], factory);
    } else if (typeof exports === "object") {
        // Node, CommonJS-like
        module.exports = factory(require("jquery"));
    } else {
        // Browser globals (root is window)
        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) {
     function a(){}; // 私有方法，因為它沒被返回 (見下面)
    function b(){}; // 公共方法，因為被返回了
    function c(){}; // 公共方法，因為被返回了
    // 暴露公共方法
    return {
        b: b,
        c: c
    }
}));

ES6 在語言標(biāo)準(zhǔn)的層面上，實現(xiàn)了模塊功能，而且實現(xiàn)得相當(dāng)簡單，旨在成為瀏覽器和服務(wù)器通用的模塊解決方案。其模塊功能主要由兩個命令構(gòu)成：export和import。
export命令用于規(guī)定模塊的對外接口，導(dǎo)出模塊暴露的api ;import命令用于輸入其他模塊提供的功能,引入其他模塊。

/** 定義模塊 math.js **/
var basicNum = 0;
var add = function (a, b) {
    return a + b;
};
export { basicNum, add };

/** 引用模塊 **/
import { basicNum, add } from "./math";
function test(ele) {
    ele.textContent = add(99 + basicNum);
}

CommonJS 模塊輸出的是一個值的拷貝，ES6 模塊輸出的是值的引用。

CommonJS 模塊輸出的是值的拷貝，也就是說，一旦輸出一個值，模塊內(nèi)部的變化就影響不到這個值。

ES6 模塊的運行機制與 CommonJS 不一樣。JS 引擎對腳本靜態(tài)分析的時候，遇到模塊加載命令import，就會生成一個只讀引用。等到腳本真正執(zhí)行時，再根據(jù)這個只讀引用，到被加載的那個模塊里面去取值。換句話說，ES6 的import有點像 Unix 系統(tǒng)的“符號連接”，原始值變了，import加載的值也會跟著變。因此，ES6 模塊是動態(tài)引用，并且不會緩存值，模塊里面的變量綁定其所在的模塊。

CommonJS 模塊是運行時加載，ES6 模塊是編譯時輸出接口。

運行時加載: CommonJS 模塊就是對象；即在輸入時是先加載整個模塊，生成一個對象，然后再從這個對象上面讀取方法，這種加載稱為“運行時加載”。

編譯時加載: ES6 模塊不是對象，而是通過 export 命令顯式指定輸出的代碼，import時采用靜態(tài)命令的形式。即在import時可以指定加載某個輸出值，而不是加載整個模塊，這種加載稱為“編譯時加載”。

CommonJS 加載的是一個對象（即module.exports屬性），該對象只有在腳本運行完才會生成。而 ES6 模塊不是對象，它的對外接口只是一種靜態(tài)定義，在代碼靜態(tài)解析階段就會生成。