最佳实践:类或数据属性作为标识符

Question

最近我一直想知道最好的方法是在多个元素上执行javascript操作.

我看到的方式有两种可能性:

在我的IDE(使用R#的Visual Studio 2012)中,如果我使用第一种方法,我会收到警告,说我不应该使用未定义的css类.这让我相信这可能不是最好的主意.然而,这是我最经常使用的方法,尽管这可能只是我们可以使用数据属性前几天的遗物.

所以我的问题非常简单,我应该采用哪种方式简单地"标记"元素以进行进一步处理？

谢谢你的回答

PS:我意识到这个问题可能容易产生主观意见,但我希望在现代浏览器中使用什么有共识.

PPS:我已经对这个问题进行了搜索,但大多数问题都与性能有关,这不是我对一次性情况的首要关注.

Answer 1

如果您只想将"值"与DOM元素相关联以用于计算目的,那么data-attribute就是这样,

任何"数据 - "将被视为私人数据的存储区域(在最终用户无法看到它的情况下是私有的 - 它不会影响布局或呈现)

此外,jQuery提供.data(),这使生活更轻松,因此您不必使用[data-*]选择器.

如果你提供一个类名,那么考虑到语义,它应该有一些与之相关的样式.

John Resig撰写了有关数据属性的文章

Answer 2

根据W3C

自定义数据属性旨在将自定义数据存储为页面或应用程序的私有数据,因为没有更合适的属性或元素.这些属性不适用于独立于使用该属性的站点的软件.

class属性在HTML中有几个角色:作为样式表选择器(当作者希望将样式信息分配给一组元素时).用于通用用户代理处理.

如果使用class属性,则可以从本机~~getElementsByClassName搜索和~~ classList对象中进行切换,添加和删除类.~~没什么getElementsByAttributeValue,你需要迭代.~~ _{请参阅Oliver Moran的评论}

另一方面,如果需要存储多个数据,则可以使用dataset属性.

因此,如果您想要搜索或者数据是否会影响元素的外观,我会使用class.如果您需要存储多个数据,data则更合适.

"没有像getElementsByAttributeValue,你需要迭代." 就在这里.尝试`document.querySelectorAll(tag [data-attr ="value"]);`它将选择所有`<tag data-attr ="value"/>`标签.请参阅https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll (5认同)
@badZoke这个问题不是关于jQuery的,所以你的注释是OT.我的观点是关于原生支持.框架应该用于特定的体系结构.如果任何JS框架想要添加一些一般的伪成功特征(如data-*selector),那只意味着创建者不理解背后的一些原则. (2认同)

Answer 3

测试这些东西的最佳方法是在jsperf.com上搜索测试套件

最有效的选择器是使用类.

这可能是因为类被更多地用于选择的结果,所以浏览器会优化更多？

JsPerf.com根据ID,类或属性进行选择

大多数情况下这并不重要。我刚刚在最新的 Chrome 上测试了它，id 为 1300000 ops/s，data-id 为 90000 ops/s。尽管如此，在 90000ops/s 下，执行只需要 0.01ms。在一个典型的示例中，您希望通过数据属性选择元素，一次只需执行一次。 (2认同)