我应该通过id / class名称还是数据属性选择DOM元素？

Question

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

他说，这很糟糕：

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

这很好：

$('[data-foo]')

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

• Contra数据属性：http://intuio.at/en/blog/dont-use-data-attributes-to-find-html-elements-with-js/
• 专业版：http://roytomeij.com/blog/2012/dont-use-class-names-to-find-HTML-elements-with-JS.html

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

Answer 1

$('#foo')是最快的，但只有一个元素可以拥有Id

$('.bar')比数据属性快，但是很乱，因为类通常与css样式相关联

$('[data-foo]')是最慢的（略微），但最不可能干扰其他行为

速度测试 - http://jsperf.com/data-selector-performance

Answer 2

为什么要使用数据属性

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

为什么不应该使用数据属性

jQuery本身主要是为DOM操作而构建的，因此紧密绑定在某种程度上是有意的。这意味着该网站可能已经构建或设计，您希望以后操作它。如果你的重点是架构，测试驱动的开发，维护，并且你想要更好地分离设计和逻辑，那么有一些框架，例如angularjs，它们确实有自己的数据属性（ng-directives）。因此，如果你想在架构方面进行思考，可能会有更好的选择。