AMD,CMD.CommonJs和UMD還有es6的模塊化對比
CommonJS
CommonJS是服務器端模塊的規範，Node.js采用了這個規範。
根據CommonJS規範，一個單獨的文件就是一個模塊。加載模塊使用require方法，該方法讀取一個文件並執行，最後返回文件內部的exports對象。
例如：
// foobar.js
//私有變量
var test = 123;
//公有方法
function foobar () {
this.foo = function () {
// do someing ...
}
this.bar = function () {
//do someing ...
}
}
//exports對象上的方法和變量是公有的
var foobar = new foobar();
exports.foobar = foobar;
AMD CMD
AMD規範的實現代表是require.js
amd是異步加載規範
CMD規範的實現代表是sea.js
-
對於依賴的模塊AMD是提前執行，CMD是延遲執行。不過RequireJS從2.0開始，也改成可以延遲執行（根據寫法不同，處理方式不通過）。
-
CMD推崇依賴就近，AMD推崇依賴前置。
//AMD
define([‘./a‘,‘./b‘], function (a, b) {
//依賴一開始就寫好
a.test();
b.test();
});
//CMD
define(function (requie, exports, module) {
//依賴可以就近書寫
var a = require(‘./a‘);
a.test();
...
//軟依賴
if (status) {
var b = requie(‘./b‘);
b.test();
}
});
雖然 AMD也支持CMD寫法，但依賴前置是官方文檔的默認模塊定義寫法。
-
AMD的API默認是一個當多個用，CMD嚴格的區分推崇職責單一。例如：AMD裏require分全局的和局部的。CMD裏面沒有全局的 require，提供 seajs.use()來實現模塊系統的加載啟動。CMD裏每個API都簡單純粹。
簡單來說,就是sea.js屬於懶加載,require.js屬於預加載.
在這裏,順便擴展一下預加載和懶加載的優缺點
預加載:當第一次訪問時將所有的文件加載出來
優點:第一次訪問完成以後, 再次訪問的速度會很快
缺點:第一次加載頁面要等待很久.
懶加載:使用的時候才會加載對應的文件.
優點:第一次訪問速度相對快點
缺點:再訪問其他新的模塊時速度會變慢.
UMD
UMD是AMD和CommonJS的糅合
AMD模塊以瀏覽器第一的原則發展，異步加載模塊。
CommonJS模塊以服務器第一原則發展，選擇同步加載，它的模塊無需包裝(unwrapped modules)。
這迫使人們又想出另一個更通用的模式UMD （Universal Module Definition）。希望解決跨平臺的解決方案。
UMD先判斷是否支持Node.js的模塊（exports）是否存在，存在則使用Node.js模塊模式。
在判斷是否支持AMD（define是否存在），存在則使用AMD方式加載模塊。
(function (window, factory) {
if (typeof exports === ‘object‘) {
module.exports = factory();
} else if (typeof define === ‘function‘ && define.amd) {
define(factory);
} else {
window.eventUtil = factory();
}
})(this, function () {
//module ...
}); AMD,CMD.CommonJs和UMD還有es6的模塊化對比