摘要：服務(wù)端使用模塊規(guī)范。所有依賴這個(gè)模塊的語(yǔ)句，都定義在一個(gè)回調(diào)函數(shù)中，等到加載完成之后，這個(gè)回調(diào)函數(shù)才會(huì)運(yùn)行。注意是數(shù)組格式工廠方法，返回一個(gè)模塊函數(shù)如果一個(gè)模塊不依賴其他模塊，那么可以直接定義在函數(shù)之中。

Javascript社區(qū)做了很多努力，在現(xiàn)有的運(yùn)行環(huán)境中，實(shí)現(xiàn)"模塊"的效果。

把模塊寫成一個(gè)對(duì)象，所有的模塊成員都放到這個(gè)對(duì)象里面

var module1 = new Object({
  _count : 0,
　m1 : function (){
　　//...
　},
　m2 : function (){
　　//...
　}
});

上面的函數(shù)m1()和m2(），都封裝在module1對(duì)象里。使用的時(shí)候，就是調(diào)用這個(gè)對(duì)象的屬性

module1.m1();

這樣的寫法會(huì)暴露所有模塊成員，內(nèi)部狀態(tài)可以被外部改寫。比如，外部代碼可以直接改變內(nèi)部計(jì)數(shù)器的值。

module._count = 1;

使用"立即執(zhí)行函數(shù)"（Immediately-Invoked Function Expression，IIFE），可以達(dá)到不暴露私有成員的目的

var module = (function() {
    var _count = 0;
    var m1 = function() {
        alert(_count)
    }
    var m2 = function() {
        alert(_count + 1)
    }

    return {
        m1: m1,
        m2: m2
    }
})()

module就是Javascript模塊的基本寫法。

在es6以前，還沒(méi)有提出一套官方的規(guī)范,從社區(qū)和框架推廣程度而言,目前通行的javascript模塊規(guī)范有兩種：CommonJS 和 AMD

node編程中最重要的思想之一就是模塊，而正是這個(gè)思想，讓JavaScript的大規(guī)模工程成為可能。服務(wù)端使用CommonJS模塊規(guī)范。

在CommonJS中，有一個(gè)全局性方法require()，用于加載模塊。假定有一個(gè)數(shù)學(xué)模塊math.js，就可以像下面這樣加載。

　var math = require("math");
　math.add(2,3); // 5

正是由于CommonJS 使用的require方式的推動(dòng)，才有了后面的AMD、CMD 也采用的require方式來(lái)引用模塊的風(fēng)格

Common.js起源于node,因此在服務(wù)端廣泛使用.對(duì)服務(wù)端，所有的模塊都存放在本地硬盤，可以同步加載完成，等待時(shí)間就是硬盤的讀取時(shí)間。但是，對(duì)于瀏覽器，這卻是一個(gè)大問(wèn)題，因?yàn)槟K都放在服務(wù)器端，等待時(shí)間取決于網(wǎng)速的快慢，可能要等很長(zhǎng)時(shí)間，瀏覽器處于"假死"狀態(tài)。
因此，瀏覽器端的模塊，不能采用"同步加載"（synchronous），只能采用"異步加載"（asynchronous）。這就是AMD規(guī)范誕生的背景。

AMD是"Asynchronous Module Definition"的縮寫，意思就是"異步模塊定義"。它采用異步方式加載模塊，模塊的加載不影響它后面語(yǔ)句的運(yùn)行。所有依賴這個(gè)模塊的語(yǔ)句，都定義在一個(gè)回調(diào)函數(shù)中，等到加載完成之后，這個(gè)回調(diào)函數(shù)才會(huì)運(yùn)行。

模塊必須采用特定的define()函數(shù)來(lái)定義。

define(id?, dependencies?, factory)

id:字符串，模塊名稱(可選)

dependencies: 是我們要載入的依賴模塊(可選)，使用相對(duì)路徑。,注意是數(shù)組格式

factory: 工廠方法，返回一個(gè)模塊函數(shù)

如果一個(gè)模塊不依賴其他模塊，那么可以直接定義在define()函數(shù)之中。

// math.js
　　define(function (){
　　　　var add = function (x,y){
　　　　　　return x+y;
　　　　};
　　　　return {
　　　　　　add: add
　　　　};
　　});

如果這個(gè)模塊還依賴其他模塊，那么define()函數(shù)的第一個(gè)參數(shù)，必須是一個(gè)數(shù)組，指明該模塊的依賴性。

define(["Lib"], function(Lib){
　　　　function foo(){
　　　　　　Lib.doSomething();
　　　　}
　　　　return {
　　　　　　foo : foo
　　　　};
　　});

當(dāng)require()函數(shù)加載上面這個(gè)模塊的時(shí)候，就會(huì)先加載Lib.js文件。

