JavaScript 的模块化历程：从 IIFE 到 ESM 经历了哪些演变？-js教程-PHP中文网

JavaScript 的模块化历程：从 IIFE 到 ESM 经历了哪些演变？

幻影之瞳

发布： 2025-09-27 15:02:01

原创

711人浏览过

从IIFE到ESM，JavaScript模块化经历了由手动封装到原生标准的演进。早期通过IIFE隔离作用域，解决全局污染；Node.js推动CommonJS实现服务端同步加载；AMD针对浏览器异步加载设计，但语法繁琐；最终ES6引入ESM，支持静态分析、tree-shaking和动态导入，成为跨平台标准，提升代码可维护性与工程化能力，现已被现代浏览器和Node.js广泛支持，构建生态围绕其优化。理解该演变有助于掌握前端架构设计逻辑。

javascript 的模块化历程：从 iife 到 esm 经历了哪些演变？

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));

优点是语法简单，适合服务器环境，但由于同步加载，在浏览器中性能不佳，需要工具打包才能使用。

职优简历

一款专注于互联网从业者的免费简历制作工具

233

查看详情

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 经历了哪些演变？的详细内容，更多请关注php中文网其它相关文章！