為什么要使用模塊化畅卓？
網(wǎng)頁(yè)隨著技術(shù)的發(fā)展也變的越來(lái)越復(fù)雜，模塊化可以讓工作像流水線組裝一樣提高效率蟋恬，開(kāi)發(fā)過(guò)程中只要實(shí)現(xiàn)核心邏輯翁潘，其他部分可以直接拿別人生產(chǎn)的組裝。譬如車輛組裝的流水線歼争，如果每個(gè)零件都是現(xiàn)場(chǎng)自己加工 那根本不現(xiàn)實(shí)拜马，模塊化已經(jīng)深入到各行各業(yè)，代碼的模塊化具有以下幾個(gè)優(yōu)點(diǎn)沐绒。
- 方便代碼的維護(hù)
- 方便團(tuán)隊(duì)的分工協(xié)作俩莽，管理進(jìn)度
- 實(shí)現(xiàn)代碼的解耦，提高代碼復(fù)用性
- 避免命名沖突
CMD洒沦、AMD豹绪、CommonJS 規(guī)范分別指什么价淌？有哪些應(yīng)用
CommonJS模塊化規(guī)范：Node就是根據(jù)這個(gè)規(guī)范實(shí)現(xiàn)的
- CommonJS規(guī)范規(guī)定申眼，每個(gè)模塊就是一個(gè)文件瞒津，模塊內(nèi)部都是一個(gè)獨(dú)立的作用域
//math.js
var x = 5;
var add =function(v){
return v+1
};
module.exports.x = x;
module.exports.add = add;
//main.js
var math= require('./math.js');
alert(math.x)//5
alert(math.add)//6
- 上面代碼
module.exports用來(lái)輸出變量跟方法，require用于家中模塊 -
CommonJs特點(diǎn)是模塊擁有獨(dú)立作用域括尸，變量方法都是私有的巷蚪，模塊需要的時(shí)候就直接加載
AMD是Asynchronous Module Definition的簡(jiǎn)寫，意思就是異步模塊定義濒翻。
上面的
CommonJs看起來(lái)很方便屁柏，但是這種同步的方式放到瀏覽器卻有點(diǎn)不合適，如果依賴的http請(qǐng)求時(shí)間變長(zhǎng)有送，那瀏覽器就會(huì)出現(xiàn)假死狀態(tài)淌喻。而AMD就是異步加載的方式裸删，require([module], callback);前面數(shù)組就是需要的模塊阵赠，當(dāng)模塊加載成功之后才會(huì)執(zhí)行后面回調(diào)。-
語(yǔ)法
define(id?, dependencies?, factory);實(shí)現(xiàn)這一規(guī)范的有require.js匕荸，curl枷邪，Dojo-
id是模塊名字，這是一個(gè)可選參數(shù)药薯，如不定義那默認(rèn)就是模塊去后綴的文件名 -
dependencies?是定義模塊所需要的依賴救斑，也是可選的 -
factory是模塊需要執(zhí)行的函數(shù)脸候，如果是對(duì)象那就是模塊的返回值
-
//math.js
define(function (){
var add = function (x,y){
return x+y;
};
return {
add: add
};
});
//main.js
require.config({
baseUrl: "js",
});
require(['math'], function (math){
alert(math.add(1,1));
});
//index.html,加載主模塊
<script src="js/require.js" data-main="js/main"></script>
- 上面就是
require.js的運(yùn)用运沦，首先引入require.js使用data-main定義主模塊，require.config中的baseUrl是配置模塊的基本路徑信息嫁盲，當(dāng)需要加載模塊的時(shí)候就require添加模塊烈掠，然后回調(diào)缸托，回調(diào)中的形參代表的就是加載的模塊俐镐。
CMD是Common Moudle Definition的縮寫的佩抹，意思就是通用模塊定義取董，這個(gè)規(guī)范是sea.js推廣過(guò)程中產(chǎn)生的，解決的問(wèn)題和AMD是一樣的廊勃，不過(guò)在寫法上是和模仿ConmmonJs
- 語(yǔ)法
define(id?, deps?, factory)工廠函數(shù)中有require, exports, module三個(gè)參數(shù) -
require是接受其他模塊方法坡垫，exports是模塊提供給外部調(diào)用的api画侣，module儲(chǔ)存模塊的一些信息
//math.js
define(function(requires,exprots,module){
exprots.add = function(v){
return v+1;
};
})
//main.js
define(function(requires,exprots,module){
var add = require('math').add;
var a = 1;
alert(add(a));
})
//加載模塊
seajs.use(['main.js'], function(a){
});
AMD和CMD區(qū)別
-
AMD是提前加載依賴并解析
- 優(yōu)點(diǎn)是開(kāi)始把依賴一次性加載解析，當(dāng)使用時(shí)相響應(yīng)速度將更快溉卓，但當(dāng)是條件引用時(shí)搬泥，加載的依賴可能將不會(huì)用不到，所以這樣做也會(huì)造成性能的浪費(fèi)忿檩。另外有個(gè)缺點(diǎn)就是依賴要提前寫出來(lái)，很多時(shí)候開(kāi)始我們并不知道依賴是什么沙咏，所以可能會(huì)寫到一半的時(shí)候需要回到頂部把依賴添加上班套。
-
CMD也是提前加載依賴，但當(dāng)需要的時(shí)候 也就是require的時(shí)候才開(kāi)始解析
- 優(yōu)點(diǎn)是寫法上將會(huì)更方便吆豹，依賴不需要提前寫好，當(dāng)我們需要的時(shí)候 直接寫依賴鸳吸，拿來(lái)即用，但缺點(diǎn)就是耗時(shí)會(huì)更長(zhǎng)坎拐，中間多了解析的時(shí)間。
