JS的各種模塊化規范

AMD CMD CommonJs UMD ES6 一路演進

AMD

• 異步模塊定義規范（Asynchronous Module Definition），人如其名，是異步加載的
• 是運行於瀏覽器之上的
• 此規范只有一個 API，即 define 函數：define(id?, dependencies?, factory);
• requireJs 就是它的實現
• 示例：

// moudle-a.js
define('moudleA', function() { 
    return {
        a: 1
    }
});

// moudle-b.js
define(['moudleA'], function(ma) {
    var b = ma.a + 2;

    return {
        b: b
    }
});

CMD

• 通用模塊定義規范（Common Module Definiton）
• 更簡單，異步加載腳本，兼容 Nodejs
• 定義格式: define(factory);
• SeaJS 是它的實現
• 示例:

// moudle-a.js
define(function(require, exports, module) {

    module.exports = { 
        a: 1 
    };

});

// moudle-b.js
define(function(require, exports, module) {

    var ma = require('./moudle-a');
    var b = ma.a + 2;
    module.exports = { 
        b: b 
    };
});

CommonJs

• 通常用於服務端的 Nodejs 中
• 每一個文件就是一個模塊
• module 代表當前模塊，module.exports 是對外的接口; require 方法用於加載模塊
• 示例：

//moudle-a.js
moudle.exports = {
    a: 1
};

//moudle-b.js
var ma = require('./moudle-a');
var b = ma.a + 2;
module.exports ={
    b: b
};

UMD

• 通用模塊定義規范（Universal Module Definition）
• 它可以通過 運行時或者編譯時 讓同一個代碼模塊在使用 CommonJs、CMD 甚至是 AMD 的項目中運行
• 它沒有自己的專有規范，它是在定義模塊的時候檢測當前使用環境和模塊的定義方式，將各種模塊化定義方式轉化為同樣一種寫法
• 示例（組件庫 xmh 的 webpack umd 導出為例）:

function(e, t) {
    "object" == typeof exports && "object" == typeof module 
    ? module.exports = t() 
    : "function" == typeof define && define.amd 
        ? define([], t) 
        : "object" == typeof exports 
            ? exports.xmh = t() 
            : e.xmh = t()
} (window, (function() {
    // todo
}))

ES6 模塊

• ES6 終於從語言層面定義了模塊化規范
• import 加載模塊，export 導出模塊
• 示例：

//module-a.js
export default {
    a: 1
}

//module-b.js
import { a } from './module-a'
export const b = a + 2