JS的各种模块化规范

2022-08-26 18:36:45

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

JS的各种模块化规范