白話 AMD原理 異步加載模塊

AMD是什么帜平,require.js又是什么?

AMD: 在前端腌且,它是一種當(dāng)前開發(fā)者能使用的模塊化Javascript方案敞嗡。
require.js: 基于AMD的設(shè)計(jì)規(guī)范颁糟,并將AMD的功能發(fā)揮到最大的一個(gè)插件航背。

AMD大致分為三個(gè)功能

  • handle:對(duì)開發(fā)者輸入的參數(shù)進(jìn)行區(qū)分,運(yùn)行對(duì)應(yīng)的功能棱貌;
  • setModule:建立開發(fā)者想要的模塊玖媚,如果存在便調(diào)用;
  • loadModule: 加載需要的模塊婚脱,加載模塊的依賴今魔;

A過程(引入單依賴)

A.js
define(['B'], function (B){
   B();
});

1、我在A.JS中障贸,希望加載一個(gè)B模塊涡贱,并執(zhí)行回調(diào)( B());

2、AMD拿到信息惹想,在內(nèi)部注冊(cè)了一個(gè)B模塊,并保存了加載完后要執(zhí)行的(B())

3督函、AMD發(fā)現(xiàn)B模塊沒有加載過嘀粱,那么loadJs(B.js),B模塊的load狀態(tài)為 ‘loading’辰狡;

4 锋叨、loadJs 開始往<body></body>appendChild(B.js);

5.、B.js 被加載進(jìn)來宛篇,js引擎開始執(zhí)行代碼娃磺,AMD發(fā)現(xiàn)B.js中存在B.js模塊的定義代碼;

6叫倍、因?yàn)锳MD中B模塊已經(jīng)存在并且是 loading 狀態(tài)偷卧,這個(gè)時(shí)候B.js中的模塊定義更新了
AMD中的B模塊狀態(tài)為 loaded,并執(zhí)行一直托管的回調(diào)(B())吆倦;

當(dāng)然听诸,實(shí)際代碼還有依賴注入回調(diào)等等復(fù)雜的問題

B過程(引入多依賴)

AA.js
define(['B','C','D'], function (B,C,D){
   B(); C(); D();
});

A過程 最大的區(qū)別就是,在handle過程中蚕泽,就是對(duì)開發(fā)者信息輸入的處理中晌梨,會(huì)對(duì)多個(gè)依賴分配一個(gè)

共同該多依賴的長度length,然后給每個(gè)依賴一個(gè)內(nèi)部的回調(diào)须妻,當(dāng)某個(gè)依賴加載完全(這個(gè)依賴頁面中定義的該依賴代碼執(zhí)行)后仔蝌,length -- ;當(dāng)length === 0 時(shí)荒吏,執(zhí)行AA.js中定義的回調(diào), (
B(); C(); D();)

注意

白話這個(gè)AMD原理敛惊,更多的是基于個(gè)人的理解,也有可能與實(shí)際標(biāo)準(zhǔn)有出入绰更。
實(shí)際去實(shí)現(xiàn)一個(gè)AMD肯定沒有上文講的這么簡單豆混,希望能夠結(jié)合實(shí)際代碼深入理解篓像,共勉!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末皿伺,一起剝皮案震驚了整個(gè)濱河市员辩,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌鸵鸥,老刑警劉巖奠滑,帶你破解...
    沈念sama閱讀 211,743評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異妒穴,居然都是意外死亡宋税,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門讼油,熙熙樓的掌柜王于貴愁眉苦臉地迎上來杰赛,“玉大人,你說我怎么就攤上這事矮台》ν停” “怎么了?”我有些...
    開封第一講書人閱讀 157,285評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵瘦赫,是天一觀的道長辰晕。 經(jīng)常有香客問我,道長确虱,這世上最難降的妖魔是什么含友? 我笑而不...
    開封第一講書人閱讀 56,485評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮校辩,結(jié)果婚禮上窘问,老公的妹妹穿的比我還像新娘。我一直安慰自己宜咒,他們只是感情好南缓,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,581評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著荧呐,像睡著了一般汉形。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上倍阐,一...
    開封第一講書人閱讀 49,821評(píng)論 1 290
  • 那天概疆,我揣著相機(jī)與錄音,去河邊找鬼峰搪。 笑死岔冀,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的概耻。 我是一名探鬼主播使套,決...
    沈念sama閱讀 38,960評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼罐呼,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼!你這毒婦竟也來了侦高?” 一聲冷哼從身側(cè)響起嫉柴,我...
    開封第一講書人閱讀 37,719評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎奉呛,沒想到半個(gè)月后计螺,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,186評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡瞧壮,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,516評(píng)論 2 327
  • 正文 我和宋清朗相戀三年登馒,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片咆槽。...
    茶點(diǎn)故事閱讀 38,650評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡陈轿,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出秦忿,到底是詐尸還是另有隱情麦射,我是刑警寧澤,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布小渊,位于F島的核電站,受9級(jí)特大地震影響茫叭,放射性物質(zhì)發(fā)生泄漏酬屉。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,936評(píng)論 3 313
  • 文/蒙蒙 一揍愁、第九天 我趴在偏房一處隱蔽的房頂上張望呐萨。 院中可真熱鬧,春花似錦莽囤、人聲如沸谬擦。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽惨远。三九已至,卻和暖如春话肖,著一層夾襖步出監(jiān)牢的瞬間北秽,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評(píng)論 1 266
  • 我被黑心中介騙來泰國打工最筒, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留贺氓,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,370評(píng)論 2 360
  • 正文 我出身青樓床蜘,卻偏偏與公主長得像辙培,于是被迫代替她去往敵國和親蔑水。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,527評(píng)論 2 349

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