javascript 最佳实践：类或数据属性作为标识符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17184918/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best practice: class or data attribute as identifier
提问by Kippie
Lately I've been wondering what the best way to go is to perform javascript actions on multiple elements.
最近我一直在想最好的方法是对多个元素执行 javascript 操作。
The way I see it there are 2 possibilities:
在我看来，有两种可能性：
- Either I add a css class to my elements, which doesn't necessarily correspond to any existing css rules:
<div class="validation-required"></div> - Or I use a data-attribute like so:
<div data-validation-required></div>
- 要么我向我的元素添加一个 css 类，它不一定对应于任何现有的 css 规则：
<div class="validation-required"></div> - 或者我使用这样的数据属性：
<div data-validation-required></div>
In my IDE (Visual studio 2012 using R#), if I use the first method, I get a warning saying I shouldn't use css-classes which aren't defined. Which makes me believe this might not be the best idea anyway. However, this is the method I've most-often seen used, though this might just be a relic from days before we could use the data- attribute.
在我的 IDE（使用 R# 的 Visual Studio 2012）中，如果我使用第一种方法，我会收到一条警告说我不应该使用未定义的 css-classes。这让我相信这可能不是最好的主意。然而，这是我最常看到使用的方法，尽管这可能只是我们可以使用 data- 属性前几天的遗物。
So my question is pretty simple, which way should I go to simply "tag" an element for further processing?
所以我的问题很简单，我应该用哪种方式简单地“标记”一个元素以进行进一步处理？
Thanks for any answers
感谢您提供任何答案
PS: I realize this question might be prone to subjective opinions, though I do hope there is a concensus on what to use in modern-day browsers.
PS：我意识到这个问题可能倾向于主观意见，但我确实希望在现代浏览器中使用什么有一个共识。
PPS: I've done a search on this matter, but most questions are about performance, which isn't my primary concern for one-off situations.
PPS：我已经对这个问题进行了搜索，但大多数问题都与性能有关，这不是我对一次性情况的主要关注点。
采纳答案by Jan Turoň
According to W3C
根据 W3C
数据-*
Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements. These attributes are not intended for use by software that is independent of the site that uses the attributes.
自定义数据属性旨在存储页面或应用程序私有的自定义数据，没有更合适的属性或元素。这些属性不适用于独立于使用这些属性的站点的软件。
The class attribute has several roles in HTML: As a style sheet selector (when an author wishes to assign style information to a set of elements). For general purpose processing by user agents.
class 属性在 HTML 中有几个作用： 作为样式表选择器（当作者希望将样式信息分配给一组元素时）。用于用户代理的通用处理。
If you use classattribute, you can benefit from native getElementsByClassNamesearching and classListobject for toggling, adding and removing class. There's nothing like There is relatively slower Element.querySelectorAll([data-attr="value"])See Oliver Moran's commentgetElementsByAttributeValue.
如果您使用class属性，您可以从本机getElementsByClassName搜索和classList对象切换、添加和删除类中受益。没有什么像有相对较慢的Element.querySelectorAll([data-attr="value"])见 Oliver Moran 的评论getElementsByAttributeValue。
On the other hand, if you need to store multiple data, you can use dataset attribute.
另一方面，如果您需要存储多个数据，则可以使用dataset 属性。
So if you want searching or if the data affect the look of the element, I would use class. If you need to store multiple data, the datawould be more appropriate.
因此，如果您想要搜索或数据影响元素的外观，我会使用class. 如果需要存储多个数据，data则更合适。
回答by pai.not.pi
If you merely want to associate "values" to DOM elements for computational purposes then data-attributeis the way to go since,
如果您只是想将“值”与 DOM 元素关联起来用于计算目的，那么data-attribute这就是要走的路，因为，
anything that is "data-" will be treated as a storage area for private data (private in the sense that the end user can't see it – it doesn't affect layout or presentation)
任何“数据-”都将被视为私有数据的存储区域（从某种意义上说，最终用户无法看到私有数据——它不会影响布局或呈现）
Also, jQuery provides the .data(), which makes life easier so you don't have the trouble of using the [data-*]selector.
此外，jQuery 提供了.data()，这让您的生活更轻松，因此您不会遇到使用[data-*]选择器的麻烦。
If you are providing a class name then, considering semantics, it should have some style associated with it.
如果您提供一个类名，那么考虑到语义，它应该有一些与之相关的样式。
John Resig has written about data-attributes
John Resig 撰写了有关数据属性的文章
回答by Berty
Best way to test these things is to search for a test suite on jsperf.com
测试这些东西的最好方法是在 jsperf.com 上搜索测试套件
Here is the one you are interested in: http://jsperf.com/id-vs-class-vs-data-attribute
这是您感兴趣的一个：http: //jsperf.com/id-vs-class-vs-data-attribute
The most efficient selector is to use classes.
最有效的选择器是使用类。
This is probably a consequence of classes being used more for selection, so browsers will optimize that more?
这可能是类更多地用于选择的结果，因此浏览器会对其进行更多优化？
回答by Dan H
If you decide to use the data-*approach, specs for use of custom data elements -- and example usage -- are given here:
如果您决定使用该data-*方法，请在此处提供自定义数据元素的使用规范以及示例用法：
W3 spec on embedding custom non visible data with the data attribute
Here's a short, relevant excerpt:
这是一个简短的相关摘录：
3.2.3.8 Embedding custom non-visible data with the data-* attributes A custom data attribute is an attribute in no namespace whose name starts with the string "data-", has at least one character after the hyphen, is XML-compatible, and contains no characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).
All attributes on HTML elements in HTML documents get ASCII-lowercased automatically, so the restriction on ASCII uppercase letters doesn't affect such documents.
Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
3.2.3.8 使用 data-* 属性嵌入自定义的不可见数据并且不包含 U+0041 到 U+005A（拉丁文大写字母 A 到 LATIN CAPITAL LETTER Z）范围内的字符。
HTML 文档中 HTML 元素的所有属性都会自动变为 ASCII 小写，因此对 ASCII 大写字母的限制不会影响此类文档。
自定义数据属性旨在存储页面或应用程序私有的自定义数据，没有更合适的属性或元素。
