CMD、AMD、CommonJS-規(guī)范

概念

1、為什么要使用模塊化?

  • 當(dāng)代碼規(guī)模較大或進(jìn)行團(tuán)隊(duì)協(xié)作時,如果不實(shí)行模塊化,有可能導(dǎo)致命名沖突----解決命名沖突;
  • 不使用模塊化的依賴調(diào)用比較容易陷入混亂,使用模塊化有助于依賴的管理----對依賴進(jìn)行管理
  • 模塊化的代碼更利于他人閱讀和協(xié)同開發(fā)維護(hù)----提高代碼可讀性;
  • 方便代碼的復(fù)用----代碼解耦,提高復(fù)用性;

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

2.1、CMD(Common Module Definition)通用模塊定義規(guī)范

  • 是瀏覽器端的模塊化規(guī)范,是在SeaJS的推廣過程中產(chǎn)生的,該規(guī)范明確了模塊的基本書寫格式和基本交互規(guī)則,提倡按需加載。

  • 在CMD規(guī)范中,一個模塊就是一個文件,代碼格式:

define(id?, deps?, factory)

因?yàn)镃MD推崇:
1、一個文件一個模塊,所以經(jīng)常就用文件名作為模塊id;
2、CMD推崇依賴就近,所以一般不在define的參數(shù)中寫依賴;

  • define是一個全局函數(shù),用來定義模塊;
  • factory參數(shù)可以是一個函數(shù),也可以是一個對象或字符串。
    • 當(dāng) factory為對象、字符串時,表示模塊的接口就是該對象、字符串。
    • 當(dāng)factory為函數(shù)時表示是模塊的構(gòu)造方法。執(zhí)行該構(gòu)造方法可以得到模塊向外提供的接口。factory方法在執(zhí)行時,默認(rèn)會傳入三個參數(shù):require(把其他模塊導(dǎo)入)、exports(把模塊內(nèi)的一些屬性和方法導(dǎo)出) 和 module。

AMD推崇依賴前置,在定義模塊的時候就要聲明其依賴的模塊;
CMD推崇就近依賴,只有在用到某個模塊的時候再去require;

//CMD
define(function(require, exports, module){ 
    var a = require('a'); 
    a.doSomething(); 
    var b = require('b'); 
    b.doSomething();   // 依賴就近,延遲執(zhí)行
});

//AMD
define(['a', 'b'], function(a, b){   // 依賴前置,提前執(zhí)行 
    a.doSomething(); 
    b.doSomething();
});

明顯看出和 AMD 不同,模塊定義時已不用立馬引入依賴,而是運(yùn)行到需要時候再加載,根據(jù)順序執(zhí)行,這樣更像是 CommonJS 的風(fēng)格,讓人感覺也像是同步加載似的。但實(shí)際上 CMD 內(nèi)部處理是對文件做了一個詞法的解析,在還沒執(zhí)行的時候,解析出所需的依賴,并不是真正的同步。

  • CMD規(guī)范的主要應(yīng)用是SeaJS,現(xiàn)在已經(jīng)被廢棄。

2.2、AMD(Asynchronous Module Definition)異步模塊定義規(guī)范

  • 它采用異步方式加載模塊,模塊的加載不影響它后面語句的運(yùn)行。所有依賴這個模塊的語句,都定義在一個回調(diào)函數(shù)中,等到加載完成之后,這個回調(diào)函數(shù)才會運(yùn)行。

  • 由于不是JS原生支持,使用AMD規(guī)范進(jìn)行頁面開發(fā)需要用到對應(yīng)的函數(shù)庫,也就是大名鼎鼎的RequireJS,實(shí)際上AMD是RequireJS在推廣過程中對模塊定義的規(guī)范化的產(chǎn)出。

  • RequireJS主要解決兩個問題
    1、多個js文件可能有依賴關(guān)系,被依賴的文件需要早于依賴它的文件加載到瀏覽器;
    2、js加載的時候?yàn)g覽器會停止頁面渲染,加載文件越多,頁面失去響應(yīng)時間越長;

  • 例子:
    定義模塊 myModule.js

// 定義模塊 myModule.js
define(['dependency'], function(){
    var name = 'Byron';
    function printName(){
        console.log(name);
    }

    return {
        printName: printName
    };
});

加載模塊

require(['myModule'], function (my){
    my.printName(); 
});
  • 語法

1、RequireJS定義了一個函數(shù) define,它是全局變量,用來定義模塊

