Question

我继承了一个中等复杂的代码库，它大量使用了jQuery，backbone.js和ejs模板。此代码库中的许多模板都具有或多或少的HTML结构：

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

。支持这些模板的视图代码包含许多这样的函数：

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

当DOM中存在多个这样的视图时，就像我渲染Backbone集合一样，它将导致DOM包含具有相同id的多个元素。导致document.getElementById()出现未定义行为的According to the W3C spec，我非常确定jQuery会使用该功能。但是视图代码似乎确实像当前编写的那样正常工作。

我注意到此代码正在使用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一般都应该没有问题。

HTML元素ids和backbone.js的范围实例$

1 个答案: