摘要：提倡依賴前置，在定義模塊的時(shí)候就要聲明其依賴的模塊。適用場(chǎng)景按需加載條件加載動(dòng)態(tài)的模塊路徑注關(guān)于模塊化，詳細(xì)見(jiàn)阮一峰的入門模塊與模塊化區(qū)別模塊化的規(guī)范和兩種。

模塊化開(kāi)發(fā)方便代碼的管理，提高代碼復(fù)用性，降低代碼耦合，每個(gè)模塊都會(huì)有自己的作用域。當(dāng)前流行的模塊化規(guī)范有CommonJS，AMD，CMD，ES6的import／export

CommonJS的主要實(shí)踐者就是nodejs,一般對(duì)模塊輸出用module.exports去輸出，用require去引入模塊，CommonJS一般采用同步加載【require / module.exports / exports】

AMD遵從RequireJs規(guī)范，推崇依賴前置（提前執(zhí)行）【require / defined】

CMD遵從SeaJs規(guī)范，推崇依賴就近（延遲執(zhí)行）【require / defined】

ES6 可靜態(tài)分析，提前編譯，不是在運(yùn)行時(shí)確認(rèn)【import / export】

簡(jiǎn)單封裝 -> 命名空間／modules -> script loader／modules loader -> 同步加載CommonJS／AMD/CMD -> ES6 import export/export default -> 模塊打包工具browserify／webpack

用法：把不同的函數(shù)簡(jiǎn)單地放在一起，看作一個(gè)模塊
缺點(diǎn)：

"污染"了全局變量，無(wú)法保證不與其他模塊發(fā)生變量名沖突；

模塊成員之間看不出直接關(guān)系

用法：把功能代碼放入對(duì)象中，當(dāng)作對(duì)象的屬性
優(yōu)點(diǎn)：減少了全局上的變量數(shù)目，避免變量全局污染
缺點(diǎn)：本質(zhì)是對(duì)象，而這個(gè)對(duì)象會(huì)暴露所有模塊成員，內(nèi)部狀態(tài)可以被外部改寫

聲明一個(gè)匿名函數(shù)

馬上調(diào)用這個(gè)匿名函數(shù)

作用：創(chuàng)建一個(gè)獨(dú)立的作用域。數(shù)據(jù)是私有的, 外部只能通過(guò)暴露的方法操作
這個(gè)作用域里面的變量，外面訪問(wèn)不到（即避免「變量污染」）

導(dǎo)入導(dǎo)出：require & exports/module.exports
主要實(shí)踐者：NodeJS

模塊導(dǎo)入
語(yǔ)法：require(module)

eg:
var math = require("math");
math.add(2, 3);

如果模塊輸出的是一個(gè)函數(shù)，那就不能定義在exports對(duì)象上面，而要定義在module.exports變量上面。

// example2.js
module.exports = function () {
    console.log("hello world")
}
        
// main.js 
require("./example2.js")()

提倡依賴前置，在定義模塊的時(shí)候就要聲明其依賴的模塊。在requireJs推廣過(guò)程中產(chǎn)生的規(guī)范

模塊定義
define(id?, dependencies?, factory)
id：字符串，模塊名稱(可選)
dependencies：數(shù)組，是我們要載入的依賴模塊(可選)，使用相對(duì)路徑
factory：工廠方法，返回一個(gè)模塊函數(shù)

模塊導(dǎo)入
require([module], callback)
module：是一個(gè)數(shù)組，里面的成員就是要加載的模塊
callback：則是加載成功之后的回調(diào)函數(shù)

requireJS 優(yōu)點(diǎn)

實(shí)現(xiàn)js文件的異步加載，避免網(wǎng)頁(yè)失去響應(yīng)；

管理模塊之間的依賴性，按照依賴關(guān)系加載，便于代碼的編寫和維護(hù)。

采用異步方式加載模塊，通過(guò)define來(lái)定義一個(gè)模塊，通過(guò)require來(lái)引入模塊，模塊的加載不影響后面語(yǔ)句的執(zhí)行，所有依賴于這些模塊的語(yǔ)句都寫在一個(gè)回調(diào)函數(shù)中，加載完畢后，這個(gè)回調(diào)函數(shù)才運(yùn)行

提倡就近依賴（按需加載），在用到某個(gè)模塊的時(shí)候再去require進(jìn)來(lái)。在Sea.js推廣過(guò)程中產(chǎn)生的規(guī)范

模塊定義
define(id?, dependencies?, factory) 與AMD類似

// eg
define("hello", ["jquery"], function(require, exports, module) {
   // 模塊代碼
   // return 模塊對(duì)象
});

模塊導(dǎo)入導(dǎo)出
與 AMD 類似

導(dǎo)入導(dǎo)出：import／export／export default

默認(rèn)輸出是一個(gè)函數(shù)／變量
其他模塊加載該模塊時(shí)，import命令可以為該匿名函數(shù)指定任意名字
需要注意的是，這時(shí)import命令后面，不使用大括號(hào)

// export-fn.js 
export default function () {
    console.log("foo");
}

import foo from "export-fn.js"

export default命令也可以用在非匿名函數(shù)前，視同匿名函數(shù)加載

export default 命令用于指定模塊的默認(rèn)輸出。一個(gè)模塊只能有一個(gè)默認(rèn)輸出，因此export default 命令只能使用一次。所以，import命令后面才不用加大括號(hào)，因?yàn)橹豢赡芪ㄒ粚?duì)應(yīng)export default命令。
本質(zhì)上，export default就是輸出一個(gè)叫做default的變量或方法，然后系統(tǒng)允許你為它取任意名字

使用export default時(shí)，對(duì)應(yīng)的import語(yǔ)句不需要使用大括號(hào)，默認(rèn)輸出
使用export時(shí)，對(duì)應(yīng)的import語(yǔ)句需要使用大括號(hào)

// 第一組 export default
export default function crc32() { // 輸出
    // ...
}
import crc32 from "crc32"; // 輸入


// 第二組 export 
export function crc32() { // 輸出
    // ...
};
import {crc32} from "crc32"; // 輸入

ES6模塊使得編譯時(shí)就能確定模塊的依賴關(guān)系，以及輸入和輸出的變量。
CommonJS 和 AMD 模塊，都只能在運(yùn)行時(shí)確定這些東西；
CommonJS 模塊就是對(duì)象，輸入時(shí)必須查找對(duì)象屬性

CommonJS模塊

 let { stat, exists, readFile } = require("fs")

整體加載fs模塊（即加載fs的所有方法），生成一個(gè)對(duì)象（_fs），然后再?gòu)倪@個(gè)對(duì)象上面讀取 3 個(gè)方法。這種加載稱為“運(yùn)行時(shí)加載”

ES6模塊

import { stat, exists, readFile } from "fs"

從fs模塊加載 3 個(gè)方法，其他方法不加載，這種加載稱為“編譯時(shí)加載”或者靜態(tài)加載

CommonJS模塊

const path = "./" + fileName
const myModual = require(path)

動(dòng)態(tài)加載，require到底加載哪一個(gè)模塊，只有運(yùn)行時(shí)才知道

動(dòng)態(tài)加載，正在提案階段，import()返回一個(gè) Promise 對(duì)象
import()加載模塊成功以后，這個(gè)模塊會(huì)作為一個(gè)對(duì)象，當(dāng)作then方法的參數(shù)
import()類似于 Node 的require方法，區(qū)別主要是前者是異步加載，后者是同步加載。

適用場(chǎng)景
（1）按需加載
（2）條件加載
（3）動(dòng)態(tài)的模塊路徑

注：關(guān)于ES6模塊化，詳細(xì)見(jiàn) 阮一峰的es6入門 module模塊

模塊化的規(guī)范：CommonJS和AMD兩種。前者用于服務(wù)器，后者用于瀏覽器。

而ES6 中提供了簡(jiǎn)單的模塊系統(tǒng)，完全可以取代現(xiàn)有的CommonJS和AMD規(guī)范，成為瀏覽器和服務(wù)器通用的模塊解決方案。

ES6 模塊的設(shè)計(jì)思想，是盡量的靜態(tài)化，使得編譯時(shí)就能確定模塊的依賴關(guān)系，以及輸入和輸出的變量。CommonJS 和 AMD 模塊，都只能在運(yùn)行時(shí)確定這些東西。

require/exports是CommonJS的一部分；import/export是ES6的新規(guī)范
require支持 動(dòng)態(tài)導(dǎo)入，import不支持，正在提案 (babel 下可支持)
require是 同步 導(dǎo)入，import屬于 異步 導(dǎo)入
require是 值拷貝，導(dǎo)出值變化不會(huì)影響導(dǎo)入值；import是值引用，指向 內(nèi)存地址，導(dǎo)入值會(huì)隨導(dǎo)出值而變化

參考：
前端工程師必備：前端的模塊化
阮一峰的es6入門 module模塊