CommonJS

• 服務端模塊化規範
• 通過require方法同步加載依賴模塊
• 通過module.export導出模塊

// 導出
var num = 0;
function add(a,b) {
  return a + b;
}
module.export = {
  num: num,
  add: add
}

// 導入
var math = require('./math');
math.add(1,2); // 3

• 缺點：因同步加載模塊，受限於網絡條件，會阻塞代碼加載，在客户端上體驗較差

AMD（require.js）

• 異步加載模塊，不會瀏覽器加載
• 依賴相關模塊的語句，會在模塊加載完成後的回調函數裏運行
• 庫函數為require.js，通過define方法定義模塊

// 定義模塊
define('math',['jquery'],function(jquery) { // math依賴jquery模塊
  return {
    add: funtion(x,y) {
      return x + y;
    }
  }
})

// 導入模塊
require(['math'],function(math) {
  math.add(1,2);
})

CMD（sea.js）

• 集CommonJS與AMD所長（正如其名：海納百川）
• 使用define定義模塊
• 使用exports導出方法
• 使用require導入依賴
• 使用seajs.use使用模塊

// 定義模塊，導出屬性/方法
define(function(require,exports,module) {
  var add = function(a,b) {
    return a + b;
  }
  exports.add = add;
})
// 導入並使用模塊
seajs.use(['math.js'],function(math) {
  var sum = math.add(1,2)
})

AMD vs. CMD
AMD：依賴前置，提前執行（預執行） --- 定義模塊時就要require
CMD：依賴就近，延遲執行（懶執行） --- 使用模塊時才會require

ES6 Module

• 語言層面上的模塊化，通用的模塊化解決方案
• 使用import導入模塊
• 使用export導出模塊
• 默認導出為export default
• 導入default時，不需要使用大括號

// 導出 math.js
var num = 0;
var add = function(a,b) {
  return a + b;
}
export {num, add}

// 導入 math.js
import {num, add} from './math'
function sum(base) {
  return add(num,base)
}

// 默認導出
export default function add(a, b) {
  return a + b;
}

// 導入默認
import add from './math'
// 同時導入默認及非默認
import add, {sub, mul} from './math'

// 複合導出
export { foo, bar } from 'my_module';
// 等同於
import { foo, bar } from 'my_module';
export { foo, bar };

// 導入改名
import { myFoo as Foo } from 'my_module'
// 全部導入
import * as someIdentifier from "someModule";