Javascript 我应该通过id/类名或数据属性选择DOM元素吗？

一位同事建议更改我们的完整JavaScript代码，只通过数据属性而不是id/类名选择DOM元素

他说，这很糟糕：

$('#foo')
$('.bar')

这很好：

$('[data-foo]')

我不知道这有什么好处，所以我在谷歌上搜索了一下，找到了以下两篇博文：

• Contra数据属性：
• 赞成者：

由于这些博客文章只是两位开发人员的意见，我想知道这方面的实际经验是什么？使用数据属性进行DOM选择真的有好处吗？还是一个愚蠢的想法？

$（“#foo”）

是最快的，但是对于id，只有一个元素可以有id

$（'.bar'）

比数据属性快，但比较混乱，因为类通常与css样式关联

$（“[data foo]”）

速度最慢（略慢），但干扰其他操作的可能性最小

---

速度测试-

为什么要使用数据属性

如果您只使用jQuery，那么您的整个逻辑将非常紧密地绑定到DOM。在大型项目中会出现问题。您的设计人员可能会考虑一种新的命名约定，这将产生borken jQuery代码。性能低下只是一个巨大的DOM或大量选择器的问题。使用数据属性可以更好地分离样式和逻辑/控制器

为什么不应使用数据属性

---

jQuery本身主要是为DOM操作而构建的，因此紧密的连接是出于某种目的。这意味着该网站可能已经建立或设计好了，您希望在以后对其进行操作。如果您关注的是体系结构、测试驱动的开发和维护，并且希望更好地分离设计和逻辑，那么有一些框架，比如angularjs，它们确实有自己的数据属性（ng指令）。因此，如果您想从体系结构的角度考虑，可能有一个更好的选择。

my be this link可以帮助您。他是jqueryanother的创建者，也是关于堆栈溢出的一个很好的答案，据我所知，基于数据属性的搜索比基于id/classe的搜索需要更长的时间，这取决于代码将要执行的操作的上下文。数据属性的完整dom搜索将很慢，用作委派目标，但会有所不同。我刚刚开始将我的代码库转换为与此完全相同的工作方式，我喜欢它。坦白说，这完全取决于你和你的同事。我说去吧！你所说的速度差异大多是一个神话。当你进入数百万个可供选择的节点时，它们就会变成现实。大多数人都不存在。这个问题的任何答案都将是猜测，没有确凿的事实，只有观点和良好的编码实践，正如您所做的一样-我陈述了事实。这些都是事实。仅此而已。