1. 為什么要使用模塊化？
- 1.解決命名沖突
- 2.代碼解耦，提高復(fù)用性
- 3.提高代碼可讀性
- 3.方便管理，提高代碼的可維護(hù)性
2. CMD、AMD、CommonJS 規(guī)范分別指什么？有哪些應(yīng)用
(1) CommonJS
node.js的模塊系統(tǒng)，就是參照CommonJS規(guī)范實(shí)現(xiàn)的。
1.定義模塊 根據(jù)CommonJS規(guī)范，一個(gè)單獨(dú)的文件就是一個(gè)模塊。每一個(gè)模塊都是一個(gè)單獨(dú)的作用域，也就是說，在該模塊內(nèi)部定義的變量，無法被其他模塊讀取，除非定義為global對(duì)象的屬性
2.模塊輸出： 模塊只有一個(gè)出口，module.exports對(duì)象，我們需要把模塊希望輸出的內(nèi)容放入該對(duì)象
3.加載模塊： 加載模塊使用require方法，該方法讀取一個(gè)文件并執(zhí)行，返回文件內(nèi)部的module.exports對(duì)象
CommonJS規(guī)范使用示例:
目錄結(jié)構(gòu)：
|- CommonJS
|- moduleA.js
|- moduleB.js
|- main.js
moduleA.js:
// 模塊定義 moduleA.js
exports.sum=function(){
var value=0, i=0, len=arguments.length;
while(i<len){
value +=arguments[i++];
}
return value;
}
moduleB.js:
// 模塊定義 moduleB.js
var sum=require("./moduleA.js").sum;
function increase(val){
return sum(val,1);
}
function decrease(val){
return sum(val, -1);
}
module.exports={
increase:increase,
decrease:decrease
}
main.js:
// main.js
var sum=require("./moduleA.js").sum;
var increase=require("./moduleB.js").increase;
var decrease=require("./moduleB.js").decrease;
console.log(sum(6,7,8)); //21
console.log(increase(100)); //101
console.log(decrease(100)); //99
注意：以上代碼在瀏覽器端是無法運(yùn)行的，需要在node端運(yùn)行。在gitBash中運(yùn)行命令node main.js 即可看到結(jié)果。
CommonJS規(guī)范不適用于瀏覽器環(huán)境，因?yàn)閞equire加載模塊是同步的，必須等module.js加載完才會(huì)執(zhí)行后面的代碼。
(2) AMD
AMD是"Asynchronous Module Definition"的縮寫，意思就是"異步模塊定義"。所有依賴某個(gè)模塊的語句，都定義在一個(gè)回調(diào)函數(shù)中，等到加載完成之后，這個(gè)回調(diào)函數(shù)才會(huì)運(yùn)行。
由于不是JavaScript原生支持，使用AMD規(guī)范進(jìn)行頁面開發(fā)需要用到對(duì)應(yīng)的庫函數(shù)，也就是RequireJS，實(shí)際上AMD 是 RequireJS 在推廣過程中對(duì)模塊定義的規(guī)范化的產(chǎn)出。
requireJS定義了一個(gè)函數(shù) define，它是全局變量，用來定義模塊
語法：define(id?, dependencies?, factory);
- id：定義中模塊的名字，可選；如果沒有提供該參數(shù)，模塊的名字應(yīng)該默認(rèn)為模塊加載器請求的指定腳本的名字(如dialog.js)
- dependencies：是一個(gè)當(dāng)前模塊依賴的模塊名稱數(shù)組,可以省略；
- factory：工廠方法，模塊初始化要執(zhí)行的函數(shù)或?qū)ο蟆Ｈ绻麨楹瘮?shù)，它應(yīng)該只被執(zhí)行一次。如果是對(duì)象，此對(duì)象應(yīng)該為模塊的輸出值。
AMD規(guī)范使用示例:
目錄結(jié)構(gòu)：
|- AMD
|- index.html
|- js
|- moduleA.js
|- moduleB.js
|- main.js
moduleA.js:
// 定義模塊 moduleA.js
define(function(){
function sum(){
var total=0, i=0, len=arguments.length;
while(i<len){
total +=arguments[i++];
}
return total;
};
return {sum:sum};
})
moduleB.js
// 定義模塊 moduleB.js ,模塊B依賴于模塊A
define(["moduleA"],function(a){
function increase(val){
return a.sum(val,1);
}
function decrease(val){
return a.sum(val, -1);
}
return {
increase:increase,
decrease:decrease
}
})
main.js:
// 主模塊main.js, main.js依賴于模塊A和模塊B
define(["moduleA","moduleB"],function(a,b){
var sum=a.sum;
var increase=b.increase;
var decrease=b.decrease;
console.log(sum(6,7,8)); //21
console.log(increase(100)); //101
console.log(decrease(100)); //99
})
index.html:
<!--index.html-->
<!--先加載RequireJS-->
<script src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js"></script>
<script type="text/javascript">
requirejs.config({
baseUrl:"js"
})
requirejs(["main"]); //加載入口模塊
</script>
控制臺(tái)查看結(jié)果：
應(yīng)用： 目前，主要有兩個(gè)Javascript庫實(shí)現(xiàn)了AMD規(guī)范：require.js和curl.js
參考：阮一峰 AMD規(guī)范
(3) CMD
CMD即Common Module Definition,通用模塊定義。
CMD規(guī)范是國內(nèi)發(fā)展出來的，就像AMD有個(gè)requireJS，CMD有個(gè)瀏覽器的實(shí)現(xiàn)SeaJS，SeaJS要解決的問題和requireJS一樣，只不過在模塊定義方式和模塊加載解析時(shí)機(jī)上有所不同。
語法：define(id?, deps?, factory)
因?yàn)镃MD推崇：
- 1.一個(gè)文件一個(gè)模塊，所以經(jīng)常就用文件名作為模塊id
- 2.CMD推崇依賴就近，所以一般不在define的參數(shù)中寫依賴，在factory中寫。
factory有三個(gè)參數(shù)function(require, exports, module)
其中require 是一個(gè)方法，接受 模塊標(biāo)識(shí) 作為唯一參數(shù)，用來獲取其他模塊提供的接口；exports是一個(gè)對(duì)象，用來向外提供模塊接口;module是一個(gè)對(duì)象，上面存儲(chǔ)了與當(dāng)前模塊相關(guān)聯(lián)的一些屬性和方法。
CMD規(guī)范使用示例:
目錄結(jié)構(gòu)：
|- CMD
|- index.html
|- js
|- moduleA.js
|- moduleB.js
|- main.js
moduleA.js:
// 定義模塊 moduleA.js
define(function(require,exports,module){
exports.sum=function(){
var total=0, i=0, len=arguments.length;
while(i<len){
total +=arguments[i++];
}
return total;
}
})
moduleB.js :
// 定義模塊 moduleB.js
define(function(require,exports,module){
var sum=require("moduleA").sum;
exports.increase=function(val){
return sum(val,1);
}
exports.decrease=function(val){
return sum(val,-1);
}
})
main.js:
//定義主模塊main.js
define(function(require,exports,module){
var sum=require("moduleA").sum;
var increase=require("moduleB").increase;
var decrease=require("moduleB").decrease;
console.log(sum(4,5,6)); //15
console.log(increase(150)); //151
console.log(decrease(150)); //149
})
<!--index.html-->
<!--先加載RequireJS-->
<script src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js"></script>
<script type="text/javascript">
requirejs.config({
baseUrl:"js"
})
requirejs(["main"]); //加載入口模塊
</script>
控制臺(tái)查看結(jié)果：
(4) AMD與CMD區(qū)別
- 1.AMD推崇依賴前置，在定義模塊的時(shí)候就要聲明其依賴的模塊
- 2.CMD推崇就近依賴，只有在用到某個(gè)模塊的時(shí)候再去require
最明顯的區(qū)別就是在模塊定義時(shí)對(duì)依賴的處理不同:
- 同樣都是異步加載模塊，AMD在加載模塊完成后就會(huì)執(zhí)行該模塊，所有模塊都加載執(zhí)行完后會(huì)進(jìn)入require的回調(diào)函數(shù)，執(zhí)行主邏輯，這樣的效果就是依賴模塊的執(zhí)行順序和書寫順序不一定一致，看網(wǎng)絡(luò)速度，哪個(gè)先下載下來，哪個(gè)先執(zhí)行，但是主邏輯一定在所有依賴加載完成后才執(zhí)行。
- CMD加載完某個(gè)依賴模塊后并不執(zhí)行，只是下載而已，在所有依賴模塊加載完成后進(jìn)入主邏輯，遇到require語句的時(shí)候才執(zhí)行對(duì)應(yīng)的模塊，這樣模塊的執(zhí)行順序和書寫順序是完全一致的。
這種區(qū)別各有優(yōu)劣，只是語法上的差距，而且requireJS和SeaJS都支持對(duì)方的寫法。
