按钮代码首选项

刚接触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>

来源

2017-07-19 Tim Cheng

第一种方法是可怕的阅读或维护。 –

该函数主要用于消除代码冗余。并且您可以在任何需要的地方使用它们 – lalithkumar

它们都是内联属性事件处理程序，通常不鼓励使用它们。使用'addEventListener（）'是最好的方法。 – zer00ne

第二个是更好的方式，你是从HTML分离的JS。

如果您有两个具有相同功能的按钮，将会更容易避免重复代码并保持第二个版本！

例如，如果你想改变你的按钮的行为，你将不必修改你的html，并能够改变每一个地方一次。

来源

2017-07-19 09:56:37

-1

我会说：

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

第一种方式：确定功能是否短而不复杂，没有重用目的。

第二种方式：确定功能是否复杂，是否需要维护，加上：可以重复使用，避免代码重复。

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

来源

2017-07-19 09:57:21 hamdalaye

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

要编写可维护和可读的代码，最好的做法是将HTML，CSS和JavaScript完全分开。假设“只有一条线”，这是相当危险的，因为一条线很快就会变成两条线等等。总是使用相同的规则而不是为单线队员制定例外情况会更好。

就个人而言，我会写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）。

建议将元素放入变量中，因为查找元素非常慢。

来源

2017-07-19 10:13:01 dejakob

按钮代码首选项

回答

相关问题