javascript早期通过iife实现模块化,利用函数作用域隔离变量避免全局污染,通过return对象模拟导出,传入参数模拟依赖注入,并构成umd模式基础。

JavaScript 中早期通过 IIFE(立即执行函数表达式)实现模块化,核心是利用函数作用域隔离变量,避免全局污染,并模拟“导出”与“导入”行为。
作用域隔离:防止变量泄露到全局
IIFE 创建一个独立的执行上下文,内部声明的变量、函数不会暴露到全局作用域。这是模块化的基础前提。
- 写法常见为:(function() { /* 模块逻辑 */ })(); 或 (function() { ... }());
- 所有 var/let/const、函数声明都仅在该函数内有效,外部无法直接访问
- 相比直接写脚本,IIFE 天然解决了命名冲突和意外覆盖 window 属性的问题
模拟模块导出:返回对象作为公共接口
IIFE 本身不支持 export,但可通过 return 一个对象,显式暴露需要被外部使用的成员。
- 示例:(function() { return { init: function() {}, utils: {...} }; })(); —— 但这样返回值未被接收,实际需赋值给变量
- 更典型写法:var MyModule = (function() { var privateVar = 'secret'; return { publicMethod: function() { return privateVar; } }; })();
- 外部调用:MyModule.publicMethod();,而 privateVar 不可访问
模拟模块依赖:传入全局对象作为参数
IIFE 支持参数传入,常用于“注入”依赖(如 jQuery、window、其他模块),实现松耦合和可测试性。
- 写法:(function($, utils) { /* 使用 $ 和 utils */ })(jQuery, MyUtils);
- 参数名即为模块内使用的局部标识符,不影响外部变量名,也便于压缩工具处理(如将 $ 压缩为 a)
- 依赖显式声明,比隐式读取全局变量更清晰、更安全(例如防错:若 jQuery 未加载,会立即报 ReferenceError)
兼容多种环境:UMD 的雏形
IIFE 是 UMD(Universal Module Definition)模式的基础结构,能适配浏览器全局、AMD、CommonJS 等场景。
- 典型 UMD 包裹形式会先检测 define(AMD)、module.exports(Node.js),都不满足时回退到 IIFE + 全局挂载
- 例如:typeof module !== 'undefined' ? (module.exports = factory()) : (this.MyLib = factory());
- 这种写法让同一份代码可在 script 标签、RequireJS、Webpack(开启 libraryTarget: 'umd')中运行
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











