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.jsfunction add(a, b) { return a + b;}module.exports = { add };// app.jsconst { add } = require('./math');console.log(add(2, 3)); // 5
CommonJS 的缺点是不适用于浏览器环境，因为同步加载会阻塞页面渲染。
立即学习“Java免费学习笔记（深入）”；
AMD：异步加载，面向浏览器
AMD（Asynchronous Module Definition）由 RequireJS 推广，专为浏览器设计，支持异步加载模块，避免阻塞页面。
核心特点：
使用 define 定义模块依赖前置，提前声明所有依赖异步加载，适合网络环境示例：
// math.jsdefine([], function() { function multiply(a, b) { return a * b; } return { multiply };});// main.jsdefine(['./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.jsexport const add = (a, b) => a + b;export const PI = 3.14;// 或默认导出// export default function() { ... }
// app.jsimport { 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模块化的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1538215.html
微信扫一扫 
支付宝扫一扫 
