gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-31 22:58:54 25 4
gpt4 key购买 nike

(不使用 JQuery)

为了正确地提出这个问题,我做了一个简单的网站示例,该网站包含三个页面 A、B 和 C。每个页面都链接到一个 JavaScript 文件。JavaScript 文件链接在 body 标签。这是其中一个 html 页面的示例:

<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>

除了明显用“A”代替“B”和“C”之外,这三个页面看起来都很相似。

//this button is on page A
var btnA = document.getElementById("enterA");
btnA.onclick = function () {
"use strict";
window.console.log("Button A Pressed");
window.open("/pageB.html", "_self");
};

//this button is on page B
var btnB = document.getElementById("enterB");
btnB.onclick = function () {
"use strict";
window.console.log("Button B Pressed");
window.open("/pageC.html", "_self");
};

//this button is on page C
var btnC = document.getElementById("enterC");
btnC.onclick = function () {
"use strict";
window.console.log("Button C Pressed");
window.alert("Button C Pressed");
};

显然这是行不通的,因为一次只能加载一个页面,因此脚本试图在未加载的页面上抓取的元素将导致脚本错误。

我可以想出几种方法来解决这个问题,但我觉得自己是个黑客,我在这里问的原因是最佳实践解决方案,因为相信这一定是第二天性练习开发人员(不像我自己)。

最佳答案

没有理由让特定于某个页面的 JavaScript 存在于跨所有页面加载的 .js 文件中。事实上,它有潜在的风险,因为如果您引入具有相同名称的元素,您可能会产生模棱两可和意想不到的行为。您可以(并且通常会,在重要的项目中)每页加载多个 JavaScript 文件,因此虽然有很多方法来构建您的代码,但我认为这是一种常见的做法:

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

  • Common.js

然后为每个页面创建一个页面特定的 JavaScript 文件:

  • PageA.js
  • PageB.js
  • PageC.js

像今天一样在所有页面上加载 Common.js 文件,但在每个页面上,额外加载包含该页面特定功能的脚本文件。如评论中所述,您还可以编写 JavaScript 来检查相关元素是否存在并采取相应措施,但我鼓励您开始在代码组织方面养成更好的习惯并完全避免该问题。

关于javascript - 在单个 JavaScript 文件中处理多个页面上的事件的正确方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35613135/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com