AMD也采用require()語(yǔ)句加載模塊，但是不同于CommonJS，它要求兩個(gè)參數(shù)：

require([module], callback);

第一個(gè)參數(shù)[module]，是一個(gè)數(shù)組，里面的成員就是要加載的模塊；第二個(gè)參數(shù)callback，則是加載成功之后的回調(diào)函數(shù)。如果將前面的代碼改寫成AMD形式，就是下面這樣：

require(["math"], function (math) {
　math.add(2, 3);
});

math.add()與math模塊加載不是同步的，瀏覽器不會(huì)發(fā)生假死。所以很顯然，AMD比較適合瀏覽器環(huán)境。

目前，主要有兩個(gè)Javascript庫(kù)實(shí)現(xiàn)了AMD規(guī)范：require.js和curl.js。

CMD (Common Module Definition), 是seajs推崇的規(guī)范，CMD則是依賴就近，用的時(shí)候再require。它寫起來(lái)是這樣的：

define(function(require, exports, module) {
   var clock = require("clock");
   clock.start();
});

CMD與AMD一樣，也是采用特定的define()函數(shù)來(lái)定義,用require方式來(lái)引用模塊

define(id?, dependencies?, factory)

id:字符串，模塊名稱(可選)

dependencies: 是我們要載入的依賴模塊(可選)，使用相對(duì)路徑。,注意是數(shù)組格式

factory: 工廠方法，返回一個(gè)模塊函數(shù)

define("hello", ["jquery"], function(require, exports, module) {

  // 模塊代碼

});

如果一個(gè)模塊不依賴其他模塊，那么可以直接定義在define()函數(shù)之中。

define(function(require, exports, module) {
  // 模塊代碼
});

注意：帶 id 和 dependencies 參數(shù)的 define 用法不屬于 CMD 規(guī)范，而屬于 Modules/Transport 規(guī)范。

AMD和CMD最大的區(qū)別是對(duì)依賴模塊的執(zhí)行時(shí)機(jī)處理不同，而不是加載的時(shí)機(jī)或者方式不同，二者皆為異步加載模塊。

AMD依賴前置，js可以方便知道依賴模塊是誰(shuí)，立即加載；

而CMD依賴就近，需要使用把模塊變?yōu)樽址馕鲆槐椴胖酪蕾嚵四切┠K，這也是很多人詬病CMD的一點(diǎn)，犧牲性能來(lái)帶來(lái)開發(fā)的便利性，實(shí)際上解析模塊用的時(shí)間短到可以忽略。

ES6標(biāo)準(zhǔn)發(fā)布后，module成為標(biāo)準(zhǔn)，標(biāo)準(zhǔn)使用是以export指令導(dǎo)出接口，以import引入模塊，但是在我們一貫的node模塊中，我們依然采用的是CommonJS規(guī)范，使用require引入模塊，使用module.exports導(dǎo)出接口。

import語(yǔ)法聲明用于從已導(dǎo)出的模塊、腳本中導(dǎo)入函數(shù)、對(duì)象、指定文件（或模塊）的原始值。

import模塊導(dǎo)入與export模塊導(dǎo)出功能相對(duì)應(yīng)，也存在兩種模塊導(dǎo)入方式：命名式導(dǎo)入（名稱導(dǎo)入）和默認(rèn)導(dǎo)入（定義式導(dǎo)入）。

注意:import必須放在文件的最開始.import命令是編譯階段執(zhí)行的，在代碼運(yùn)行之前,表達(dá)式和變量只有在運(yùn)行時(shí)才能得到結(jié)果的語(yǔ)法結(jié)構(gòu)。import命令會(huì)被 JavaScript 引擎靜態(tài)分析，先于模塊內(nèi)的其他模塊執(zhí)行（叫做”連接“更合適）所以import中不能含有表達(dá)式或者變量,因此無(wú)法實(shí)現(xiàn)動(dòng)態(tài)加載.
因此，import和export命令只能在模塊的頂層，不能在代碼塊之中（比如，在if代碼塊之中，或在函數(shù)之中）。
這樣的設(shè)計(jì)，有利于編譯器提高效率，但也導(dǎo)致無(wú)法在運(yùn)行時(shí)加載模塊。在語(yǔ)法上，條件加載就不可能實(shí)現(xiàn)。如果import命令要取代 Node 的require方法，這就形成了一個(gè)障礙。因?yàn)閞equire是運(yùn)行時(shí)加載模塊，import命令無(wú)法取代require的動(dòng)態(tài)加載功能。

來(lái)自阮一峰ES6教程

CommonJS 模塊輸出的是一個(gè)值的拷貝，ES6 模塊輸出的是值的引用。
CommonJS 模塊是運(yùn)行時(shí)加載，ES6 模塊是編譯時(shí)輸出接口
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ì)緩存值，模塊里面的變量綁定其所在的模塊。