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í)際代碼深入理解篓像,共勉!