define(id?, dependencies?, factory);
  • id:可選參數(shù),用來定義模塊的標(biāo)識,如果沒有提供該參數(shù),默認(rèn)就是腳本文件名(去掉拓展名);
  • dependencies:是一個當(dāng)前模塊依賴的模塊名稱數(shù)組;
  • factory:工廠方法,模塊初始化要執(zhí)行的函數(shù)或?qū)ο?。如果為函?shù),它應(yīng)該只被執(zhí)行一次。如果是對象,此對象應(yīng)該為模塊的輸出值;

2、在頁面上采用require函數(shù)加載模塊

require([module], callback);
  • 第一個參數(shù)[module],是一個數(shù)組,里面的成員就是要加載的模塊;
  • 第二個參數(shù)callback,則是加載成功之后的回調(diào)函數(shù)。

加載的模塊會以參數(shù)形式傳入該函數(shù),從而在回調(diào)函數(shù)內(nèi)部就可以使用這些模塊;
require()函數(shù)在加載依賴的函數(shù)的時候是異步加載的,這樣瀏覽器不會失去響應(yīng),它指定的回調(diào)函數(shù),只有前面的模塊都加載成功后,才會運(yùn)行,解決了依賴性的問題。

require(['math'], function(math){
    math.add(2, 3);
});

math.add()與math模塊加載不是同步的,瀏覽器不會發(fā)生假死。所以很顯然,AMD比較適合瀏覽器環(huán)境。

  • 實(shí)現(xiàn)AMD 規(guī)范的庫有:require.js、curl.jsDojo.js等。

3.3、CommonJS通用模塊定義規(guī)范

CommonJS 由首先使用 js模塊化概念的 Node.js采用,是服務(wù)器端模塊的規(guī)范。
1、定義模塊
根據(jù)CommonJS規(guī)范,一個單獨(dú)的文件就是一個模塊。每一個模塊都是單獨(dú)的作用域,也就是說,在該模塊內(nèi)部定義的變量,無法被其他模塊讀取,除非定義為global對象的屬性。

2、模塊輸出
模塊只有一個出口,module.exports對象我們需要把模塊希望輸出的內(nèi)容放入該對象。

3、加載模塊
加載模塊使用require方法,該方法讀取一個文件并執(zhí)行,返回文件內(nèi)部的module.exports對象。

例子:
模塊定義 myModel.js

//模塊定義 myModel.js

var name = 'Byron';

function printName(){
    console.log(name);
}

function printFullName(firstName){
    console.log(firstName + name);
}

module.exports = {  //模塊輸出
    printName: printName,
    printFullName: printFullName
}

加載模塊

var nameModule = require('./myModel.js');
nameModule .printName();

不同的實(shí)現(xiàn)對require時的路徑有不同要求,一般情況可以省略js拓展名,可以使用相對路徑,也可以使用絕對路徑,甚至可以省略路徑直接使用模塊名(前提是該模塊是系統(tǒng)內(nèi)置模塊)。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,505評論 6 533
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,556評論 3 418
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 176,463評論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,009評論 1 312
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 71,778評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,218評論 1 324
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,281評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,436評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,969評論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,795評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 42,993評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,537評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,229評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,659評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,917評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,687評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 47,990評論 2 374

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

  • 問答 1.為什么要使用模塊化? 要使用模塊化,我們要知道什么是模塊化?首先一個模塊是為了實(shí)現(xiàn)特定功能的文件,模塊化...
    GarenWang閱讀 1,539評論 1 1
  • 示例代碼地址 1. 為什么要使用模塊化? 1.解決命名沖突 2.代碼解耦,提高復(fù)用性 3.提高代碼可讀性 3.方便...
    candy252324閱讀 615評論 0 0
  • 一、 為什么要使用模塊化? 解決命名沖突 解決依賴管理 提高代碼可讀性 代碼解耦,提高復(fù)用性 二、CMD、AMD、...
    Chy18閱讀 380評論 0 0
  • 1.為什么要使用模塊化? 當(dāng)去執(zhí)行某個文件的過程中,如果將全部代碼寫在同一個文件下,在命名變量時,有些變量是全局變...
    饑人谷_徐小坤閱讀 354評論 0 0
  • 為什么要使用模塊化? 網(wǎng)頁隨著技術(shù)的發(fā)展也變的越來越復(fù)雜,模塊化可以讓工作像流水線組裝一樣提高效率,開發(fā)過程中只要...
    沒夢想的咸魚丶閱讀 299評論 0 0