如何通过立即执行函数 (IIFE) 在非模块化旧项目中隔离代码副作用-js教程-PHP中文网

IIFE是旧项目中零配置的作用域隔离手段，通过函数作用域切断变量声明、事件绑定、定时器等副作用外溢，确保不污染全局命名空间，所有声明默认私有，全局对象需显式传入。

如何通过立即执行函数 (iife) 在非模块化旧项目中隔离代码副作用

在非模块化旧项目中，IIFE 是最直接、零配置的作用域隔离手段。它不依赖构建工具或运行时环境，原生 JavaScript 即可生效，特别适合遗留系统、内嵌脚本、CMS 插件或未启用 ES 模块的浏览器环境。

核心目标：切断副作用外溢

副作用包括变量声明、事件监听绑定、定时器启动、全局属性修改、DOM 写入等。IIFE 通过创建新函数作用域，确保这些操作不会污染全局命名空间或干扰其他脚本。

所有 var/let/const/function 声明默认私有，外部无法访问
全局对象（如 window、document）需显式传入或引用，避免隐式依赖
初始化逻辑只执行一次，天然具备“一次性”语义

典型写法与参数传递技巧

推荐使用带参数的括号包裹式，兼顾可读性、调试友好性和环境适配能力：

(function(global, doc, undefined) {
  // 避免 undefined 被重写，且便于压缩工具识别
  'use strict';
<p>// 私有状态（不泄漏）
let _counter = 0;
const _cache = new Map();</p><p>// 副作用：仅在此作用域内注册事件
doc.addEventListener('DOMContentLoaded', function() {
console.log('IIFE 初始化完成');
});</p><p>// 副作用：启动轮询（但可通过闭包控制）
const timer = setInterval(() => {
_counter++;
if (_counter > 5) clearInterval(timer);
}, 1000);</p><p>// 仅暴露必要接口（可选）
global.MyLegacyWidget = {
getVersion: () => '1.2.0',
reset: () => { _counter = 0; }
};</p><p>})(typeof window !== 'undefined' ? window : this, document);
</p>

首参传 window 或 this，兼容 Node.js 环境（如服务端渲染片段）
显式传 document，避免多次查全局对象，也方便单元测试 mock
末尾加 undefined 形参，防止低版本浏览器中 undefined 被意外赋值

处理常见副作用场景

针对旧项目高频问题，给出对应模式：

循环中绑定正确索引：用 IIFE 捕获 var i 的当前值（ES6 之前必需）
for (var i = 0; i console.log(idx), 100); })(i); }
jQuery 插件封装：确保 $ 指向预期版本，不受其他库影响
(function($) { $.fn.highlight = function() { return this.css('background', '#ff0'); }; })(jQuery);
避免重复执行：检查全局标志位再运行初始化逻辑
if (!window.__MY_INIT_DONE) { /* 执行副作用 */ window.__MY_INIT_DONE = true; }