Question

（不使用JQuery）

为了正确地提出这个问题，我做了一个包含三个页面A，B和C的网站的简单示例。每个页面都链接到一个JavaScript文件.JavaScript文件链接在底部身体标签。以下是其中一个html页面的示例：

[]

除了“B”和“C”的明显替换外，所有三页看起来都很相似。

<html>
    <head>
        <title>Page A</title>
        <link rel="stylesheet"
              type="text/css"
              href="temp.css">
        </link> 
    </head>
    <body>
        <h1 id = "headingA">Page A</h1>
        <button id="enterA">Enter</button>
        <script src = temp.js>
        </script>
    </body>
</html>

显然这不会起作用，因为任何时候都只能加载一个页面，因此脚本试图在未加载的页面上抓取的元素将导致脚本错误。

我可以想到几种方法来解决这个问题，但我觉得这是一个黑客，我在这里问的原因是最佳实践解决方案，因为相信这必须是第二天性的练习开发人员（与我不同）。

Answer 1

没有理由让一个页面特有的JavaScript存在于所有页面中加载的.js文件中。事实上，它具有潜在的风险，因为如果引入具有相同名称的元素，则可能会出现模糊和意外的行为。您可以（并且通常会在非平凡的项目上）每页加载多个JavaScript文件，因此，虽然有很多方法可以构建您的代码，但这是我的一个想法。说是常见做法：

将您的共享非页面特定JavaScript保存在一个文件中，例如

Common.js

然后，对于每个页面，创建一个特定于页面的JavaScript文件：

PageA.js
PageB.js
PageC.js

像今天一样在所有页面上加载Common.js文件，但在每个页面上，另外加载包含该页面特定功能的脚本文件。正如评论中所提到的，您也可以编写JavaScript来检查相关元素的存在并采取相应的行动，但我鼓励您开始围绕代码组织形成更好的习惯并完全避免这个问题。 / p>

Answer 2

将每个包裹在一个空检查中，如下所示。如果该按钮不存在于页面上，则不会尝试绑定onClick事件。

//this button is on page A
var btnA = document.getElementById("enterA");

if (btnA != null) {
    btnA.onclick = function () {
        "use strict";
        window.console.log("Button A Pressed");
        window.open("/pageB.html", "_self");
    };
}

Answer 3

我同意sphanley's answer，因为这是一种可能性。

以下是其他一些需要考虑的选项：

如果onclick处理程序中的任何其他功能不仅仅是链接，您可以考虑在HTML页面中设置链接，设置为按钮：
```
<a href="/pageB.html" class="button">Enter</a>
```
...然后在样式表中：
```
a.button {
  /* styles to make links look like a button */
}
```

另一种选择可能是在按钮上放置一个通用id并在按钮的某个属性中包含链接，如下所示：

最好在数据上添加自定义属性名称 - ¹

<button id="enter" data-href="/pageB.html">Enter</button>

...或使用其他一些自定义属性来识别目标资源

<button id="enter" data-target="enterA">Enter</button>

...然后抽象脚本，读出相关属性，如下：

var btn = document.getElementById( 'enter' );

// I like to use addEventListener in stead of the direct .onclick handler
btn.addEventListener( 'click', function( e ) {
  // when using data-href:
  window.open( this.dataset.href, "_self" );

  // when using data-target:
  switch( this.dataset.target ) {
    case 'enterA':
      window.open( "/pageB.html", "_self" );
    break;
    case 'enterB':
      window.open( "/pageC.html", "_self" );
    break;
    case 'enterC':
      // do something else?
    break;
  }

  // or, you could also use a map with targets, in stead of a switch statement, of course:
  var targets = {
    'enterA': '/pageB.html',
    'enterB': '/pageC.html',
    'enterC': 'some other page',
  }
  if( targets.hasOwnProperty( this.dataset.target ) ) {
    window.open( targets[ this.dataset.target ], "_self" );
  }

  // etc.
} );

_{1。）more info on data attributes}

在单个JavaScript文件中处理多个页面上的事件的正确方法是什么？

3 个答案: