歡迎光臨
每天分享高質量文章

AMD、CMD、UMD 模塊的寫法

簡介

最近幾年,我們可以選擇的Javascript組件的生態系統一直在穩步增長。雖然陡增的選擇範圍是極好的,但當組件混合匹配使用時就會出現很尷尬的局面。開發新手們會很快發現不是所有組件都能彼此“和平相處”。

為瞭解決這個問題,兩種競爭關係的模塊規範AMD和CommonJS問世了,它們允許開發者遵照一種約定的沙箱化和模塊化的方式來寫代碼,這樣就能避免“污染生態系統”。

AMD

隨著RequireJS成為最流行的實現方式,異步模塊規範(AMD)在前端界已經被廣泛認同。

下麵是只依賴jquery的模塊foo的代碼:

// 檔案名: foo.js

define([‘jquery’], function ($) {

// 方法

function myFunc(){};

// 暴露公共方法

return myFunc;

});

還有稍微複雜點的例子,下麵的代碼依賴了多個組件並且暴露多個方法:

// 檔案名: foo.js

define([‘jquery’, ‘underscore’], function ($, _) {

// 方法

function a(){}; // 私有方法,因為沒有被傳回(見下麵)

function b(){}; // 公共方法,因為被傳回了

function c(){}; // 公共方法,因為被傳回了

// 暴露公共方法

return {

b: b,

c: c

}

});

定義的第一個部分是一個依賴陣列,第二個部分是回呼函式,只有當依賴的組件可用時(像RequireJS這樣的腳本加載器會負責這一部分,包括找到檔案路徑)回呼函式才被執行。

註意,依賴組件和變數的順序是一一對應的(例如,jquery->$, underscore->_)。

同時註意,我們可以用任意的變數名來表示依賴組件。假如我們把$改成$$,在函式體裡面的所有對jQuery的取用都由$變成了$$。

還要註意,最重要的是你不能在回呼函式外面取用變數$和_,因為它相對其它代碼是獨立的。這正是模塊化的目的所在!

CommonJS

如果你用Node寫過東西的話,你可能會熟悉CommonJS的風格(node使用的格式與之相差無幾)。因為有Browserify,它也一直被前端界廣泛認同。

就像前面的格式一樣,下麵是用CommonJS規範實現的foo模塊的寫法:

// 檔案名: foo.js

// 依賴

var $ = require(‘jquery’);

// 方法

function myFunc(){};

// 暴露公共方法(一個)

module.exports = myFunc;

還有更複雜的例子,下麵的代碼依賴了多個組件並且暴露多個方法:

// 檔案名: foo.js

var $ = require(‘jquery’);

var _ = require(‘underscore’);

// methods

function a(){}; // 私有方法,因為它沒在module.exports中 (見下麵)

function b(){}; // 公共方法,因為它在module.exports中定義了

function c(){}; // 公共方法,因為它在module.exports中定義了

// 暴露公共方法

module.exports = {

b: b,

c: c

};

UMD: 通用模塊規範

既然CommonJs和AMD風格一樣流行,似乎缺少一個統一的規範。所以人們產生了這樣的需求,希望有支持兩種風格的“通用”樣式,於是通用模塊規範(UMD)誕生了。

不得不承認,這個樣式略難看,但是它兼容了AMD和CommonJS,同時還支持老式的“全域性”變數規範:

(function (root, factory) {

if (typeof define === ‘function’ && define.amd) {

// AMD

define([‘jquery’], factory);

} else if (typeof exports === ‘object’) {

// Node, CommonJS之類的

module.exports = factory(require(‘jquery’));

} else {

// 瀏覽器全域性變數(root 即 window)

root.returnExports = factory(root.jQuery);

}

}(this, function ($) {

// 方法

function myFunc(){};

// 暴露公共方法

return myFunc;

}));

保持跟上面例子一樣的樣式,下麵是更複雜的例子,它依賴了多個組件並且暴露多個方法:

(function (root, factory) {

if (typeof define === ‘function’ && define.amd) {

// AMD

define([‘jquery’, ‘underscore’], factory);

} else if (typeof exports === ‘object’) {

// Node, CommonJS之類的

module.exports = factory(require(‘jquery’), require(‘underscore’));

} else {

// 瀏覽器全域性變數(root 即 window)

root.returnExports = factory(root.jQuery, root._);

}

}(this, function ($, _) {

// 方法

function a(){}; // 私有方法,因為它沒被傳回 (見下麵)

function b(){}; // 公共方法,因為被傳回了

function c(){}; // 公共方法,因為被傳回了

// 暴露公共方法

return {

b: b,

c: c

}

}));

原文出處:David Calhoun

譯文出處:奇舞團 – hxl

鏈接:http://www.75team.com/archives/882



赞(0)

分享創造快樂