17370845950

JavaScript模块化开发主要有四种方法：1. CommonJS（Node.js默认，同步加载，导出值拷贝）；2. AMD（浏览器异步设计，依赖前置）；3. CMD（就近依赖，延迟加载）；4. ES6 Module（标准规范，静态分析、实时绑定、原生支持，推荐新项目使用）。

JavaScript模块化开发主要有四种方法：CommonJS、AMD、CMD 和 ES6 Module。

CommonJS（Node.js 默认）

主要用于服务器端，通过 require() 加载模块，module.exports 或 exports 导出接口。每个文件是一个独立模块，模块加载是同步的。

• 适合 Node.js 环境，不支持浏览器原生运行
• 导出的是值的拷贝，非实时绑定
• 常见于 npm 包和后端逻辑封装

AMD（Asynchronous Module Definition）

为浏览器异步加载设计，代表实现是 RequireJS。使用 define() 定义模块，require() 加载依赖。

• 依赖前置，模块定义时就声明所有依赖
• 适合早期大型前端项目，需构建工具配合
• 现在已较少直接使用，被现代打包工具替代

CMD（Common Module Definition）

由 SeaJS 提倡，强调“就近依赖”，即在用到时才 require()，更符合直觉。

• 执行顺序更可控，依赖延迟加载
• 与 AMD 对比更轻量，但生态支持弱
• 实际项目中基本被 ES 模块取代

ES6 Module（标准规范，现代主流）

ECMAScript 2015 正式引入，使用 import 和 export，静态分析、编译时确定依赖关系。

• 浏览器原生支持（需 type="module"），Node.js 从 v12+ 支持 .mjs 或 "type": "module"
• 导出绑定是实时的（live binding），修改导出值会影响所有引用处
• 支持 tree-shaking，利于打包优化
• 推荐新项目统一使用，搭配 Webpack/Vite 等工具可兼容旧环境

不复杂但容易忽略：ES6 Module 的 import 必须写在顶层作用域，不能放在 if 或函数里；动态导入可用 import() 函数实现。