前端模塊化梳理

女神鎮(zhèn)場(chǎng)

相信不只我一個(gè)人對(duì)模塊化這里感覺(jué)不熟練廓握,因?yàn)閏ommonJS乳怎、AMD、CMD真的很容易把人弄得云里霧里,本著“服務(wù)他人秸妥,方便自己”的原則,特整理這篇文章抗蠢,希望對(duì)大家有幫助薛躬。

  • WHY(為什么要使用模塊化犬庇?)
  1. 解決全局變量的命名沖突問(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è)道理;

  2. 解決依賴的模塊順序問(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)系圖)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末懦铺,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子支鸡,更是在濱河造成了極大的恐慌冬念,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,430評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件牧挣,死亡現(xiàn)場(chǎng)離奇詭異急前,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)瀑构,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,406評(píng)論 3 398
  • 文/潘曉璐 我一進(jìn)店門裆针,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人寺晌,你說(shuō)我怎么就攤上這事世吨。” “怎么了呻征?”我有些...
    開(kāi)封第一講書(shū)人閱讀 167,834評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵耘婚,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我陆赋,道長(zhǎng)沐祷,這世上最難降的妖魔是什么嚷闭? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,543評(píng)論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮戈轿,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘阵子。我一直安慰自己思杯,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,547評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布挠进。 她就那樣靜靜地躺著色乾,像睡著了一般。 火紅的嫁衣襯著肌膚如雪领突。 梳的紋絲不亂的頭發(fā)上暖璧,一...
    開(kāi)封第一講書(shū)人閱讀 52,196評(píng)論 1 308
  • 那天,我揣著相機(jī)與錄音君旦,去河邊找鬼澎办。 笑死,一個(gè)胖子當(dāng)著我的面吹牛金砍,可吹牛的內(nèi)容都是我干的局蚀。 我是一名探鬼主播,決...
    沈念sama閱讀 40,776評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼恕稠,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼琅绅!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起鹅巍,我...
    開(kāi)封第一講書(shū)人閱讀 39,671評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤千扶,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后骆捧,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體澎羞,經(jīng)...
    沈念sama閱讀 46,221評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,303評(píng)論 3 340
  • 正文 我和宋清朗相戀三年敛苇,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了煤痕。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,444評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡接谨,死狀恐怖摆碉,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情脓豪,我是刑警寧澤巷帝,帶...
    沈念sama閱讀 36,134評(píng)論 5 350
  • 正文 年R本政府宣布,位于F島的核電站扫夜,受9級(jí)特大地震影響楞泼,放射性物質(zhì)發(fā)生泄漏驰徊。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,810評(píng)論 3 333
  • 文/蒙蒙 一堕阔、第九天 我趴在偏房一處隱蔽的房頂上張望棍厂。 院中可真熱鬧,春花似錦超陆、人聲如沸牺弹。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,285評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)张漂。三九已至,卻和暖如春谨娜,著一層夾襖步出監(jiān)牢的瞬間航攒,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,399評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工趴梢, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留漠畜,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,837評(píng)論 3 376
  • 正文 我出身青樓坞靶,卻偏偏與公主長(zhǎng)得像盆驹,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子滩愁,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,455評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容