好的JavaScript練習？

<input type=」text」 value=」click」 onclick=」textClicked()」> 

<script> 
function textClicked() { 
    document.write(‘Text clicked’); } 
</script>

OR好的JavaScript練習？

<input id=’txt’ type=」text」 value=」click」> 

<script> 
document.getElementById(‘txt’).onclick = function() { document.write('Text clicked'); } 
</script>

這上面是更好的設計的做法？在我看來，它是第一個，因爲它爲函數textClicked（）提供了可重用性。

謝謝。

來源

2011-12-16 user1101382

第二個。 – footy 2011-12-16 06:54:50

第二種形式並不妨礙您給函數一個名字。你仍然可以編寫`document.getElementById（'txt'）。onclick = textClicked;`。 – 2011-12-16 06:55:03

我寧願第二個。然後我可以從我的js文件中管理我所有的js。假設你需要改變onclick事件。誰想通過內聯調用來解決問題？ – mrtsherman 2011-12-16 06:57:20

以上哪一項是較好的設計實踐？

第二個選項是更好：

你是不是用JavaScript混合HTML
您可以包含一個單獨的腳本文件

在我看來代碼它是第一個，因爲它爲功能textClicked()提供了可重用性。

正如安德烈·卡倫在評論中提到的，沒有什麼阻止您分配一個值onclick的名字：

<input id='txt' type="text" value="click"> 

<script> 
document.getElementById('txt').onclick = textClicked; 

function textClicked() { 
    document.write('Text clicked'); 
} 
</script>

來源

2011-12-16 06:58:01

當然，第一個名字很好，你可以找到你需要的部分快得多，如果你需要其他事件，你可以重用它。

來源

2011-12-16 06:57:14 CloudyMarble

好吧，讓我們說一下:)

實際上，所有的一些最佳實踐是：

在你的情況代碼重用是使用相同的代碼多個處理程序。
分離關注點不是混合HTML代碼和Javascript代碼，因爲HTML描述了UI，而Javascript描述了操作。

在這兩個例子中你都有一個小問題。
比方說，你想分配function1到onclick的button1和button2。但是明天你只需要添加一些代碼到button1。在你的例子中，你將需要創建一些其他功能。你能真正做到，有點像（僞）：

// Today 
document.getElementById("button1").addActionForOnclick(function1); 
document.getElementById("button2").addActionForOnclick(function1); 

//Tomorrow 
document.getElementById("button1").addActionForOnclick(function2);

問題是，addActionForOnclick是依賴於瀏覽器（addEventListener在非IE瀏覽器，在IE attachEvent）。我建議和考慮的最佳做法是使用一些javascript framework。

我的選擇是jQuery，你的代碼看起來像：

頁：

使用Javascript（我會用腳本一個單獨的文件）：

$(document).ready(function(){ 
    $("#txt").click(myTxtClickHandler); 
}); 

function myTxtClickHandler() 
{ 
    document.write('Text clicked'); 
}

來源

2011-12-16 07:15:06

好的JavaScript練習？

回答

相關問題