Question

我是Javascript和这个网站的新手。下面是2个代码（只有HTML，正常我使用外部js文件），它提供了一个按钮，你可以点击日期。我想知道哪些代码在开发人员中有偏好并且是否有另外一个优势？我认为它的方式是添加一个函数是过度的。

代码1

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <meta charset="utf-8">
</head>

<body>

  <button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>
  <p id="demo"></p>

</body>

</html>

代码2

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <meta charset="utf-8">
</head>

<body>

  <button onclick="myFunction()">The time is?</button>
  <p id="demo"></p>

  <script>
    function myFunction() {
      document.getElementById("demo").innerHTML = Date();
    }
  </script>

</body>

</html>

Answer 1

第二种方式更好，你将js与html分开。

如果您有两个具有相同功能的按钮，则更容易避免重复代码并使用第二个版本进行维护！

例如，如果您想要更改按钮的行为，则无需修改html，也可以一次更改所有位置。

Answer 2

在我看来，这里的正确答案都不是两者兼而有之。

要编写可维护且可读的代码，最佳做法是在HTML，CSS和JavaScript之间进行完全分离。假设＆＃34;它只有一条线＆＃34;，是非常危险的，因为一条线很快变成两条线，依此类推。最好始终使用相同的规则，而不是为单行制作例外。

就个人而言，我会像这样写HTML：

<button class="time-button"></button>
<p id="demo"></p>
<script src="script.js"></script>

在script.js中，您可以附加一个这样的事件监听器：

// Note that querySelector might not be supported in really old browsers
var timeButton = document.querySelector('.time-button');
var demoParagraph = document.getElementById('demo');

// Or attachEvent for IE < 11
timeButton.addEventListener('click', timeFunction);

/**
 * Here you can write some beautiful comments about the function
 */
function timeFunction (eventData) {
   demoParagraph.innerHTML = new Date().toISOString();
}

如果你这样写，你可以随时开始监听（addEventListener）并停止监听（removeEventListener）。

建议将元素放在变量中，因为查找元素的速度非常慢。

Answer 3

我会说：

两者都是正确的，取决于你想用它做什么。

第一种方法：如果功能很短且不复杂，则无需再使用。

第二种方式：如果功能很复杂，需要维护并加上：您可以重复使用它并避免代码重复。

现在另一种方法是在另一个.js文件中提取javascript方法。

按钮代码首选项

3 个答案: