在前端开发中，有时候我们需要在某个页面上执行 JavaScript 代码，而不是在所有页面上执行。本文将介绍最佳实践来实现这一目标。
1. 使用条件语句
最简单的方法就是使用条件语句来检查当前页面的 URL 是否与目标页面的 URL 匹配。如果匹配，则执行 JavaScript 代码。以下是一个示例：
if (window.location.href.indexOf('target-page') > -1) {
// Execute JS only on target page
}在这个示例中，我们使用 window.location.href 获取当前页面的 URL，并使用 indexOf 方法检查是否包含“target-page”。如果包含，“if”语句块内的代码将被执行。
这种方法虽然简单易用，但存在一些问题。首先，它可能会影响性能，因为每次加载页面时都必须执行条件语句。其次，URL 匹配可能不太可靠，因为有些页面可能包含相同的关键字。因此，我们需要更可靠的方法来确定当前页面。
2. 使用 data 属性
HTML5 引入了一组新的属性，称为 data 属性。它们允许我们在 HTML 元素上存储自定义数据，这对于前端开发非常有用。我们可以在 body 标签上添加一个 data 属性，并在需要执行 JavaScript 的页面上设置一个特定值。
<body data-page="target-page"> ... </body>
然后，在 JavaScript 中，我们可以使用以下代码检查当前页面：
if (document.body.getAttribute('data-page') === 'target-page') {
// Execute JS only on target page
}在这个示例中，我们使用 getAttribute 方法检索 body 元素上的 data-page 属性，并将其与目标页面名称进行比较。如果相等，“if”语句块内的代码将被执行。
这种方法可能比条件语句更可靠，因为它不依赖于 URL 匹配。但是，我们仍然需要手动添加 data 属性到 HTML，这可能很麻烦，特别是对于大规模 Web 应用程序。
3. 使用路由
现代 Web 应用程序通常使用路由来管理页面之间的转换。每当用户导航到新页面时，路由会更新 URL 并加载新的页面内容。这提供了一种自然的方法来确定当前页面。
我们可以使用路由来检查当前页面并根据需要执行 JavaScript 代码。以下是一个 React Router 的示例：
-- -------------------- ---- -------
------ - ----------- - ---- -------------------
-------- ------------- -
----- -------- - --------------
-- ------------------ --- --------------- -
-- ------- -- ---- -- ------ ----
-
------ ------
-在这个示例中，我们使用 React Router 提供的 useLocation hook 获取当前页面的位置信息。然后，我们可以使用 pathname 属性检查当前页面路径是否等于目标页面路径。如果相等，“if”语句块内的代码将被执行。
这种方法可能是最可靠和最灵活的，因为它使用现代 Web 开发中常用的工具。但是，它只适用于使用路由的应用程序，并且需要一些额外的配置（如安装 React Router）。
结论
在前端开发中，有多种方法可以仅在特定页面上执行 JavaScript 代码。我们可以使用条件语句、data 属性或路由来实现这一目标。每种方法都有其优点和缺点，取决于应用程序的具体需求。因此，我们应该根据情况选择最适合自己的方法。
希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27719