AMD_CMD_RequireJS

1.為什么要使用模塊化旦事?

在模塊化還未規(guī)范化之前效拭,有三種模仿模塊化的方法攻泼,分別是函數(shù)聲明,對(duì)象返回馆匿,和立即執(zhí)行函數(shù)封裝,之后才有模塊化的規(guī)范燥滑,在ES6中渐北,也對(duì)“類”和“模塊”有定義,不過要主流瀏覽器都支持時(shí)才能廣泛使用突倍。之所以使用模塊化是因?yàn)椋?br> 解決命名沖突腔稀;
方便依賴性管理;
提高代碼的維護(hù)性和可讀性羽历;
每個(gè)模塊都是單獨(dú)文件焊虏,解耦提高代碼復(fù)用性;


2.CMD秕磷、AMD诵闭、CommonJS 規(guī)范分別指什么?有哪些應(yīng)用

  • CommonJS規(guī)范加載模塊是同步的,也就是說疏尿,只有加載完成瘟芝,才能執(zhí)行后面的操作。AMD規(guī)范則是非同步加載模塊褥琐,允許指定回調(diào)函數(shù)锌俱。由于Node.js主要用于服務(wù)器編程,模塊文件一般都已經(jīng)存在于本地硬盤敌呈,所以加載起來比較快贸宏,不用考慮非同步加載的方式,所以CommonJS規(guī)范比較適用磕洪。但是吭练,如果是瀏覽器環(huán)境(客戶端),要從服務(wù)器端加載模塊析显,這時(shí)就必須采用非同步模式鲫咽,因此瀏覽器端一般采用AMD規(guī)范。
  • AMD和CMD最大的區(qū)別是對(duì)依賴模塊的執(zhí)行時(shí)機(jī)處理不同,AMD依賴前置谷异,js可以方便知道依賴模塊是誰分尸,立即加載;而CMD就近依賴晰绎。需要時(shí)就寫出依賴寓落。
  1. CMD(Common Module Definition)
    語法:
define(id?, deps?, factory)

依賴就近原則,用的時(shí)候require荞下。所以一般不在define中寫依賴伶选,在factory函數(shù)中寫。

factory(require,exports,module){
}
// require:模板入口
//exports:對(duì)象尖昏,向外提供模板出口

缺點(diǎn):CMD加載完某個(gè)依賴模塊后并不執(zhí)行,遇到require時(shí)執(zhí)行對(duì)應(yīng)模塊仰税,有延遲速度不如AMD快。
優(yōu)點(diǎn):執(zhí)行順序和書寫順序抽诉,按需加載對(duì)應(yīng)模塊陨簇。

  1. AMD(Asynchronous Module Definition)
    它是一個(gè)在瀏覽器端模塊化開發(fā)的規(guī)范,由于不是JavaScript原生支持迹淌,使用AMD規(guī)范進(jìn)行頁(yè)面開發(fā)需要用到對(duì)應(yīng)的庫(kù)函數(shù)(RequireJS)河绽,實(shí)際上AMD 是 RequireJS 在推廣過程中對(duì)模塊定義的規(guī)范化的產(chǎn)出。
    define是require.JS定義的全局變量唉窃,它是一個(gè)函數(shù)耙饰。語法:
define(id?, dependencies?, factory);
//id可選參數(shù),用來定義模塊的標(biāo)識(shí)纹份,如果沒有提供該參數(shù)苟跪,為腳本文件名
//dependencies是一個(gè)當(dāng)前模塊依賴的模塊名稱數(shù)組
//factory模塊初始化要執(zhí)行的函數(shù)或?qū)ο笸⒍弧H魹榛卣{(diào)函數(shù),則執(zhí)行一次件已,若為對(duì)象笋额,則該對(duì)象為輸出值。

優(yōu)點(diǎn):AMD中require()采用異步加載篷扩,這樣瀏覽器不會(huì)失去響應(yīng)兄猩,它指定的回調(diào)函數(shù),只有前面的模塊都加載成功后鉴未,才會(huì)運(yùn)行厦滤,解決了依賴性的問題。
缺點(diǎn):依賴提前聲明有時(shí)候并不是很好歼狼,而且都無法與同步模塊規(guī)范保持一致,會(huì)出現(xiàn)執(zhí)行順序和書寫順序不一致的情況享怀。
模塊依賴聲明方式:

define(['./a', './b'], function (a, b) {
    //  模塊 a 和 b 在這里就都執(zhí)行好并可用了
})
  1. CommonJS
