JavaScript 模块化规范详解：从 CommonJS 到 ES6 Module
1. AMD：异步模块定义
AMD（Asynchronous Module Definition）是一种专为浏览器环境设计的模块化规范，强调异步加载模块。由于传统脚本加载会阻塞页面渲染，AMD 通过提前声明依赖并异步加载的方式，避免了长时间等待造成的界面卡顿。
实现 AMD 规范的典型库是 RequireJS。它允许开发者将代码拆分为多个模块，并按需加载，从而提升网页性能和可维护性。
1.1 模块加载机制
使用 RequireJS 时，首先在 HTML 中引入 require.js 文件，并通过 data-main 属性指定入口模块：
<script src="js/require.js" data-main="js/main"></script>
随后，RequireJS 会自动加载主模块 main.js，并在其中通过 require() 函数加载依赖模块：
require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone) {
// 所有依赖加载完成后执行
console.log('DOM ready with libraries');
});
该函数接收两个参数：第一个是依赖模块数组，第二个是回调函数，在所有依赖加载完毕后执行。
1.2 配置模块路径
为了简化模块引用路径，可以使用 require.config() 方法进行自定义配置：
require.config({
paths: {
'jquery': 'lib/jquery.min',
'underscore': 'lib/underscore.min',
'backbone': 'lib/backbone.min'
}
});
1.3 兼容非标准模块
某些第三方库未遵循 AMD 规范（如 jQuery 插件），此时可通过 shim 配置模拟模块导出行为：
require.config({
shim: {
'underscore': {
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'jquery.scroll': {
deps: ['jquery'],
exports: 'jQuery.fn.scroll'
}
}
});
上述配置指定了模块的全局变量名及其依赖关系，使非规范代码也能被正确加载。
2. CMD：通用模块定义
CMD（Common Module Definition）由 SeaJS 提出，与 AMD 同样适用于浏览器端，但在执行时机和语法风格上有明显差异。
2.1 延迟加载与就近依赖
CMD 的核心理念是"尽可能懒"地执行依赖模块。其模块定义方式如下：
define(function(require, exports, module) {
var a = require('./a'); // 可在需要时才加载
a.doSomething();
// 中间可能有大量逻辑
var b = require('./b'); // 依赖书写位置灵活
b.doSomething();
});
相比之下，AMD 要求所有依赖必须在函数开头集中声明：
define(['./a', './b'], function(a, b) {
a.doSomething();
// ...
b.doSomething();
});
这种"依赖前置"的方式使得依赖关系一目了然，但缺乏灵活性。
3. CommonJS：服务端模块规范
CommonJS 是为服务器环境设计的模块系统，被 Node.js 广泛采用。其特点是同步加载模块，适合文件系统读取场景。
3.1 模块定义与使用
每个文件即一个独立模块，通过 exports 导出接口，通过 require() 引入其他模块：
// math.js
exports.add = function(x, y) {
return x + y;
};
// increment.js
var add = require('./math').add;
exports.increment = function(val) {
return add(val, 1);
};
// index.js
var inc = require('./increment').increment;
console.log(inc(5)); // 输出 6
由于 Node.js 运行在服务端，模块同步加载不会造成阻塞问题，因此 CommonJS 不支持异步加载。
4. UMD 与 ES6 Module
4.1 UMD：兼容多种环境
UMD（Universal Module Definition）并非独立规范，而是一种兼容策略，使模块能在 AMD、CommonJS 和全局变量环境下均可运行。常见写法如下：
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else if (typeof module === 'object' && module.exports) {
module.exports = factory(require('jquery'));
} else {
root.returnExports = factory(root.jQuery);
}
}(this, function ($) {
// 模块逻辑
return function() {};
}));
4.2 ES6 Module：语言级支持
ES6 在语法层面原生支持模块化，使用 import 和 export 关键字：
// lib/math.js
export function sum(x, y) {
return x + y;
}
export const pi = 3.141593;
// app.js
import { sum, pi } from './lib/math';
console.log(sum(pi, pi)); // 6.283186
也可使用命名空间导入：
import * as math from './lib/math';
console.log(math.sum(math.pi, math.pi));
默认导出与导入：
// lib/default.js
export default function(x) {
return Math.exp(x);
}
// app.js
import exp from './lib/default';
console.log(exp(1));
此外还支持重导出：
// lib/mathplusplus.js
export * from './math';
export const e = 2.71828182846;
export default (x) => Math.exp(x);
ES6 模块采用静态分析机制，构建时即可确定依赖关系，有利于 Tree Shaking 等优化手段。
