相信大家對(duì)這三種規(guī)范有一定的了解,今天在這里我就把這個(gè)梳理一下瓷马,加深印象拴还!
AMD規(guī)范:全稱(chēng)”Asynchronous Module Definition”,稱(chēng)為 異步模塊加載規(guī)范 欧聘。一般應(yīng)用在瀏覽器端片林。流行的瀏覽器端異步加載庫(kù)RequireJS實(shí)現(xiàn)的就是AMD規(guī)范。
CMD規(guī)范,全稱(chēng)”Common Module Definition”费封,稱(chēng)為 通用模塊加載規(guī)范焕妙。一般也是用在瀏覽器端。瀏覽器端異步加載庫(kù)Sea.js實(shí)現(xiàn)的就是CMD規(guī)范孝偎。
CommonJS: 稱(chēng)為同步模塊加載規(guī)范访敌,也就是說(shuō)凉敲,只有加載完成衣盾,才能執(zhí)行后面的操作。
AMD特點(diǎn): 依賴(lài)前置爷抓,提前執(zhí)行!
代碼塊
define(['jquery','underscore'], function($, _) {
//methods
function a(){}; //私有方法
function b(){}; //公有方法
return {
b: b
}
})
define是AMD 規(guī)范用來(lái)聲明模塊接口势决,示例中的第一個(gè)參數(shù)是一個(gè)數(shù)組,表示當(dāng)前模塊的依賴(lài)蓝撇。第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)果复,表示此模塊的執(zhí)行體。只有當(dāng)依賴(lài)數(shù)組中的所有依賴(lài)模塊都是可用的時(shí)渤昌,AMD模塊加載器(比如RequireJS)才會(huì)去執(zhí)行回調(diào)函數(shù)并返回此模塊的暴露接口虽抄。
注意,回調(diào)函數(shù)中參數(shù)的順序與依賴(lài)數(shù)組中的依賴(lài)順序一致独柑。(即:jquery->$迈窟,underscore->_)
當(dāng)然,在這里我可以將回調(diào)函數(shù)的參數(shù)名稱(chēng)改成任何我們想用的可用變量名忌栅,這并不會(huì)對(duì)模塊的聲明造成任何影響车酣。
除此之外,你不能在模塊聲明的外部使用$或者_(dá)索绪,因?yàn)樗麄冎辉谀K的回調(diào)函數(shù)體中才有定義湖员。
CMD特點(diǎn): 依賴(lài)就近,延遲執(zhí)行!
代碼塊
define(function(require, exports, module){
var a = require('./a');
a.doSomething();
var b = require('./b');
b.doSomething();
});
CMD與AMD區(qū)別
對(duì)于依賴(lài)的模塊瑞驱,AMD 是提前執(zhí)行娘摔,CMD 是延遲執(zhí)行。
CMD 推崇依賴(lài)就近唤反,AMD 推崇依賴(lài)前置凳寺。
·······
CommonJS規(guī)范
代碼塊
// filename: foo.js
// dependencies
var $ = require('jquery');
// methods
function myFunc() {};
// exposed public method (single)
module.exports = myFunc;
上邊是使用CommonJS規(guī)范聲明一個(gè)名為foo模塊的方式,同時(shí)依賴(lài)jquery模塊拴袭。
AMD規(guī)范與CommonJS規(guī)范的兼容性
CommonJS規(guī)范加載模塊是同步的读第,也就是說(shuō),只有加載完成拥刻,才能執(zhí)行后面的操作怜瞒。
AMD規(guī)范則是非同步加載模塊,允許指定回調(diào)函數(shù)。
Node.js遵循CommonJS規(guī)范吴汪。這是因?yàn)镹ode.js主要用于服務(wù)器編程惠窄,模塊文件一般都已經(jīng)存在于本地硬盤(pán),所以加載起來(lái)比較快漾橙,不用考慮非同步加載的方式杆融。但如果是瀏覽器環(huán)境,要從服務(wù)器端加載模塊霜运,這時(shí)就必須采用非同步模式脾歇,因此瀏覽器端一般采用AMD規(guī)范
有問(wèn)題或者意見(jiàn)建議,歡迎大家直接找我淘捡,謝謝藕各!
參考文獻(xiàn):http://blog.gejiawen.com/2014/07/18/small-talk-about-fe-spec/