var a = require('./a');
a.readfile();

CommonJS模塊的特點(diǎn):

  • 所有代碼都運(yùn)行在模塊作用域羽峰,不會(huì)污染全局作用域。
  • 模塊可以多次加載添瓷,但是只會(huì)在第一次加載時(shí)運(yùn)行一次梅屉,然后運(yùn)行結(jié)果就被緩存了,以后再加載鳞贷,就直接讀取緩存結(jié)果坯汤。要想讓模塊再次運(yùn)行,必須清除緩存搀愧。
  • 模塊加載的順序惰聂,按照其在代碼中出現(xiàn)的順序。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末咱筛,一起剝皮案震驚了整個(gè)濱河市搓幌,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌迅箩,老刑警劉巖溉愁,帶你破解...
    沈念sama閱讀 217,509評(píng)論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異饲趋,居然都是意外死亡拐揭,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門奕塑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來堂污,“玉大人,你說我怎么就攤上這事爵川》笱唬” “怎么了?”我有些...
    開封第一講書人閱讀 163,875評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)扒披。 經(jīng)常有香客問我值依,道長(zhǎng),這世上最難降的妖魔是什么碟案? 我笑而不...
    開封第一講書人閱讀 58,441評(píng)論 1 293
  • 正文 為了忘掉前任愿险,我火速辦了婚禮,結(jié)果婚禮上价说,老公的妹妹穿的比我還像新娘辆亏。我一直安慰自己,他們只是感情好鳖目,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,488評(píng)論 6 392
  • 文/花漫 我一把揭開白布扮叨。 她就那樣靜靜地躺著,像睡著了一般领迈。 火紅的嫁衣襯著肌膚如雪彻磁。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,365評(píng)論 1 302
  • 那天狸捅,我揣著相機(jī)與錄音衷蜓,去河邊找鬼。 笑死尘喝,一個(gè)胖子當(dāng)著我的面吹牛磁浇,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播朽褪,決...
    沈念sama閱讀 40,190評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼置吓,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了鞍匾?” 一聲冷哼從身側(cè)響起交洗,我...
    開封第一講書人閱讀 39,062評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎橡淑,沒想到半個(gè)月后构拳,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,500評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡梁棠,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,706評(píng)論 3 335
  • 正文 我和宋清朗相戀三年置森,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片符糊。...
    茶點(diǎn)故事閱讀 39,834評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡凫海,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出男娄,到底是詐尸還是另有隱情行贪,我是刑警寧澤漾稀,帶...
    沈念sama閱讀 35,559評(píng)論 5 345
  • 正文 年R本政府宣布,位于F島的核電站建瘫,受9級(jí)特大地震影響崭捍,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜啰脚,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,167評(píng)論 3 328
  • 文/蒙蒙 一殷蛇、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧橄浓,春花似錦粒梦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至准给,卻和暖如春昼蛀,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背圆存。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留仇哆,地道東北人沦辙。 一個(gè)月前我還...
    沈念sama閱讀 47,958評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像讹剔,于是被迫代替她去往敵國(guó)和親油讯。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,779評(píng)論 2 354

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

  • 為什么要使用模塊化兔综? 最主要的目的:解決命名沖突依賴管理 其他價(jià)值提高代碼可讀性代碼解耦,提高復(fù)用性 CMD狞玛、AM...
    Eazer閱讀 661評(píng)論 3 1
  • 題目1: 為什么要使用模塊化软驰? 模塊的由來:嵌入網(wǎng)頁(yè)的JS代碼越來越龐大,越來越像桌面程序心肪,需要一個(gè)團(tuán)隊(duì)去分工協(xié)作...
    蕭雪圣閱讀 276評(píng)論 0 0
  • 題目1: 為什么要使用模塊化锭亏? 解決命名沖突 依賴管理 提高代碼可讀性 代碼解耦,提高復(fù)用性 題目2: CMD硬鞍、A...
    撫年華輕過閱讀 345評(píng)論 0 0
  • 突然很好奇別人有沒有自己的種種感受慧瘤,嘗試搜一搜 “心如刀絞”戴已,壓抑的時(shí)候會(huì)有這種感覺,好像是遺傳因素锅减,情緒激烈的時(shí)...
    體溫365閱讀 199評(píng)論 0 1
  • 今晚在刷朋友圈的時(shí)候,看見朋友分享了一篇文章劫狠,標(biāo)題無非是老套的“打工旅行她活出了自己想要的樣子”拴疤。這種文章...
    西瓜超人閱讀 452評(píng)論 0 0