一篇文章看懂AMD、CMD和CommonJS的區別

版權聲明：本文爲博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/DarinZanya/article/details/80890630

前端模塊化之JS中的三種模塊規範

AMD規範

• 思想
  異步加載所需模塊，然後在回調函數中執行主邏輯。
• 設計目的
  1.實現JS文件的異步加載，避免網頁因加載時間過長而失去響應；
  2.管理模塊之間的依賴性，便於代碼的編寫和維護；
• 代表
  RequireJS
• 示例

//a.js
define(function(){
    console.log('a.js'執行);
    return {
        hello: function(){
            console.log('This is a.js');
        }
    }
})
//b.js
define(function(){
    console.log('b.js執行');
    return {
        hello: function(){
            console.log('hello, b.js');
        }
    }

});
//main.js
require(['a','b'],function(a,b){
    console.log('main.js執行');
    a.hello();
    $('#b').click(function(){
        b.hello();
    });
});

上面的main.js被執行的時候，會有如下輸出：
a.js執行
b.js執行
main.js執行
This is a.js
在點擊按鈕後，會輸出：
This is b.js

CMD規範

• 思想
  在RequireJS的基礎上進行完善，自立門戶定爲CMD規範。
• 代表
  SeaJS
• 示例

//a.js
define(function(){
    console.log('a.js執行');
    return{
        hello: function(){
            console.log('This is a.js');
        }
    }
});
//b.js
define(function(){
    console.log('b.js執行');
    return {
        hello: function(){
            console.log('This is b.js');
        }
    }
});
//main.js
define(function(){
    console.log('main.js執行');
    var a = require('a');
    a.hello();
    $('#b').click(function(){
        var b = require('b');
        b.hello();
    })
});

上面的main.js執行會輸出如下結果：
main.js執行
a.js執行
This is a.js
注：a.js和b.js都會預先下載，但是b.js中的代碼卻沒有執行，因爲還沒有點擊按鈕。當點擊按鈕的時候，會輸出如下：
b.js執行
hello, b.js

CommonJS規範

• 思想
  服務器編程
• 代表
  NodeJS
• 用途
  NodeJS是CommonJS規範的實現，webpack也是以CommonJS的形式來書寫（node.js的模塊系統，就是參照CommonJS規範實現的）
• 特點
  1.所有代碼都運行在模塊作用域，不會污染全局作用域。
  2.模塊可以多次加載，但是只會在第一次加載時運行一次，然後運行結果就被緩存了，以後再加載，就直接讀取緩存結果。
  3.要想讓模塊再次運行，必須清除緩存。
  4.模塊加載的順序，按照其在代碼中出現的順序。同步加載
• 代表方法
  全局性方法 require() - 用於加載模塊
  CommonJS三大模塊:
  模塊標識(module)、模塊定義(exports) 、模塊引用(require)
  require()用來引入外部模塊；exports對象用於導出當前模塊的方法或變量，唯一的導出口；module對象就代表模塊本身。

異同

• AMD採用異步方式加載模塊，模塊的加載不影響它後面語句的運行。因而適用於瀏覽器；
• CMD在AMD基礎上改進，可按需加載，預先下載代碼，但並沒有立即執行，即“就近書寫，延遲執行”；
• CommonJS規範不適用於瀏覽器環境，適用於服務端，因爲所有的模塊都存放在本地硬盤，可以同步加載完成，等待時間就是硬盤的讀取時間；

2018/7/2 後續補充…