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

Question

我正在创建一个网站作为个人项目，以学习有关DOM和JavaScript的方式。 经过几个小时的烦恼之后，我发现如果注释掉一部分HTML代码（以下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部分“动画着陆页”时，我的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")将返回null 。

var btnEnter = document.getElementById("entry-btn"); // Uh oh! This is gone! document.getElementById returns null.
btnEnter.addEventListener("click", coverFadeOut);    // btnEnter is null. I can't add a listener to it!

无需将每个函数添加到单独的文件中。 您只需要确保在尝试操作时就在调试即可。 （顺便说一下，在对相关文件和功能进行分组时，您希望为JavaScript模块模式或ES2015模块提供一个Google；它们是将相关代码段保持在一起的首选方式）。

Answer 3

简短的答案是“否”，没有必要将每个js函数分离到不同的文件中，但是对于大型应用程序而言，它很方便，它有利于代码重用，测试等

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

例如，按照我的看法，javascript函数必须遵循诸如封装和抽象之类的概念进行分离，即：模块应该只有一个更改的原因，并且必须处理特定的职责。

您可以按照这个概念决定将功能分成模块（又称：单独的js文件）。 因此，例如，您可以有一个导航文件来处理所有特定于导航的功能，而其他模块则抽象了功能的另一个方面。

希望能有所帮助！

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

问题描述

3 个解决方案

解决方案1
1 已采纳 2017-03-31 18:20:27

解决方案2
1 2017-03-31 18:20:43

解决方案3
0 2017-03-31 18:24:48

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

问题描述

3 个解决方案

解决方案1 1 已采纳 2017-03-31 18:20:27

解决方案2 1 2017-03-31 18:20:43

解决方案3 0 2017-03-31 18:24:48

解决方案1
1 已采纳 2017-03-31 18:20:27

解决方案2
1 2017-03-31 18:20:43

解决方案3
0 2017-03-31 18:24:48