红宝书第二十一讲：详解JavaScript的模块化（CommonJS与ES Modules）

---

红宝书第二十一讲：详解JavaScript的模块化（CommonJS与ES Modules）

资料取自《JavaScript高级程序设计（第5版）》。
查看总目录：红宝书学习大纲

---

一、模块化的意义：分而治之

模块化解决代码依赖混乱、命名冲突问题，核心思想：

• 每个文件为一个独立模块
• 导出（export）需要暴露的功能
• 导入（import）其他模块的功能

---

二、CommonJS：服务端的模块化方案

CommonJS设计用于服务器环境（如Node.js），特性：

• 同步加载 → 适合本地文件系统 ¹
• 使用require()导入，module.exports导出 ²

示例1：导出对象

// math.js
function add(a, b) { return a + b; }
module.exports = { add }; // 导出模块功能 [^5]

// main.js
const math = require('./math.js'); // 导入模块 [^6]
console.log(math.add(3, 5)); // 输出8

示例2：导出类或实例

// User.js
class User { /* ... */ }
module.exports = User; // 导出类 [^5]

// app.js
const User = require('./User.js');
const user = new User();

关键特点：导出的是对象或值的拷贝，多次导入会缓存结果 ³

---

三、ES Modules（ESM）：原生的浏览器支持

ES Modules是JavaScript官方标准，特性：

• 浏览器直接支持（需要