Commonjs、AMD、CMD 和 es6 Module 是 javaScript 四大模块化规范。CommonJS 用于服务端,同步加载,通过 require 和 module.exports 实现;AMD 面向浏览器,异步加载,依赖前置,使用 define 定义模块;CMD 提倡就近依赖与延迟执行,由 SeaJS 推广;ES6 Module 是官方标准,支持静态分析与 tree-shaking,使用 import 和 export,已成为现代开发首选。当前推荐新项目采用 ES6 Module,而理解其他规范有助于维护旧代码和构建工具配置。

javascript 模块化是现代前端开发的基础。随着项目规模扩大,代码组织变得尤为重要,模块化帮助开发者将功能拆分、解耦、复用。下面详细介绍四种主流的 JS 模块化规范:CommonJS、AMD、CMD 和 ES6 Module,讲清它们的设计理念、使用方式和适用场景。
CommonJS:服务端模块化的代表
CommonJS 是早期为了解决服务端 JavaScript(如 Node.js)模块化问题而提出的规范。它采用同步加载模块的方式,适合服务器环境,因为文件都存在本地磁盘上,读取速度快。
核心特点:
- require 引入模块
- module.exports 或 exports 导出内容
- 模块是运行时加载,同步执行
示例:
// math.js function add(a, b) { return a + b; } module.exports = { add }; <p>// app.js const { add } = require('./math'); console.log(add(2, 3)); // 5
CommonJS 的缺点是不适用于浏览器环境,因为同步加载会阻塞页面渲染。
立即学习“Java免费学习笔记(深入)”;
AMD:异步加载,面向浏览器
AMD(Asynchronous Module Definition)由 RequireJS 推广,专为浏览器设计,支持异步加载模块,避免阻塞页面。
核心特点:
- 使用 define 定义模块
- 依赖前置,提前声明所有依赖
- 异步加载,适合网络环境
示例:
// math.js define([], function() { function multiply(a, b) { return a * b; } return { multiply }; }); <p>// main.js define(['./math'], function(math) { console.log(math.multiply(3, 4)); // 12 });
AMD 虽解决了浏览器异步加载问题,但写法相对复杂,依赖前置有时不够灵活。
CMD:按需加载,推崇懒执行
CMD(Common Module Definition)由 SeaJS 提出,融合了 CommonJS 和 AMD 的优点,强调“就近依赖”和“延迟执行”。
核心特点:
- 使用 define 定义模块
- 依赖在需要时才加载,更贴近 CommonJS 风格
- 模块在调用时才执行,非定义时
示例:
define(function(require, exports, module) { // 只在需要时引入 const $ = require('jquery'); $('#app').html('CMD works!'); });
CMD 更符合直觉,但因 SeaJS 社区影响力下降,现已较少使用。
ES6 Module:官方标准,现代开发首选
ES6 Module 是 ecmascript 2015 正式引入的模块系统,已成为现代 JavaScript 的标准。它支持静态分析、tree-shaking,并被浏览器和构建工具广泛支持。
核心特点:
- 使用 import 和 export 语法
- 静态编译,支持编译时优化
- 异步加载(浏览器中),也可配合打包工具使用
示例:
// math.js export const add = (a, b) => a + b; export const PI = 3.14; <p>// 或默认导出 // export default function() { ... }</p><p>// app.js import { add, PI } from './math.js'; console.log(add(2, 3), PI); // 5 3.14
ES6 Module 支持动态导入 import() 实现按需加载,兼顾性能与灵活性。
基本上就这些。CommonJS 仍在 node.js 中广泛使用;AMD/CMD 属于历史过渡方案;ES6 Module 是当前和未来的标准,推荐新项目统一采用。理解这些模块化方案,有助于阅读旧代码、配置构建工具,以及深入掌握 JavaScript 生态。