本文详解如何正确配置 IIFE 的页面条件判断逻辑，解决因误用逻辑运算符（如将 && 写成 ||）导致脚本失效的问题，并提供更健壮的正则匹配方案。
本文详解如何正确配置 iife 的页面条件判断逻辑，解决因误用逻辑运算符（如将 `&&` 写成 `||`）导致脚本失效的问题，并提供更健壮的正则匹配方案。
在前端开发中，常需让一段初始化代码（如统计埋点、UI 初始化或表单校验）仅在特定页面执行，以避免冗余操作或潜在错误。最常用的方式是使用立即执行函数表达式（IIFE）配合 window.location.pathname 进行路径判断。
但一个常见误区是：当需要匹配多个允许页面（如 index.html 或 other.html）时，开发者容易错误地使用逻辑或（||）构建否定条件：
// ❌ 错误写法：永远返回 true，IIFE 总是提前退出
if (!pathname.includes("index.html") || !pathname.includes("other.html")) return;该逻辑等价于：“如果路径不包含 index.html 或者 不包含 other.html 就退出”。由于任意路径不可能同时包含两个文件名（例如 /index.html 不含 other.html），因此该条件恒为 true，脚本从不执行。
✅ 正确做法是使用逻辑与（&&）——即“既不是 index.html，也不是 other.html 时才退出”：
(function() {
const pathname = window.location.pathname;
if (!pathname.includes("index.html") && !pathname.includes("other.html")) return;
// ✅ 此处代码仅在 pathname 包含 "index.html" 或 "other.html" 时执行
console.log("Running on allowed page:", pathname);
})();然而，includes() 存在局限性：它属于子串匹配，可能产生误判（如 /blog-index.html 也会被 includes("index.html") 捕获）。更精准、可扩展的方案是使用正则表达式：
(function() {
const pathname = window.location.pathname;
// ✅ 使用单词边界 \b 确保精确匹配文件名（非子串）
// 支持根路径 "/"（即 pathname === "/"）和带后缀的页面
if (!/\/(index|other)(\.html)?\/?$/.test(pathname)) return;
// 示例：初始化首页轮播图
initHeroSlider();
trackPageView("landing");
})();? 正则说明：
\/(index|other)→ 匹配/index或/other；(\.html)?→.html后缀可选；\/?$→ 允许结尾有可选斜杠（适配/index/）；
整体覆盖/index、/index.html、/other、/other.html、/（若需支持根路径，可额外加|^\/$）。
? 进阶建议：
- 若页面列表较多，可将白名单转为数组 +
some()方法提升可读性：const allowedPages = ["/", "/index.html", "/other.html"]; if (!allowedPages.some(page => pathname === page || pathname.startsWith(page + "/"))) return;
- 生产环境推荐将此逻辑封装为复用函数，便于统一维护与测试。
总之，关键不在“多条件”，而在逻辑语义的准确表达：目标是“仅在白名单内运行”，对应条件应为“不在白名单中 → 退出”，而非“只要不满足任一条件就退出”。善用 && 和正则，即可写出清晰、健壮、可维护的页面级执行控制逻辑。
