我正在尝试了解不显眼的 Javascript 的最佳实践。使用观察者的推荐且有效的方法是什么？

Question

我正在尝试了解不显眼的 Javascript 的最佳实践。 Unobtrusive Javascript 的想法之一是 Javascript 不应该直接包含在页面的 html 代码中，例如 onchange=runScript()。相反，应该创建一个观察者，以便在相关元素发生变化时执行代码。

我的问题是围绕观察者的最佳实践是什么。 Javascript 中的事件观察器有多少开销？

我不知道观察者在浏览器中通常是如何编码的。创建一个可以处理大量元素但必须为每次单击运行代码的单个通用观察者是否更有效，如下所示：

document.body.observe('click', function(event) {
  if (event.element().match('some_id')) {
    //do something
    event.stop()
  }
}

或者为每个与其非常匹配的相关元素创建一个观察者会更有效具体来说，如下所示：

$('some_id').observe('click', function(event) {
  //do something
  event.stop()
}

或者观察者的开销如此之低，根本没有理由担心它，我应该只做任何更方便编码的事情？

Answer 1

虽然你在标题中写了 JavaScript，但我看到你在问题中使用了 jQuery。所以，希望以 jQuery 为中心的答案是可以的。

jQuery 包含两种方法来实现这一点：$.live() 和 $.delegate()。当处理来自大量相关元素（例如大表的每一行）的事件时，使用事件委托绝对是一个好主意。将单个处理程序附加到表并在事件冒泡时捕获事件比将事件附加到每一行更有效。

对于单个元素（例如您的 ID 示例），事件委托不是必需的。一个简单的 $('#some_id').click(fn) 就可以了。

Answer 2

不合格的“高效”过于宽泛，不能说单一技术是最高效的。例如，存在时间效率和空间效率，并且两者之间通常需要进行权衡。此外，不同的浏览器可以自由地实现他们认为合适的事件，只要它们的行为符合 W3C 事件标准 规定，限制了关于时间和空间成本可以得出的结论。

我们可以分析与事件流相关的成本和效率。在每个兼容的浏览器中，事件首先在根元素上触发，然后在每个中间子元素上触发，直到到达目标，然后事件向上冒泡回到根，再次在中间元素上触发。在事件流期间，在文档结构中上下移动每一步都会产生时间成本（确定要触发哪个元素、查找侦听器等），因此如果您可以 在流程中尽早停止事件（如您的第一个例子）有可能节省时间。当然，对每个目标的特殊处理可能会抵消任何收益，并且提前停止事件可能是不正确的。

为每个元素集合创建单独但相等的侦听器函数可能会产生不必要的内存成本。请注意，这与在多个对象上订阅相同的函数不同。例如：

for (var i=0; i < elements.length; ++i) {
    elements[i].observe('click', function (evt) {...});
}

可能需要比以下更多的内存：

elements.each('click', function (evt) {...});

如果 JS 引擎 interns 运行，则两个将使用相同数量的内存。

我们不能假设的一件事是，在给定事件和元素的情况下如何查找事件侦听器。但是，给定事件和元素通常没有那么多侦听器，因此不应担心时间或空间效率。

最后，浏览器似乎能够很好地实现事件，因此性能差异往往不会成为问题。因此，简单性和可读性比如何定义和订阅事件侦听器更重要。