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

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

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

   define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
       exports.verb = function() {
           return beta.verb();
           //Or:
           return require("beta").verb();
       }
   });
//  返回對(duì)象的匿名模塊
 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ī)范。
每個(gè)文件就是一個(gè)模塊，有自己的作用域。在一個(gè)文件里面定義的變量、函數(shù)、類，都是私有的，對(duì)其他文件不可見。
CommonJS 加載模塊是同步的，所以只有加載完成才能執(zhí)行后面的操作。像Node.js主要用于服務(wù)器的編程，加載的模塊文件一般都已經(jīng)存在本地硬盤，所以加載起來(lái)比較快，不用考慮異步加載的方式，所以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(){}; // 私有方法，因?yàn)樗鼪]被返回 (見下面)
    function b(){}; // 公共方法，因?yàn)楸环祷亓?    function c(){}; // 公共方法，因?yàn)楸环祷亓?    // 暴露公共方法
    return {
        b: b,
        c: c
    }
}));

ES6 在語(yǔ)言標(biāo)準(zhǔn)的層面上，實(shí)現(xiàn)了模塊功能，而且實(shí)現(xiàn)得相當(dāng)簡(jiǎn)單，旨在成為瀏覽器和服務(wù)器通用的模塊解決方案。其模塊功能主要由兩個(gè)命令構(gòu)成：export和import。
export命令用于規(guī)定模塊的對(duì)外接口，導(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 模塊輸出的是一個(gè)值的拷貝，ES6 模塊輸出的是值的引用。

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

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

CommonJS 模塊是運(yùn)行時(shí)加載，ES6 模塊是編譯時(shí)輸出接口。

運(yùn)行時(shí)加載: CommonJS 模塊就是對(duì)象；即在輸入時(shí)是先加載整個(gè)模塊，生成一個(gè)對(duì)象，然后再?gòu)倪@個(gè)對(duì)象上面讀取方法，這種加載稱為“運(yùn)行時(shí)加載”。

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

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