从混沌到秩序，一段代码的自我救赎
在Web开发的洪荒时代，JavaScript只是个“表单验证工具”。那时的代码是这样的：
// 全局变量满天飞 function validateForm() { /* ... / } function showPopup() { / ... / } function handleClick() { / ... */ } 所有函数都堆在全局作用域，命名冲突、依赖混乱、维护困难成了前端开发的“日常噩梦”。随着Web应用越来越复杂，模块化成为了刚需，一场技术革命悄然开始。
第一阶段：原始封装（2000年代初）
- 命名空间模式
var MyApp = { utils: { formatDate: function() { /* ... / } }, components: { Slider: function() { / ... */ } } }; 通过对象嵌套避免全局污染，但内部状态依然暴露无遗，外部可随意修改MyApp.utils.formatDate。
- IIFE（立即执行函数）
var Counter = (function() { var privateCount = 0; // 私有变量
function increment() { privateCount++; }
return { add: increment // 暴露公共接口 }; })();
Counter.add(); // 安全调用 利用闭包创建私有作用域，真正实现了数据隐藏，成为jQuery时代的标配。
第二阶段：规范涌现（2009-2011）
- CommonJS：服务端的春天 Node.js的诞生催生了CommonJS规范：
// math.js module.exports = { add: (a, b) => a + b };
// main.js const math = require('./math.js'); console.log(math.add(1, 2)); // 3 同步加载机制在服务端游刃有余，但在浏览器中会导致阻塞。
- AMD：浏览器的救星 RequireJS实现的AMD规范解决异步加载痛点：
// 定义模块 define(['jquery'], function() { return { init: function() { ('#app').fadeIn(); } }; });
// 加载模块 require(['slider'], function(slider) { slider.init(); }); 依赖前置的特点让模块加载可并行优化。
- CMD：更自然的写法 Sea.js提出的CMD倡导就近依赖：
define(function(require, exports) { // 运行时按需加载 var utils = require('./utils'); exports.sayHello = () => utils.log('Hello'); }); 更符合开发直觉，但最终被AMD兼容。
第三阶段：大一统时代（2015至今） ES Modules：官方的终极答案
// lib.mjs export const PI = 3.14; export const circleArea = r => PI * r * r;
// app.mjs import { circleArea } from './lib.mjs'; console.log(circleArea(5)); // 78.5 静态分析能力让Tree-shaking（无用代码消除）成为可能，现代框架的基石从此奠定。
为什么ESM是未来？
- 浏览器原生支持：
- 静态结构：编译时确定依赖关系，利于优化
- 循环引用安全：动态引用绑定避免CommonJS的缓存陷阱
- 跨平台统一：Node.js从12版起支持ESM 技术演进的本质：从IIFE的手工作坊 → CommonJS/AMD的标准化流水线 → ESM的智能工厂。
图片
每一次进化都在解决三个核心问题：依赖管理、作用域隔离、代码复用。
