前端模块化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时指定加载某个输出值，而非整个模块。（按需加载）