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 ... });