Question

假设我有这样的标记：

<form action="foo">
    <input name="bar" />
    <button type="button">Save</button>
</form>

<script>
    function baz() {
        // Submit form via AJAX
    }
</script>

将其添加到<button>：

是否更好

onclick="baz()"

或将其添加到<script>（假设jQuery）：

$(function(){
    $('button').on('click', baz);
});

我看到很多关于禁止内联javascript的最佳做法，我倾向于同意。但是我想知道文档加载/准备好的手动接线是否会混淆正在发生的事情，因为当使用onclick =“baz”时它会删除所存在的所述接线的上下文。

是否存在可维护性问题？这两种方法的其他优缺点是什么？我的问题是关于使用内联javascript的这一特定方面的行业共识是什么（鉴于一般情况下它不是一个好的编码实践）？

Answer 1

第二种方式被认为更好

$(function(){
    $('button').on('click', baz);
});

它被称为Unobtrusive JavaScript，您可以在其中将功能/行为与页面结构分开。

Answer 2

作为一名专业开发人员，我完全不相信第二种方法可以解决页面结构中的javascript问题。它们在功能上是等价的，并且添加不必要的抽象层只会混淆问题。

功能对等：

他们都对要附加的javascript做出假设。
- 前者假定存在baz（）
- 后者假定存在$（'button'）。on（'click'，baz）;
没有说javascript也没有做任何事情 - 他们;完全坏了。

更重要的是，他们每个人都有自己的问题。我支持内联javascript，原因如下：

能够可读地传递参数[onClick =“baz（this）”]允许您生成更多可变代码，而不会出现javascript带来的所有常见不可读性。
可维护性飙升。我所要做的就是找到“函数baz（”在我的脚本中，我开始调试，而不是前者，可以通过选择项目的任何方法附加 - 可能出现在整个代码中的IDS，类和其他CSS选择器。
我相信尽可能多的工作可以做到服务器端。在您的服务器上升级和错误测试很容易。很多，很多更难以想象客户可能拥有的每个可能的测试用例。您的计算机执行的工作越多，您在执行该功能时就越能控制。
它使人们免于动态生成JS的可怕诱惑。

在页面加载时使用onclick或连接点击处理程序是否更好？

2 个答案: