前端模塊化：AMD、CMD、ES六、CommonJS

一、CommonJs

Nodejs是Commonjs的主要實踐者，它有四個重要的環境變量爲模塊化提供支持。module、export、require、global。在實際的使用中，使用module.exports定義當前模塊對外輸出接口，用require加載模塊。

// 定義模塊math.js
var basicNum = 0;
function add(a, b) {
  return a + b;
}
module.exports = { //在這裏寫上須要向外暴露的函數、變量
  add: add,
  basicNum: basicNum
}

// 引用自定義的模塊時，參數包含路徑，可省略.js
var math = require('./math');
math.add(2, 5);

// 引用核心模塊時，不須要帶路徑
var http = require('http');
http.createService(...).listen(3000);
複製代碼

Commonjs採用同步的方式進行加載模塊，在服務端，模塊文件存儲在本地磁盤，讀取很快，因此這樣是不會有問題的，可是在瀏覽器中，因爲網絡等緣由，更合理的方法是使用異步加載的方法。

二、AMD和require.js

AMD採用異步的模塊加載機制，它的加載不影響後面文件的加載，全部依賴這個模塊的語句都放在一個回調函數裏面，等到全部都加載完成，才執行這個回調函數，AMD是在require.js推廣過程的產物，推崇依賴前置，提早執行。即便沒有用到的模塊，也提早加載了。requie採用require.config()定義模塊路徑，define()定義依賴模塊，使用require加載模塊。

/** 網頁中引入require.js及main.js **/
<script src="js/require.js" data-main="js/main"></script>

/** main.js 入口文件/主模塊 **/
// 首先用config()指定各模塊路徑和引用名
require.config({
  baseUrl: "js/lib",
  paths: {
    "jquery": "jquery.min",  //實際路徑爲js/lib/jquery.min.js
    "underscore": "underscore.min",
  }
});
// 執行基本操做
require(["jquery","underscore"],function($,_){
  // some code here
});
複製代碼

三、CMD和sea.js

CMD是另外一種模塊加載機制，它和AMD很像，不一樣點在於，AMD採用依賴前置，提早加載，CMD採用依賴就近，延遲執行，CMD是在sea.js推廣過程的產物。

/** AMD寫法 **/
define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) { 
     // 等於在最前面聲明並初始化了要用到的全部模塊
    a.doSomething();
    if (false) {
        // 即使沒用到某個模塊 b，但 b 仍是提早執行了
        b.doSomething()
    } 
});

/** CMD寫法 **/
define(function(require, exports, module) {
    var a = require('./a'); //在須要時申明
    a.doSomething();
    if (false) {
        var b = require('./b');
        b.doSomething();
    }
});

/** sea.js **/
// 定義模塊 math.js
define(function(require, exports, module) {
    var $ = require('jquery.js');
    var add = function(a,b){
        return a+b;
    }
    exports.add = add;
});
// 加載模塊
seajs.use(['math.js'], function(math){
    var sum = math.add(1+2);
});
複製代碼

四、ES6模塊系統

ES6在語言標準層面上，實現了模塊功能，意在實現服務器端和瀏覽器端統一的模塊解決方法，ES6的模塊系統，主要右兩個命令組成，export和import，export規範對外的接口，import引用其餘模塊功能。ES6模塊不是對象，import命令背會javaScript引擎靜態分享，在編譯時引用模塊，而不是在運行時。

/** 定義模塊 math.js **/
var basicNum = 0;
var add = function (a, b) {
    return a + b;
};
export { basicNum, add };

/** 引用模塊 **/
import { basicNum, add } from './math';
function test(ele) {
    ele.textContent = add(99 + basicNum);
}
複製代碼

五、ES6模塊系統和Commonjs的差別

1. ES6模塊系統輸出的是值得引用，而Commonjs輸出的是值的拷貝。

• Commonjs輸出的是值得拷貝。一旦輸出，模塊內部的變化將不會影響到這個輸出值。
• ES6模塊系統，是javaScript引擎的靜態分析，使用import引用產生一個引用，在真正加載到這個引用的時候纔會去模塊裏面加載值。

2. ES6模塊系統是編譯時輸出接口，Commonjs是在加載時輸出。

• 運行時加載：Commonjs是一個對象，即在輸入時先加載整個模塊，生成一個對象，而後在從這個對象讀取方法。
• 編譯時加載：ES6模塊系統不是對象，而是經過export顯示的輸出指定的代碼。import時採用靜態命令形式。記在import能夠指定某個輸出值，而不是整個文件。

轉載：juejin.im/post/5aaa37…