前端模块化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时指定加载某个输出值,而非整个模块。(按需加载)
posted @ 2019-03-10 23:11  miku561  阅读(216)  评论(0编辑  收藏  举报