jquery - HTML 元素 id 和backbone.js 的 $ 作用域实例

Question

我继承了一个中等复杂的代码库，它大量使用了 jQuery 、backbone.js 和 ejs 模板。此代码库中的许多模板的 HTML 结构或多或少如下所示:

<div id="foo">
  <div id="bar"></div>
  <span id="baz"></span>
</div>

。支持这些模板的 View 代码包含许多类似这样的函数:

function doSomeStuff() {
  this.$("#foo").hide();
}

.

当 DOM 中存在多个这些 View 时，就像我正在渲染 Backbone 集合一样，它将导致 DOM 包含多个具有相同 id 的元素。 According to the W3C spec这会导致 document.getElementById() 表现出未定义的行为，而且我很确定 jQuery 在幕后使用了该函数。但 View 代码似乎确实按照当前编写的方式正常工作。

我注意到此代码使用 scoped instance of jQuery provided to it by Backbone 。我的问题是，我是否能够依靠这个作用域实例来始终只选择正确的元素？或者我只是在这里很幸运，我真的应该重写很多代码来做正确的事情并使用类而不是 id？

Answer 1

在 Web 开发领域，有两套规则:W3C 定义的规则(即规范)和浏览器定义的规则(即 Google/Microsoft/Mozilla 想要的规则)。多年来，id 属性一直是这两个规则集之间的显着差异:W3C 规定 id 属性必须是唯一的，但浏览器并不在乎。

这意味着 Backbone、jQuery 或任何其他工具(不是 W3C 验证器)不会关心同一 id 属性的多种情况。这意味着 Backbone/jQuery 不会竭尽全力帮助您，但这也意味着它们不是您问题的根源。

就我个人而言，我的建议是:不要担心多个相同的 id 属性，因为它们不会造成任何损害。浏览器会很乐意将它们视为类和所有样式/jQuery 选择器/等。将继续工作。

相反，请专注于驯服新继承的复杂代码库的其他方面，这些方面不能轻易被忽视。然后，一旦处理完所有有意义的事情，您就可以返回并将任何重复的 id 更改为 class 属性。在执行此操作之前和之后，Backbone、this.$ 和一般的 jQuery 都应该可以正常工作。