前端模塊化CommonJs、AMD(require.js)、CMD(sea.js)、ES6 Module的淺析

• CommonJS
• AMD(require.js)
• CMD(sea.js)
• ES6 Module

CommonJS

經過require加載模塊並執行，返回一個引用文件的export對象.

var test = require('./test');

該方式屬於同步加載，適用於服務器端。瀏覽器更適合異步加載方式。

AMD(require.js)

推崇的是依賴前置，提早執行。（一些該頁面不須要的模塊也加載了進來)

// 配置路徑
require.config({
    baseUrl: "js/lib",
    paths: {
        "jquery": "jquery.min",
        "underscore": "underscore.min"
    }
});

// 模塊加載
require(["jquery", "underscore"], function($, _) {
    $(body).css("background", "#6fc");
    var result = _.map([1, 2, 3], function() {
        return num * 3;
    });
})

// 自定義模塊,第一個參數爲可選，表示模塊依賴的模塊
define(["underscore"], function(_) {
    var minNumIndex = function(arr) {
        return arr.indexOf(_.min(arr))
    };
    return {
        minNumIndex: minNumIndex 
    };
})

CMD(sea.js)

推崇依賴就近，延遲執行。（也就是按需加載）

// 定義模塊 math.js
define(function(require, exports, module) {
    var $ = require("jquery.js");
    var add = function(a, b) {
        return a + b;
    };
    export.add = add;
});

// 加載模塊
seajs.use(["math.js"], function(math) {
    var sum = math.add(1, 2)
});

ES6 Module

export => 導出模塊
import => 引入模塊

// math.js
const NUM = 1;
const add = (a, b) => a + b;
export {
    add
}

// 引入模塊
import add from "./math";

CommonJS && ES6 Module

• CommonJS: 值拷貝,
• ES6 Module: 值引用
• CommonJS: 運行時加載。即加載整個模塊後，生成一個對象，而後從這個對象上讀取相應值或方法。
• ES6 Module: 編譯時加載。即import時指定加載某個輸出值，而非整個模塊。（按需加載）