女神鎮(zhèn)場(chǎng)
相信不只我一個(gè)人對(duì)模塊化這里感覺(jué)不熟練廓握,因?yàn)閏ommonJS乳怎、AMD、CMD真的很容易把人弄得云里霧里,本著“服務(wù)他人秸妥,方便自己”的原則,特整理這篇文章抗蠢,希望對(duì)大家有幫助薛躬。
- WHY(為什么要使用模塊化犬庇?)
解決全局變量的命名沖突問(wèn)題,每個(gè)模塊相當(dāng)于一個(gè)獨(dú)立的空間侨嘀,即使不同模塊中的某些變量命名相同也完全沒(méi)有關(guān)系臭挽。
就好像,中國(guó)有一HARRISKNG咬腕,恰好美國(guó)也有一個(gè)欢峰,我們倆在不同的國(guó)家,不會(huì)相互影響彼此的生活涨共,反正國(guó)家之間的對(duì)接是由外交部長(zhǎng)來(lái)進(jìn)行的纽帖,這是一個(gè)道理;解決依賴的模塊順序問(wèn)題举反,即假設(shè)你需要引用jQuery抛计,則jQuery必須在改文件之前被加載,但是當(dāng)加載文件數(shù)量增加照筑,這種管理將會(huì)非常復(fù)雜吹截,因此需要規(guī)范來(lái)解決。
-
WHAT(模塊化規(guī)范介紹)
-
AMD
是瀏覽器端運(yùn)行的模塊化規(guī)范凝危。
主要是為了解決:- 文件依賴順序問(wèn)題
- 頁(yè)面渲染阻塞問(wèn)題
-
這里將重點(diǎn)講解requireJS來(lái)對(duì)AMD規(guī)范進(jìn)行深入解析波俄,具體見(jiàn)下一篇
CMD
即seajs,是中國(guó)出品蛾默。commonJS
具體形式:(node端運(yùn)行)
//a.js
var name = "harrisking";
function sayName(){
console.log(name);
}
function sayHello(){
console.log('hello'+' '+name);
}
module.exports = {
sayHello : sayHello,
sayName : sayName
}
//b.js
var nameModule = require('./a.js');
nameModule.sayName();
nameModule.sayHello();
或者
var people = {
name: 'harrisking',
age:23,
saysth: function(){
console.log('hello,my name is '+this.name+',my age is '+this.age);
}
}
module.exports = people;
var info = require('./a.js');
info.saysth();
- RELATION(規(guī)范關(guān)系圖)