一、UMD：AMD 和CommonJS的糅合
前面花了很長的篇幅介紹了兩大類模塊規范，CommonJS(Modules/Modules/Wrappings)及AMD。
我們知道Modules/Wrappings是出於對Node.js模塊格式的偏好而包裝下使其在瀏覽器中得以實現。
而Modules/Wrappings的格式通過某些工具（如r.js）也能運行在Node.js中。事實上，這兩種格式同時有效且都被廣泛使用。
AMD以瀏覽器為第一（browser-first）的原則發展，選擇異步加載模塊。它的模塊支持對象（objects）、函數（functions）、構造器（constructors）、字符串（strings）、JSON等各種類型的模塊。因此在瀏覽器中它非常靈活。
CommonJS module以服務器端為第一（server-first）的原則發展，選擇同步加載模塊。它的模塊是無需包裝的（unwrapped modules）且貼近於ES.next/Harmony的模塊格式。但它僅支持對象類型（objects）模塊。
這迫使一些人又想出另一個更通用格式 UMD(Universal Module Definition)。希望提供一個前后端跨平台的解決方案。
UMD的實現很簡單，先判斷是否支持Node.js模塊格式（exports是否存在），存在則使用Node.js模塊格式。
再判斷是否支持AMD（define是否存在），存在則使用AMD方式加載模塊。前兩個都不存在，則將模塊公開到全局（window或global）。
下面是一個示例
eventUtil.js
(function (root, factory) {
if (typeof exports === 'object') {
module.exports = factory();
} else if (typeof define === 'function' && define.amd) {
define(factory);
} else {
root.eventUtil = factory();
}
})(this, function() {
// module
return {
addEvent: function(el, type, handle) {
//...
},
removeEvent: function(el, type, handle) {
},
};
});
雖然UMD八字還沒有一撇，有些開源庫卻開始支持UMD了，如大名鼎鼎的《JavaScript設計模式》作者Dustin Diaz開發的qwery。 代碼如下
二、ECMAScript：未來的JS模塊化
ECMAScript的下一個版本Harmony已經考慮到了模塊化的需求。
使用module關鍵字來定義一個模塊
module math {
export function sum(x, y) {
return x + y;
}
export var pi = 3.141593;
}
使用import關鍵字來加載外部模塊
// we can import in script code, not just inside a module
import {sum, pi} from math;
alert("2π = " + sum(pi, pi));
引入所有API
// import everything
import * from math;
alert("2π = " + sum(pi, pi));
使用另一個引用作為別名
// a static module reference
module M = math;
// reify M as an immutable "module instance object"
alert("2π = " + M.sum(M.pi, M.pi));
局部重命名
import { draw: drawShape } from shape;
import { draw: drawGun } from cowboy;
嵌套模塊
module widgets {
export module button { ... }
export module alert { ... }
export module textarea { ... }
...
}
import { messageBox, confirmDialog } from widgets.alert;
...
從服務器上請求的模塊
<script type=”harmony”>
// loading from a URL
module JSON at 'http://json.org/modules/json2.js';
alert(JSON.stringify({'hi': 'world'}));
動態載入一個模塊
Loader.load('http://json.org/modules/json2.js', function(JSON) {
alert(JSON.stringify([0, {a: true}]));
});
ES modules還需要很長時間來規范化，可謂任重而道遠。且它有個問題，即新的語法關鍵字不能向下兼容（如低版本IE瀏覽器）。
相關：