Question

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

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

OR

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

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

以上哪项是更好的设计实践？在我看来，它是第一个，因为它为函数textClicked（）提供了可重用性。

谢谢。

Answer 1

以上哪项是更好的设计实践？

第二种选择更好：

您没有将HTML与JavaScript混合
您可以包含来自单独脚本文件的代码

在我看来，这是第一个，因为它为函数textClicked()提供了可重用性。

正如AndréCaron在评论中提到的，没有什么可以阻止您按名称为onclick分配值：

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

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

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

Answer 2

肯定是第一个，有了好名字，你可以更快地找到你需要的部分，如果你需要其他活动，你可以重复使用它。

Answer 3

好的，我们来谈谈：）

实际上，在整个软件工程中，一些最佳实践是：

Reusable code
Separation of consern

在您的情况下，代码重用是对多个处理程序使用相同的代码 关注点分离不是混合HTML代码和Javascript代码，因为HTML描述了UI，Javascript描述了操作。

在你的两个例子中，你都有一点问题比方说，您希望将function1分配给onclick和button1的{{1}}。但是明天你只需要向button2添加一些代码。在您的示例中，您将需要创建一些其他功能。你真正能做的是（伪代码）：

button1

问题是，// Today document.getElementById("button1").addActionForOnclick(function1); document.getElementById("button2").addActionForOnclick(function1); //Tomorrow document.getElementById("button1").addActionForOnclick(function2);取决于浏览器（非IE中为addActionForOnclick，IE中为addEventListener）。我建议并考虑最佳做法是使用一些javascript framework。

我的选择是attachEvent，您的代码如下：

页：

Javascript（我会为脚本使用单独的文件）：

jQuery

好的JavaScript练习？

3 个答案: