1.為什么要使用模塊化旦事?
在模塊化還未規(guī)范化之前效拭,有三種模仿模塊化的方法攻泼,分別是函數(shù)聲明,對(duì)象返回馆匿,和立即執(zhí)行函數(shù)封裝,之后才有模塊化的規(guī)范燥滑,在ES6中渐北,也對(duì)“類”和“模塊”有定義,不過要主流瀏覽器都支持時(shí)才能廣泛使用突倍。之所以使用模塊化是因?yàn)椋?br>
解決命名沖突腔稀;
方便依賴性管理;
提高代碼的維護(hù)性和可讀性羽历;
每個(gè)模塊都是單獨(dú)文件焊虏,解耦提高代碼復(fù)用性;
2.CMD秕磷、AMD诵闭、CommonJS 規(guī)范分別指什么?有哪些應(yīng)用
- CommonJS規(guī)范加載模塊是同步的,也就是說疏尿,只有加載完成瘟芝,才能執(zhí)行后面的操作。AMD規(guī)范則是非同步加載模塊褥琐,允許指定回調(diào)函數(shù)锌俱。由于Node.js主要用于服務(wù)器編程,模塊文件一般都已經(jīng)存在于本地硬盤敌呈,所以加載起來比較快贸宏,不用考慮非同步加載的方式,所以CommonJS規(guī)范比較適用磕洪。但是吭练,如果是瀏覽器環(huán)境(客戶端),要從服務(wù)器端加載模塊析显,這時(shí)就必須采用非同步模式鲫咽,因此瀏覽器端一般采用AMD規(guī)范。
- AMD和CMD最大的區(qū)別是對(duì)依賴模塊的執(zhí)行時(shí)機(jī)處理不同,AMD依賴前置谷异,js可以方便知道依賴模塊是誰分尸,立即加載;而CMD就近依賴晰绎。需要時(shí)就寫出依賴寓落。
- CMD(Common Module Definition)
語法:
define(id?, deps?, factory)
依賴就近原則,用的時(shí)候require荞下。所以一般不在define中寫依賴伶选,在factory函數(shù)中寫。
factory(require,exports,module){
}
// require:模板入口
//exports:對(duì)象尖昏,向外提供模板出口
缺點(diǎn):CMD加載完某個(gè)依賴模塊后并不執(zhí)行,遇到require時(shí)執(zhí)行對(duì)應(yīng)模塊仰税,有延遲速度不如AMD快。
優(yōu)點(diǎn):執(zhí)行順序和書寫順序抽诉,按需加載對(duì)應(yīng)模塊陨簇。
- AMD(Asynchronous Module Definition)
它是一個(gè)在瀏覽器端模塊化開發(fā)的規(guī)范,由于不是JavaScript原生支持迹淌,使用AMD規(guī)范進(jìn)行頁(yè)面開發(fā)需要用到對(duì)應(yīng)的庫(kù)函數(shù)(RequireJS)河绽,實(shí)際上AMD 是 RequireJS 在推廣過程中對(duì)模塊定義的規(guī)范化的產(chǎn)出。
define是require.JS定義的全局變量唉窃,它是一個(gè)函數(shù)耙饰。語法:
define(id?, dependencies?, factory);
//id可選參數(shù),用來定義模塊的標(biāo)識(shí)纹份,如果沒有提供該參數(shù)苟跪,為腳本文件名
//dependencies是一個(gè)當(dāng)前模塊依賴的模塊名稱數(shù)組
//factory模塊初始化要執(zhí)行的函數(shù)或?qū)ο笸⒍弧H魹榛卣{(diào)函數(shù),則執(zhí)行一次件已,若為對(duì)象笋额,則該對(duì)象為輸出值。
優(yōu)點(diǎn):AMD中require()采用異步加載篷扩,這樣瀏覽器不會(huì)失去響應(yīng)兄猩,它指定的回調(diào)函數(shù),只有前面的模塊都加載成功后鉴未,才會(huì)運(yùn)行厦滤,解決了依賴性的問題。
缺點(diǎn):依賴提前聲明有時(shí)候并不是很好歼狼,而且都無法與同步模塊規(guī)范保持一致,會(huì)出現(xiàn)執(zhí)行順序和書寫順序不一致的情況享怀。
模塊依賴聲明方式:
define(['./a', './b'], function (a, b) {
// 模塊 a 和 b 在這里就都執(zhí)行好并可用了
})
- CommonJS
var a = require('./a');
a.readfile();
CommonJS模塊的特點(diǎn):
- 所有代碼都運(yùn)行在模塊作用域羽峰,不會(huì)污染全局作用域。
- 模塊可以多次加載添瓷,但是只會(huì)在第一次加載時(shí)運(yùn)行一次梅屉,然后運(yùn)行結(jié)果就被緩存了,以后再加載鳞贷,就直接讀取緩存結(jié)果坯汤。要想讓模塊再次運(yùn)行,必須清除緩存搀愧。
- 模塊加載的順序惰聂,按照其在代碼中出現(xiàn)的順序。