按鈕代碼首選項

剛接觸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

按鈕代碼首選項

回答

相關問題