摘要：提倡依賴前置，在定義模塊的時候就要聲明其依賴的模塊。適用場景按需加載條件加載動態的模塊路徑注關于模塊化，詳細見阮一峰的入門模塊與模塊化區別模塊化的規范和兩種。

模塊化開發方便代碼的管理，提高代碼復用性，降低代碼耦合，每個模塊都會有自己的作用域。當前流行的模塊化規范有CommonJS，AMD，CMD，ES6的import／export

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

AMD遵從RequireJs規范，推崇依賴前置（提前執行）【require / defined】

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

ES6 可靜態分析，提前編譯，不是在運行時確認【import / export】

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

用法：把不同的函數簡單地放在一起，看作一個模塊
缺點：

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

模塊成員之間看不出直接關系

用法：把功能代碼放入對象中，當作對象的屬性
優點：減少了全局上的變量數目，避免變量全局污染
缺點：本質是對象，而這個對象會暴露所有模塊成員，內部狀態可以被外部改寫

聲明一個匿名函數

馬上調用這個匿名函數

作用：創建一個獨立的作用域。數據是私有的, 外部只能通過暴露的方法操作
這個作用域里面的變量，外面訪問不到（即避免「變量污染」）

導入導出：require & exports/module.exports
主要實踐者：NodeJS

模塊導入
語法：require(module)

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

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

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

提倡依賴前置，在定義模塊的時候就要聲明其依賴的模塊。在requireJs推廣過程中產生的規范

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

模塊導入
require([module], callback)
module：是一個數組，里面的成員就是要加載的模塊
callback：則是加載成功之后的回調函數

requireJS 優點

實現js文件的異步加載，避免網頁失去響應；

管理模塊之間的依賴性，按照依賴關系加載，便于代碼的編寫和維護。

采用異步方式加載模塊，通過define來定義一個模塊，通過require來引入模塊，模塊的加載不影響后面語句的執行，所有依賴于這些模塊的語句都寫在一個回調函數中，加載完畢后，這個回調函數才運行

提倡就近依賴（按需加載），在用到某個模塊的時候再去require進來。在Sea.js推廣過程中產生的規范

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

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

模塊導入導出
與 AMD 類似

導入導出：import／export／export default

默認輸出是一個函數／變量
其他模塊加載該模塊時，import命令可以為該匿名函數指定任意名字
需要注意的是，這時import命令后面，不使用大括號

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

import foo from "export-fn.js"

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

export default 命令用于指定模塊的默認輸出。一個模塊只能有一個默認輸出，因此export default 命令只能使用一次。所以，import命令后面才不用加大括號，因為只可能唯一對應export default命令。
本質上，export default就是輸出一個叫做default的變量或方法，然后系統允許你為它取任意名字

使用export default時，對應的import語句不需要使用大括號，默認輸出
使用export時，對應的import語句需要使用大括號

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


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

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

CommonJS模塊

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

整體加載fs模塊（即加載fs的所有方法），生成一個對象（_fs），然后再從這個對象上面讀取 3 個方法。這種加載稱為“運行時加載”

ES6模塊

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

從fs模塊加載 3 個方法，其他方法不加載，這種加載稱為“編譯時加載”或者靜態加載

CommonJS模塊

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

動態加載，require到底加載哪一個模塊，只有運行時才知道

動態加載，正在提案階段，import()返回一個 Promise 對象
import()加載模塊成功以后，這個模塊會作為一個對象，當作then方法的參數
import()類似于 Node 的require方法，區別主要是前者是異步加載，后者是同步加載。

適用場景
（1）按需加載
（2）條件加載
（3）動態的模塊路徑

注：關于ES6模塊化，詳細見 阮一峰的es6入門 module模塊

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

而ES6 中提供了簡單的模塊系統，完全可以取代現有的CommonJS和AMD規范，成為瀏覽器和服務器通用的模塊解決方案。

ES6 模塊的設計思想，是盡量的靜態化，使得編譯時就能確定模塊的依賴關系，以及輸入和輸出的變量。CommonJS 和 AMD 模塊，都只能在運行時確定這些東西。

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

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