JS模块化：CommonJS, AMD, CMD, ES6 Module详解_javascript模块化

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 虽解决了浏览器异步加载问题，但写法相对复杂，依赖前置有时不够灵活。

Rose.ai

一个云数据平台，帮助用户发现、可视化数据

74

查看详情

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 生态。

以上就是JS模块化：CommonJS, AMD, CMD, ES6 Module详解_javascript模块化的详细内容，更多请关注php中文网其它相关文章！