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