CMD、AMD揩局、CommonJS 、UMD掀虎、ES6 modules規(guī)范基礎(chǔ)知識問答

一凌盯、為什么要使用模塊化付枫?

使用模塊化可以:
1、解決命名沖突驰怎;
2阐滩、可進行依賴管理;
3县忌、增強代碼的可讀性掂榔;
4、代碼解耦症杏,提高代碼的復用率装获;

二、CMD厉颤、AMD穴豫、CommonJS 規(guī)范分別指什么?有哪些應(yīng)用逼友?

1精肃、CommonJS

CommonJS 是服務(wù)器端模塊規(guī)范;Node.js的模塊系統(tǒng)就是參照CommonJS規(guī)范實現(xiàn)的帜乞;CommonJS中司抱,有一個全局性方法require(),用于加載模塊黎烈。假定有一個數(shù)學模塊math.js习柠,就可以像下面這樣加載。

 var math = require('math');

然后我們可以這樣調(diào)用:

 var math = require('math');
          math.add(1,2)//3

  • 端:服務(wù)端
  • 同異步:同步
  • 實例:


    image.png
2怨喘、AMD

AMD(Asynchronous Module Definition)異步模塊定義津畸,它是一種采用異步的方式加載模塊(即模塊在加載的過程中不影響后面代碼的運行)的javascript規(guī)范;它主要運用在客戶端必怜;常用的require.js就是采用了AMD規(guī)范肉拓;AMD也采用require()語句加載模塊,但是不同于CommonJS梳庆,它要求兩個參數(shù):

 require([module], callback);

[module] 是一個數(shù)組暖途,里面就是需要調(diào)用的模塊名稱;
callback 則是加載完成后的回調(diào)函數(shù)膏执;

上面CommonJS的例子我們可以看出如果在客戶端執(zhí)行的話驻售,可能會出現(xiàn)無響應(yīng)的情況(因為它是同步執(zhí)行的即要等待math.js加載完才能執(zhí)行第二行語句),因此對于客戶端(瀏覽器端)不能采用同步加載的機制更米,需要采用異步加載的機制欺栗,這也是AMD產(chǎn)生的背景。

例如上面CommonJS的例子就可以采用AMD規(guī)范改成下面這樣:

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

在此再舉個require.js的例子:

1、先寫個html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js"></script>
</head>
<body>
    <script>
    require.config({
        baseUrl:"js/lib" //設(shè)置基目錄
    })
    require(['amd-main']);
    console.log("starting")
    </script>

    
</body>
</html>

2迟几、然后在該html文件目錄中的js文件夾下的lib文件夾新建如下兩個js文件

//amd-main.js

 define(["inc-amd"],function(Inc){
    console.log(Inc.get());
    Inc.add1();
    console.log(Inc.get());
     Inc.add1();
    console.log(Inc.get());


 })
// inc-amd
 define(function(){
    var inc=(function(){

        var a=1;

        function add1(){
            a++;

        }
        function get(){
            return a;
        }

        return {
            add1:add1,
            get:get

        };


    }());
    return inc;
 })

運行編好的html文件后會得到如下結(jié)果:

Paste_Image.png
  • 端:瀏覽器
  • 同異步:異步
  • 實例:


    image.png
  • 相關(guān)庫:require.js
3消请、CMD

CMD(Common Module Definition)通用模塊定義,它也是javascript的一種模塊規(guī)范类腮,與依賴關(guān)系前置的AMD不同的是臊泰,CMD是按需加載的。國內(nèi)玉伯編寫的Sea.js里的所有javascript模塊都是遵循 CMD 模塊定義規(guī)范的蚜枢。

  • 端:瀏覽器
  • 同異步:異步
  • 實例:
image.png
  • 相關(guān)庫:Sea.js
4缸逃、UMD

通用模塊定義
它兼容了AMD和CommonJS,同時還支持老式的“全局”變量規(guī)范

5厂抽、ES6 export/import modules

推薦資料

1需频、CommonJS、AMD、CMD、UMD蔼卡、ES6
2、https://my.oschina.net/felumanman/blog/263330

**本文版權(quán)歸本人即簡書筆名:該賬戶已被查封 所有饲化,如需轉(zhuǎn)載請注明出處。謝謝吗伤! *

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末吃靠,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子足淆,更是在濱河造成了極大的恐慌巢块,老刑警劉巖,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件巧号,死亡現(xiàn)場離奇詭異族奢,居然都是意外死亡,警方通過查閱死者的電腦和手機丹鸿,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進店門越走,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人靠欢,你說我怎么就攤上這事廊敌。” “怎么了门怪?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵骡澈,是天一觀的道長。 經(jīng)常有香客問我掷空,道長肋殴,這世上最難降的妖魔是什么囤锉? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮护锤,結(jié)果婚禮上嚼锄,老公的妹妹穿的比我還像新娘。我一直安慰自己蔽豺,他們只是感情好,可當我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布拧粪。 她就那樣靜靜地躺著修陡,像睡著了一般。 火紅的嫁衣襯著肌膚如雪可霎。 梳的紋絲不亂的頭發(fā)上魄鸦,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天,我揣著相機與錄音癣朗,去河邊找鬼拾因。 笑死,一個胖子當著我的面吹牛旷余,可吹牛的內(nèi)容都是我干的绢记。 我是一名探鬼主播,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼正卧,長吁一口氣:“原來是場噩夢啊……” “哼蠢熄!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起炉旷,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤签孔,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后窘行,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體饥追,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年罐盔,在試婚紗的時候發(fā)現(xiàn)自己被綠了但绕。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡翘骂,死狀恐怖壁熄,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情碳竟,我是刑警寧澤草丧,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站莹桅,受9級特大地震影響昌执,放射性物質(zhì)發(fā)生泄漏烛亦。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一懂拾、第九天 我趴在偏房一處隱蔽的房頂上張望煤禽。 院中可真熱鬧,春花似錦岖赋、人聲如沸檬果。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽选脊。三九已至,卻和暖如春脸甘,著一層夾襖步出監(jiān)牢的瞬間恳啥,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工丹诀, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留钝的,地道東北人。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓铆遭,卻偏偏與公主長得像硝桩,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子疚脐,可洞房花燭夜當晚...
    茶點故事閱讀 45,937評論 2 361

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