keywords: 模塊化向拆、AMD亚茬、CMD、CommonJS浓恳。
-
為什么要使用模塊化刹缝？
什么是模塊？模塊就是對實現(xiàn)特定功能的一組屬性和方法的封裝颈将。使用模塊化能解決長久以來困擾我們的兩大問題：1梢夯、命名沖突；2吆鹤、文件依賴厨疙。
對于小團(tuán)隊或簡單頁面來說，還可以通過人為約定來避免這兩個問題疑务；但隨著網(wǎng)頁逐步向應(yīng)用程序方向發(fā)展沾凄，頁面所使用到的JS代碼越來越龐大，越來越復(fù)雜知允，命名沖突與文件依賴這兩個問題越發(fā)突出撒蟀，拖延了項目的開發(fā)進(jìn)度。通過使用模塊化温鸽，所有組件可以彼此獨立保屯，職責(zé)單一手负，協(xié)同完成開發(fā)。
-
CMD姑尺、AMD竟终、CommonJS 規(guī)范分別指什么？有哪些應(yīng)用
**CommomJS **: NodeJS提出的服務(wù)器端的模塊化規(guī)范切蟋。
1统捶、定義模塊：一個單獨的文件就是一個模塊。每一個模塊都是單獨的作用域柄粹。
2喘鸟、模塊輸出 模塊只有一個出口，即module.exports對象驻右，需要把希望輸出的內(nèi)容放入該對象什黑。
3、加載模塊：加載模塊使用require方法堪夭，該方法讀取一個文件并執(zhí)行愕把，返回文件內(nèi)部的module.exports對象。
//定義模塊：myMod.js
var name = 'Byron'
function printName(){
console.log(name)
}
function printFullName(firstName) {
console.log(firstName + name)
}
//輸出模塊
module.exports = {
printName : printName,
printFullName:printFullName
}
==================================
//加載模塊
var nameMod = require('./myMod.js')
nameMod.printName()
不同的實現(xiàn)對require時的路徑有不同要求茵瘾，一般情況可以省略js擴(kuò)展名礼华，可使用相對路徑和絕對路徑。
AMD：即Asynchronous Module Definition拗秘，是一個瀏覽器端模塊化開發(fā)的規(guī)范圣絮。使用該規(guī)范的有requireJS。
1雕旨、定義模塊：通過define函數(shù)來定義模塊扮匠，它是全局變量。
define(
module_id /*可選*凡涩，沒有則為匿名模塊/,
[dependencies] /*可選*,當(dāng)前模塊依賴的模塊組/,
definition function /*用來初始化模塊或?qū)ο蟮暮瘮?shù)*/
);
2棒搜、輸出模塊：define函數(shù)中的回調(diào)函數(shù)return出的內(nèi)容即為模塊的接口。
3活箕、加載模塊：使用require方法加載模塊：
require([dependencies],callback)
require函數(shù)接收兩個參數(shù)：
1力麸、第一個參數(shù)是一個數(shù)組，表示加載的模塊育韩；
2克蚂、第二個參數(shù)是一個回調(diào)函數(shù)，當(dāng)?shù)谝粋€參數(shù)的模塊加載成功后筋讨，它將被調(diào)用埃叭。
加載的模塊會以參數(shù)形式傳入該函數(shù)，從而在回調(diào)函數(shù)內(nèi)部使用這些模塊悉罕。
顯然赤屋，require加載的模塊是異步的立镶。
//math.js 定義math模塊，回調(diào)函數(shù)中的return為暴露的接口
define(function(){
return function () {
var sum = 0,i=0,args = arguments,len = arguments.length
while(i<leen) {
sum += args[i++]
}
return sum
}
})
//inc.js 定義inc模塊类早，回調(diào)函數(shù)中的return為暴露的接口
define(['math',function(math){
return function (val) {
return match(val + 1)
}
}])
//index.js 加載inc模塊
requirejs.config({
baseUrl:'js' //用于模塊查找的基準(zhǔn)路徑
})
requirejs(['inc'],function(inc){
console.log(inc(10))
})
CMD：即Common Module Definition媚媒，是一個瀏覽器端模塊化開發(fā)的規(guī)范。使用該規(guī)范的有SeaJS莺奔。
1欣范、定義模塊：通過define函數(shù)定義模塊。
define(id?,desp?,factory)
1令哟、一個文件一個模塊，一般用文件名作為模塊id妨蛹；
2屏富、CMD推崇就近依賴，一般不再define的參數(shù)中寫依賴蛙卤，而是在factory中寫狠半。
3、factory有3個參數(shù)：require（方法）,exports（對象）,module（對象）颤难。
2神年、輸出模塊：通過factory中的參數(shù)exports對象向外提供模塊接口。
3行嗤、加載模塊：使用require函數(shù)加載模塊
//定義模塊 math.js
define(function(require,exports,module){
exports.add = function() {
var sum = 0,i = 0,args = arguments,len = args.length
while(i < len) {
sum += args[i++]
}
return sum
}
})
//定義inc模塊
define(function(require,exports,module){
var add = require('math').add
exports.increment = function(val) {
return add(val,1)
}
})
AMD與CMD的區(qū)別：
1已日、對依賴的處理不同。AMD推崇依賴前置栅屏，在定義模塊的時候就要聲明其依賴的模塊飘千；CMD推崇就近依賴，只有在用到某個模塊的時候再去require栈雳。
2护奈、對依賴的執(zhí)行時機(jī)不同。AMD在加載模塊完成后就執(zhí)行該模塊哥纫，所有模塊執(zhí)行完成后則進(jìn)入require的回調(diào)并執(zhí)行霉旗。而CMD加載模塊后并不執(zhí)行該模塊，在所有模塊加載完成執(zhí)行callback蛀骇，遇到require才執(zhí)行相應(yīng)的模塊厌秒。
