1.為什么要使用模塊化?
1.解決命名沖突酸钦,模塊之間在命名變量時(shí)怪得,不用過(guò)于擔(dān)心命名沖突。
2.提高代碼復(fù)用性钝鸽,需要某個(gè)模塊就使用某個(gè)模塊的代碼汇恤,提高代碼的復(fù)用率。
3.增加代碼可讀性拔恰,可以根據(jù)代碼模塊的命名來(lái)確定模塊的功能因谎。
4.每個(gè)模塊都是相對(duì)獨(dú)立互不影響的,有利于代碼的管理颜懊。
2.2.CMD财岔、AMD风皿、CommonJS 規(guī)范分別指什么?有哪些應(yīng)用
1.CMD(Common Module Definition)通用模塊定義匠璧。該規(guī)范明確規(guī)定的模塊的書(shū)寫(xiě)規(guī)則和基本交互原則桐款。
語(yǔ)法:
define(factory)
factory為函數(shù)時(shí),表示的是模塊的構(gòu)造方法夷恍、執(zhí)行構(gòu)造方法可以得到模塊向外提供的接口魔眨。factory在執(zhí)行時(shí)默認(rèn)會(huì)傳入三個(gè)參數(shù):require、exports和module
define(function(reuqire,exports,module){
//模塊代碼
})
define(function(reuqire,exports,module){
var a = require('./a')
a.dosomething()
var b = require('./b')
b.dosomething()
})
AMD(Asynchronous Module Definition)運(yùn)行在瀏覽器端模塊化開(kāi)發(fā)的規(guī)范酿雪。使用該規(guī)范的有requireJS遏暴。AMD的加載模塊需要把所有的模塊都寫(xiě)入?yún)?shù)里,用多少寫(xiě)多少指黎,它是采用異步加載模式的JavaScript規(guī)范朋凉,模塊加載的時(shí)候不影響后面語(yǔ)句的運(yùn)行,它需要兩個(gè)參數(shù)醋安。
require([module],callback)
module:是一個(gè)數(shù)組杂彭,里面是需要調(diào)用的模塊名稱(chēng)。
callback是加載完成之后的回調(diào)函數(shù)吓揪。
例:
define(['./a','./b'],function(a,b){
a.dosomething()
b.dosomething()
})
CommonJS:是服務(wù)端模塊的規(guī)范亲怠,Node.js采用了這個(gè)規(guī)范,一個(gè)單獨(dú)的文件就是一個(gè)模塊磺芭,每一個(gè)模塊都有一個(gè)單獨(dú)的作用域赁炎,模塊之間互相不影響,它與CMD規(guī)范相似钾腺,區(qū)別就是CMD需要用define包裹代碼module代表當(dāng)前模塊徙垫,exports屬性是模塊的一個(gè)接口,在加載時(shí)require()來(lái)加載這個(gè)模塊放棒,exports來(lái)提供接口姻报。
//模塊定義module.js
function module(){
console.log('1')
}
module.exports = {
module:module
}
//加載模塊
var nameModule = require('./module.js')
nameModule.module()
AMD與CMD的區(qū)別
1.AMD提前執(zhí)行異步加載:依賴(lài)先執(zhí)行+延遲執(zhí)行,CMD延遲執(zhí)行间螟,運(yùn)行到才加載按照順序執(zhí)行吴旋。
2.AMD是RequrieJS在推廣過(guò)程中對(duì)模塊化定義的規(guī)范化產(chǎn)出,而CMD是SeaJS在推廣過(guò)程中對(duì)模塊化定義的規(guī)范化產(chǎn)出厢破。
3.AMD推崇依賴(lài)前置荣瑟,CMD推崇依賴(lài)就近。
4.AMD的API根據(jù)使用范圍有區(qū)別摩泪,但是使用一個(gè)API接口笆焰,CMD的每個(gè)API的職責(zé)單一。
5.AMD的優(yōu)點(diǎn)是異步并行加載见坑,在AMD的規(guī)范下嚷掠,同時(shí)異步加載是不會(huì)發(fā)生錯(cuò)誤的捏检。
CMD的機(jī)制不同,這種加載方式會(huì)產(chǎn)生錯(cuò)誤不皆,必須要規(guī)范化模塊內(nèi)容形式贯城。