1

假设我有这样的标记：

<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 的这一特定方面的共识是什么（鉴于一般来说这不是一个好的编码实践）？

4

2 回答 2

5

第二种方式被认为更好

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

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

于 2012-05-17T19:20:41.683 回答
0

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

功能等效：

  • 他们都对要附加的javascript做出假设。
    • 前者假定存在 baz()
    • 后者假定存在 $('button').on('click', baz);
  • 如果没有说 javascript，它们也不会做任何事情——它们完全被破坏了。

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

  • 以可读方式传入参数 [onClick="baz(this)"] 的能力允许您生成更多可变代码，而不会出现 javascript 带来的所有一般不可读性。
  • 可维护性飙升。我所要做的就是在我的脚本中找到“function baz(”，并且我已经开始调试，而不是前者，它可以通过任何选择项目的方法附加——IDS 可能出现在你的代码、类中和其他 CSS 选择器。
  • 我相信服务器端确实应该做尽可能多的工作。在您的服务器上进行升级和错误测试很容易。很难想象您的客户可能拥有的每个可能的测试用例。你的计算机做的工作越多，你对功能执行的控制就越多。
  • 它使人们免于动态生成 JS 的可怕诱惑。
于 2012-08-28T18:38:30.073 回答