Question

我正在创建一个网站作为个人项目来学习我的DOM和javascript方式。经过几个小时的烦恼，我发现如果我注释掉我的HTML的一部分（＆＃34;动画着陆页＆＃34;在下面的HTML中），它有一个javascript函数（JS中的btnEnter.addEventListener序列绑定到它，我的.js文件中的该函数之后的任何内容都停止工作（例如JS中的test.addEventListener序列）。我应该把我的javascript函数分成他们自己的单独文件吗？目前，我想坚持使用javascript解决方案，因为我想在继续使用jQuery之前掌握javascript的细节。我在下面包含了我的HTML和JS：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>My Webpage</title>
<!-- Add Javascript for enabled browsers -->
<script>document.documentElement.className += " js";</script>
<!-- Latest Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Bootstrap optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest Bootstrap Javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Personal stylesheet -->
<link rel="stylesheet" type="text/css" href="MyStyle.css">
</head>
<body>

<!-- Animated landing page -->
<div id="cover-image">
    <button id="entry-btn">Enter</button>
</div>

<!-- Main site -->
<!-- Banner -->
<h1 class="center-content" id="banner">Banner</h1>

<!-- Navigation bar -->
<nav class="nav-bar">
    <div class="container-fluid">
        <ul class="nav-list">
            <li class="divider-vertical"></li>
            <li><a class="navbar-link" id="link1" href="#home">Home</a></li>
            <li class="divider-vertical"></li>
            <li><a class="navbar-link" id="link2" href="#page1">Page 1</a></li>
            <li class="divider-vertical"></li>
            <li><a class="navbar-link" id="link3" href="#page2">Page 2</a></li>
            <li class="divider-vertical"></li>
            <li><a class="navbar-link" id="link4" href="#page3">Page 3</a></li>
            <li class="divider-vertical"></li>
        </ul>
    </div>
</nav>

<!-- Content -->
<div id="home">HOME</div>
<br/>
<div id="page1">PAGE1</div>
<br/>
<div id="page2">PAGE2</div>
<br/>
<div id="page3">PAGE3</div>

<!-- Personal JavaScript file -->   
<script src="MyScript.js"></script>
</body>
</html>

JS

var btnEnter = document.getElementById("entry-btn");
var test = document.getElementById("link1");

btnEnter.addEventListener("click", coverFadeOut);

test.addEventListener("click", testFunc);

function coverFadeOut() {
    var coverimg = document.getElementById("cover-image");
    coverimg.classList.toggle("fadeout");
    coverimg.addEventListener("transitionend", setTimeout(coverHide, 1000), false);
}

function coverHide() {
    var coverimg = document.getElementById("cover-image");
    coverimg.classList.toggle("hide");
}

function testFunc(){
    alert("Test");
}

为了澄清，我在评论HTML部分＆＃34;动画着陆页＆＃34;？

时，问我的testFunc为什么不起作用？

Answer 1

当您选择一个元素时，您需要确保它在使用它之前不是undefined。如果您尝试访问undefined上的方法或属性（在本例中为方法addEventListener），您的javascript就会中断。

var btnEnter = document.getElementById("entry-btn");
var test = document.getElementById("link1");

if (btnEnter) {
    btnEnter.addEventListener("click", coverFadeOut);
}

if (test) {
    test.addEventListener("click", testFunc);
}

Answer 2

欢迎来到JavaScript的精彩世界！

我建议您在浏览器中点击F12并利用浏览器的控制台和开发者工具。他们会向您显示代码运行时发生的任何异常。在您的情况下，注释掉该按钮会导致一个：通过从页面标记中删除entry-btn，向其添加事件侦听器的代码将失败，因为document.getElementById("entry-btn")将返回{{1 }}

null

无需将每个功能添加到单独的文件中。您只需确保在尝试解决问题时进行调试。（顺便提一下，当涉及到对相关文件和功能进行分组时，您希望将JavaScript模块模式或ES2015模块设为Google;它们是将相关代码片段保持在一起的首选方式。）

Answer 3

简短的回答是否定的，没有必要将每个js函数分成不同的文件，但对于大型应用程序来说它很方便，它有利于代码重用，测试等等。

这是一个广泛的主题，在很大程度上取决于团队惯例，最佳实践和设计模式。

例如，我看到它的方式，javascript函数必须按照封装和抽象的概念分开，即：模块应该只有一个变更原因，必须处理特定的职责。

您可以决定按照这个概念将您的功能分成模块（也就是：单独的js文件）。例如，您可以使用导航文件处理特定于导航的所有功能，以及其他模块来抽象功能的其他方面。

希望它有所帮助！

是否应该在自己单独的.js文件中定义网页的每个Javascript函数？

3 个答案: