AMD、CMD 和 ES6 Module 的区别与演进

为什么需要模块化？

在复杂的前端项目中，如果不进行模块化，会面临诸多问题：

命名冲突：多个文件中的变量容易覆盖，污染全局作用域。
依赖混乱 ：手动管理<script>标签的加载顺序，依赖关系难以维护。
代码复用困难：难以抽离和复用公共代码。

模块化就是为了解决这些问题，它允许我们将代码拆分成独立的、可复用的模块，并显式地声明 彼此之间的依赖关系。

演进历程：从"原始社会"到"现代文明"

原始阶段 ：全局函数模式，<script>标签堆砌。
命名空间模式：用对象封装模块，减少全局变量，但本质仍是全局对象。
IIFE模式：使用立即执行函数创建私有作用域，是早期简单的模块化方案。
社区规范时代 ：AMD 和CMD登场，提供了模块定义和加载的规范及库。
现代标准时代 ：ES6语言层面引入了模块系统，一统江湖。

AMD (Asynchronous Module Definition)

核心理念 ： "依赖前置，提前执行"

代表库 ：RequireJS
出现背景 ：主要为浏览器环境设计，强调模块的异步加载。

语法示例：

javascript 复制代码

// 1. 定义模块 (math.js)
define(['dependencyA', 'dependencyB'], function (depA, depB) {
  // 依赖项在数组中最前面声明
  const add = (a, b) => depA.round(a) + depB.round(b); // 假设depA是lodash

  // 返回模块的对外接口
  return {
    add: add
  };
});

// 2. 配置路径 (通常在主入口文件，如main.js)
require.config({
  paths: {
    'dependencyA': 'lib/lodash.min',
    'dependencyB': 'lib/my-depb.min',
    'math': 'modules/math'
  }
});

// 3. 使用模块
require(['math'], function (math) {
  console.log(math.add(10, 20));
});

特点：

优点：依赖关系清晰直观；适合浏览器异步环境；不阻塞页面渲染。
缺点：即使不需要的依赖也会提前加载和执行。

CMD (Common Module Definition)

核心理念 ： "依赖就近，延迟执行"

代表库 ：Sea.js (由阿里团队推出)
出现背景：尝试吸收AMD和CommonJS的优点，更符合开发时的书写习惯。

语法示例：

javascript 复制代码

// 定义模块 (math.js)
define(function (require, exports, module) {
  // 在需要的地方，就近引入依赖
  const depA = require('dependencyA'); // 同步引入

  const add = (a, b) => {
    // 在函数内部需要时才引入（理论上，但很少这么用）
    // const depB = require('dependencyB');
    return depA.round(a) + depA.round(b);
  };

  // 方式1：通过 exports 对象添加对外属性
  exports.add = add;

  // 方式2：也可以通过 module.exports 整体赋值
  // module.exports = { add };
});

// 使用模块
seajs.use(['math'], function (math) {
  console.log(math.add(5, 15));
});

特点：

优点：依赖延迟加载，更节省资源；写法更接近Node.js的CommonJS风格。
缺点：依赖关系不够直观，需要阅读整个模块代码才能确定。

ES6 Module (现代标准)

核心理念 ： "语言层面支持，编译时确定"

代表：JavaScript语言标准 (ES2015)
现状：现代前端开发的绝对主流和首选。所有现代浏览器都原生支持，Node.js也正式支持。

核心语法 ：import 和 export

语法示例：

javascript 复制代码

// 1. 定义并导出模块 (math.js)
// 命名导出 (每个模块多个)
export const PI = 3.14159;
export function multiply(x, y) {
  return x * y;
}

// 默认导出变量的引用列表 (每个模块一个)
const myMath = {
  PI,
  multiply
};
export default myMath;


// 2. 导入模块 (main.js)
// 导入默认导出的内容，名称可自定义
import myMath from './math.js';

// 导入命名导出的内容，名称必须匹配，可用 as 重命名
import { PI, multiply as mul } from './math.js';

// 整体导入所有命名导出到一个对象
import * as mathUtils from './math.js';

console.log(myMath.PI);
console.log(mul(2, mathUtils.PI));


// 3. 动态导入 (按需加载)
// import() 返回一个Promise
button.addEventListener('click', async () => {
  const module = await import('./path/to/module.js');
  module.doSomething();
});

特点：

静态化 ：依赖关系在代码编译阶段就能确定，这使得Tree Shaking（摇树优化）成为可能，可以移除未使用的代码，极大优化打包体积。
只读引用 ：import导入的是值的只读引用，而不是拷贝。修改原始模块中的值，所有引入的地方都会看到变化。
异步加载 ：通过import()函数实现动态导入，完美替代AMD/CMD的异步功能。
官方标准：是语言的一部分，无需引入第三方库。

对比总结

方面	AMD (RequireJS)	CMD (Sea.js)	ES6 Module
核心理念	依赖前置，提前执行	依赖就近，延迟执行	依赖前置，编译时确定
执行时机	提前加载并执行所有依赖	延迟加载，执行到`require`语句时才加载和执行依赖	编译时加载，运行时只读引用
代表库	RequireJS	Sea.js	语言原生支持
语法关键词	`define`, `require`	`define`, `require`	`import`, `export`, `export default`
异步加载	原生支持	原生支持	通过 `import()` 函数支持
静态分析	难，依赖是动态字符串	难，依赖是动态字符串	容易，依赖是静态路径，利于Tree Shaking和优化
现状	历史产物，基本淘汰	历史产物，基本淘汰	绝对主流，现代开发标准

最佳实践与学习建议

专注现代标准 ：彻底学习和使用 ES6 Module。这是现在和未来的方向。
使用构建工具 ：在实际项目中，我们使用 Webpack 、Vite 、Rollup 等工具将ES6模块代码打包、转换、优化，使其兼容所有浏览器。
理解历史：只需了解AMD和CMD是模块化演进中的重要一环即可，无需深究其细节，除非维护老项目。
掌握关键特性：

- export / export default
- import / import * as / as rename
- 动态导入 import()

利用优化 ：享受ES6 Module带来的Tree Shaking 、作用域提升等优化红利，写出更高效、更精简的代码。