从IIFE到ESM，JavaScript模块化经历了由手动封装到原生标准的演进。早期通过IIFE隔离作用域，解决全局污染；Node.js推动CommonJS实现服务端同步加载；AMD针对浏览器异步加载设计，但语法繁琐；最终ES6引入ESM，支持静态分析、tree-shaking和动态导入，成为跨平台标准，提升代码可维护性与工程化能力，现已被现代浏览器和Node.js广泛支持，构建生态围绕其优化。理解该演变有助于掌握前端架构设计逻辑。
JavaScript 的模块化发展是一个逐步解决代码组织、依赖管理和作用域污染问题的过程。早期的 JavaScript 缺乏原生模块机制，开发者通过各种模式模拟模块行为，直到现代 ES 模块（ESM）成为标准。
1. IIFE：手动创建私有作用域
在没有模块系统时，IIFE（Immediately Invoked Function Expression） 是最常用的模块模拟方式。它通过立即执行函数来隔离变量，避免污染全局作用域。
例如：
(function() {
var privateVar = ‘仅内部可用’;
window.myModule = {
publicMethod: function() {
console.log(privateVar);
}
};
})();
这种方式能实现基本的封装，但无法管理依赖，也不支持按需加载，大型项目中难以维护。
立即学习“Java免费学习笔记（深入）”；
2. CommonJS：服务端模块的兴起
Node.js 采用 CommonJS 规范，引入 require 和 module.exports 实现同步模块加载。
一个典型的 CommonJS 模块：
// math.js
function add(a, b) { return a + b; }
module.exports = { add };
// app.js
const { add } = require(‘./math’);
console.log(add(2, 3));
优点是语法简单，适合服务器环境，但由于同步加载，在浏览器中性能不佳，需要工具打包才能使用。
3. AMD 与 RequireJS：浏览器异步加载尝试
AMD（Asynchronous Module Definition） 针对浏览器环境设计，支持异步加载模块，典型代表是 RequireJS。
示例：
// module.js
define([‘dependency’], function(dep) {
return {
doSomething: function() { dep.method(); }
};
});
// 使用
require([‘module’], function(mod) {
mod.doSomething();
});
虽然解决了浏览器异步加载问题，但语法较复杂，开发体验不如 CommonJS 流畅，逐渐被更优方案替代。
4. ESM：原生模块标准落地
ECMAScript 2015（ES6）正式引入 ES 模块（ESM），提供 import 和 export 语法，成为语言级标准。
例如：
// math.mjs
export const add = (a, b) => a + b;
export default function subtract(a, b) { return a – b; }
// app.mjs
import subtract, { add } from ‘./math.mjs’;
console.log(add(2, 3), subtract(5, 2));
ESM 支持静态分析、树摇（tree-shaking）、动态导入（import()）和跨平台兼容。现代浏览器原生支持，Node.js 也已全面支持 .mjs 或 package.json 中 type: “module” 的形式。
基本上就这些。从 IIFE 到 ESM，JavaScript 模块化经历了从手工模拟到标准化、从运行时加载到编译时解析的演进，极大提升了代码可维护性和工程化能力。现在 ESM 已成为主流，构建工具和运行环境都在围绕它优化。不复杂但容易忽略的是，理解这些演变有助于更好掌握现代前端架构的设计逻辑。
以上就是JavaScript 的模块化历程：从 IIFE 到 ESM 经历了哪些演变？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1523792.html
微信扫一扫 
支付宝扫一扫 
