17370845950

模块化是将程序拆分为独立功能单元以提升可维护性和复用性。JavaScript 模块化经历从命名空间到 CommonJS（Node.js 同步加载）和 ES Modules（ES6 标准，静态分析、异步加载）的演进。CommonJS 使用 require() 和 module.exports，适用于服务端；ESM 采用 import/export，支持 Tree Shaking，更适合浏览器。两者加载时机不同：CommonJS 运行时同步加载，ESM 编译时静态解析。ESM 需在 HTML 中设置 type="module"。循环依赖处理上，CommonJS 返回部分执行结果，ESM 通过模块记录更安全地解决。开发建议：浏览器优先使用 ESM，Node.js 可通过 .mjs 或 "type": "module" 启用 ESM；避免直接互操作，借助 Babel、Webpack、Vite 等工具转换。掌握模块机制有助于优化代码结构与构建流程。

在现代前端开发中，模块化是组织和管理代码的核心方式。JavaScript 的模块化发展经历了从全局变量、命名空间到如今标准化模块系统的演进。理解 JS 模块加载机制，有助于写出更清晰、可维护、可复用的代码。

什么是模块化？

模块化是指将程序拆分为独立、可复用的功能单元（即模块），每个模块封装自己的逻辑和数据，通过明确的接口与其他模块通信。这样可以避免命名冲突、提升代码可读性和维护性。

在 JS 中，一个模块通常是一个文件，其中定义的变量、函数默认不会暴露到全局作用域。

CommonJS：Node.js 的模块规范

CommonJS 是早期为服务器端 JavaScript 设计的模块系统，被 Node.js 广泛采用。

• 使用 require() 同步加载模块
• 通过 module.exports 或 exports 导出内容
• 适用于运行时环境稳定、文件本地存储的场景（如服务端）

示例：

// math.js
function add(a, b) {
  return a + b;
}
module.exports = { add };
// app.js
const { add } = require('./math');
console.log(add(2, 3)); // 5

ES Modules（ESM）：官方标准模块系统

ES6（ES2015）引入了原生模块语法 —— ES Modules，现已成为浏览器和现代 Node.js 的标准。

• 使用 import 和 export 关键字
• 支持静态分析，有利于 Tree Shaking（去除未使用代码）
• 异步加载设计，更适合浏览器环境
• 模块是单例的，多次导入同一模块不会重复执行

示例：

// utils.mjs
export const PI = 3.14;
export function square(x) {
  return x * x;
}
// main.mjs
import { PI, square } from './utils.mjs';
console.log(PI, square(4)); // 3.14 16

注意：在浏览器中使用 ESM 需设置 type="module"：

模块加载机制的关键差异

CommonJS 和 ESM 最大的区别在于加载时机和解析方式。

• CommonJS：同步加载，运行时动态加载，模块代码在 require() 调用时才执行
• ESM：异步加载，编译时静态分析，import 必须在文件顶层，且会被提升（hoisted）

• CommonJS 返回已执行部分的副本，可能拿到未初始化的值
• ESM 使用“模块记录”机制，能更安全地处理循环引用

实际开发中的模块使用建议

• 在浏览器项目中优先使用 ESM，利于打包优化和现代工具链支持
• Node.js 项目推荐使用 .mjs 扩展名或在 package.json 中设置 "type": "module"
• 注意 CommonJS 和 ESM 不能直接互操作，需通过兼容写法或构建工具转换
• 使用 Babel、Webpack、Vite 等工具可实现模块语法的转换与打包

基本上就这些。掌握 JS 模块加载机制，不仅能更好理解代码执行过程，也能合理选择和配置开发工具，提升项目质量。