本文详解如何正确编写条件判断，使 IIFE 仅在 index.html、other.html 或根路径 / 等特定页面执行，重点纠正逻辑运算符误用导致的失效问题，并提供可扩展的正则匹配方案。
本文详解如何正确编写条件判断，使 iife 仅在 `index.html`、`other.html` 或根路径 `/` 等特定页面执行，重点纠正逻辑运算符误用导致的失效问题，并提供可扩展的正则匹配方案。
在前端开发中，常需为不同页面注入差异化逻辑（如首页轮播初始化、后台页数据监控等）。使用立即执行函数表达式（IIFE）是一种轻量、隔离性强的实现方式。但关键在于：条件判断必须语义准确——稍有不慎，函数就会“静默失效”。
❌ 常见错误：混淆逻辑或（||）与逻辑与（&&）
你最初的多条件写法：
if (!window.location.pathname.includes("index.html") || !window.location.pathname.includes("other.html")) return
这段代码的逻辑是：“如果当前路径不包含 index.html，或者不包含 other.html，就退出”。由于任意一个 URL 都不可能同时包含两个文件名（例如 /index.html 不含 other.html），该条件恒为真，导致 IIFE 永远不执行。
✅ 正确做法是使用 &&：
只有当路径既不包含 index.html，也不包含 other.html 时才退出——即：仅当路径匹配任一目标页面时，才继续执行后续逻辑。
(function() {
const path = window.location.pathname;
if (!path.includes("index.html") && !path.includes("other.html")) return;
// ✅ 此处代码仅在 index.html 或 other.html 中运行
console.log("IIFE executed on allowed page:", path);
})();
✅ 更健壮的方案：使用正则表达式统一匹配
includes() 易受路径干扰（如 /admin/index.html 会误匹配），且难以处理根路径 /。推荐使用正则表达式，兼顾精确性与可维护性：
(function() {
const path = window.location.pathname;
// 匹配 /index.html、/other.html 或根路径 /
if (!/^\/(index|other)?\.html?$/.test(path)) return;
// ✅ 安全执行业务逻辑
initHomepageFeatures();
trackPageLoad();
})();
-
^\/：确保从根路径开始匹配 -
(index|other)?：匹配index、other或空字符串（对应/） -
\.html?：匹配.html或.htm（?表示l可选） -
$：确保匹配到路径结尾，避免/index.html.bak类误判
? 补充建议：增强可读性与可配置性
将白名单抽离为数组，结合 some() 提升可读性与扩展性：
(function() {
const path = window.location.pathname;
const allowedPages = ["/", "/index.html", "/other.html"];
if (!allowedPages.some(page => path === page || path.startsWith(page + "/"))) return;
// 执行专属逻辑
console.log("Running on whitelisted page:", path);
})();
⚠️ 注意事项：
- 避免仅依赖
pathname.includes("xxx")——它无法区分/user/index.html和/index.html；- 若项目使用前端路由（如 React Router），应监听
history变化而非仅检查初始pathname；- 生产环境建议添加
try/catch包裹业务逻辑，防止单页报错阻塞全局脚本。
通过精准的逻辑运算符选择与结构化路径匹配策略，即可可靠地实现“按页加载”行为，兼顾性能、可维护性与健壮性。
