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

Should I select DOM elements via id/class names or data attributes?

本文关键字：数据属性 选择 DOM 元素 id 我应该      更新时间：2023-09-26

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

他说，这很糟糕：

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

这很好：

$('[data-foo]')

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

  • 抵销数据属性：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选择真的有好处吗？或者这是一个愚蠢的想法？

$('#foo')是最快的，但对于id，只有一个元素可以具有id

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

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

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

为什么应该使用数据属性

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

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

jQuery本身主要是为DOM操作而构建的，因此某种程度上是为了紧密结合。这意味着这个网站可能已经建成或设计好了，之后你想对它进行操作。如果你的重点是架构、测试驱动的开发和维护，并且你想实现设计和逻辑的更好分离，那么有一些框架，比如angularjs，它们确实有自己的数据属性（ng指令）。因此，如果你想从架构的角度思考，可能有一个更好的选择。

相关文章：