JavaScript模块化是将代码拆分为独立、可复用、作用域隔离的单元，旨在解决变量污染、依赖混乱、维护困难和协作低效等问题，是中大型项目持续开发的基础；常见方式包括IIFE、CommonJS、AMD和ES Module，当前推荐使用原生支持、静态解析、Tree-shaking友好的ES Module。
JavaScript模块化是把代码拆分成独立、可复用、作用域隔离的单元，核心目的是解决变量污染、依赖混乱、维护困难和协作低效等问题。模块化不是“锦上添花”，而是中大型项目能持续开发的基础。
常见的模块化方法
1. IIFE（立即执行函数表达式）——最原始的“伪模块”
通过函数自执行创建私有作用域，用闭包暴露接口：
const mathUtils = (function() {
const PI = 3.14159;
function add(a, b) { return a + b; }
return { add }; // 只暴露 add
})();
✅ 优点：兼容性极好，无需构建工具
❌ 缺点：无依赖声明、无自动加载、手动管理顺序、无法静态分析
2. CommonJS（Node.js 默认规范）
使用 require 和 module.exports，同步加载，适合服务端：
立即学习“Java免费学习笔记（深入）”；
// utils.js
module.exports = { sum: (a, b) => a + b };
// main.js
const { sum } = require('./utils');
✅ 优点：语义清晰、天然支持路径解析、生态成熟（npm）
❌ 缺点：同步加载不适用于浏览器（需打包工具如 Webpack 转译）
3. AMD（Asynchronous Module Definition）
为浏览器异步加载设计，代表是 RequireJS：
define(['./utils'], function(utils) {
console.log(utils.sum(2, 3));
});
✅ 优点：支持异步、依赖前置声明
❌ 缺点：写法冗长、现代前端已基本淘汰
4. ES Module（ESM，ECMAScript 标准）——当前推荐方式
原生支持，使用 import/export，编译时静态解析：
// math.js
export const add = (a, b) => a + b;
export default { version: '1.0' };
// app.js
import calc, { add } from './math.js';
✅ 优点：浏览器原生支持（<script type="module">）、Tree-shaking 友好、静态可分析、语法简洁
❌ 缺点：不支持动态路径（import() 是例外）、默认严格模式、不能直接运行在旧版 Node 中（需 .mjs 或 type=module）
为什么必须模块化？
没有模块化，JavaScript 项目会快速陷入以下困境：
-
全局污染：所有 var/function 默认挂载到 global/window，极易命名冲突（比如两个库都定义
log()） -
依赖不可控：脚本加载顺序靠人肉维护（
<script>标签顺序），错一个就报错 - 复用成本高：想用一段验证逻辑？得复制粘贴、改变量名、祈祷没漏掉依赖
- 无法按需加载：首页加载了支付模块的全部代码，哪怕用户根本没点“去付款”
- 调试与测试困难：函数行为受外部变量影响，边界模糊，单元测试难写
模块化带来的实际收益
- 可维护性提升：修改一个功能只影响对应模块，不牵一发而动全身
- 协作更顺畅：团队成员并行开发不同模块，通过接口契约协作，无需了解内部实现
- 构建优化成为可能：Webpack/Vite 能做代码分割、懒加载、Tree-shaking（自动剔除未使用的导出）
- 利于测试与模拟：可以单独导入模块、Mock 依赖、精准覆盖逻辑分支
怎么选？一句话建议
新项目统一用 ES Module（.js 文件 + type="module" 或现代构建工具）；
纯 Node CLI 工具可继续用 CommonJS；
老项目迁移优先封装为 ESM 兼容格式；
IIFE 仅用于超轻量场景（如单页小工具、CDN 微脚本）。
