提问人：NT3RP 提问时间：3/20/2013 最后编辑：NT3RP 更新时间：3/20/2013 访问量：8883
使用 data-attributes 和 class/ID 进行 javascript 行为有什么区别？
What are the differences between using data-attributes and class / ID for javascript behaviour?
问：
我一直在开发一个应用程序，前端主要使用jQuery。
我们依赖于页面上存在的某些分类元素，以便我们可以将行为附加到它们。例如：
$('.block').on('click', clickHandler);
另一位开发人员说我们应该将表示与逻辑分离（我同意）。由于这些类用于表示，因此他建议使用数据属性：
$('[data-attribute-name~=value]').on('click', clickHandler);
但是，我对这种方法有以下了解：
- 它的性能明显低于基于类的选择器
- HTML 类用于赋予 DOM 元素语义意义，因此不限于表示用途。
在阅读不显眼的 javascript 时，我没有看到任何特别提及。
与类/ID 相比，使用 [data-attribute] 的主要区别是什么？
这严格来说是性能/偏好的问题吗？
答：
1赞
Matt Cashatt
3/20/2013
#1
一个类可以与多个元素相关联，而 id 只能与一个元素相关联。
我只是更仔细地阅读了您的问题，并看到您需要更多信息：
我个人使用属性来存储处理事件时可以使用的必要变量，并且我使用类“event”来表示jQuery而不是CSS将使用的任何内容。例如：data
<a class="event" data-action="Alert" data-id="123" href="#">Foo</a>
<script>
var Event = {
Alert: function(ele){
alert(ele.attr("data-id")); //alerts "123"
};
};
$(".event").on("click",function(){
var ele = $(this);
Event[ele.attr("data-action")](ele);
});
</script>
希望对您有所帮助！
评论
3赞
Tieson T.
3/20/2013
这回答了标题提出的问题，但这不是实际提出的问题。
0赞
NT3RP
3/20/2013
抱歉：我注意到，当答案开始滚滚而来时，我错过了标题中的一个关键词。从那以后，我更新了问题和标题。
0赞
Matt Cashatt
3/20/2013
回答后不久我就意识到了这一点，并更新了我的答案。谢谢。
1赞
user2050799
3/20/2013
#2
您可以有多个类，您可以将一些类的名称与逻辑相关联，而将其他类的名称与表示相关联，并保持类选择器的性能。
<el class="block logicClass" />
13赞
Steve
3/20/2013
#3
因为类是用于演示的
这只是部分正确。类用于表示和行为。使用类将行为附加到多个元素并没有错。
数据属性非常适合携带其他元素特定信息，但我强烈建议不要将数据属性仅用于附加行为。
如果您确实需要将类的使用分开用于演示和行为目的，我建议您适当地命名它们。例如，您可以执行以下操作：
<div class="pres-alert">Watch Out!</div>
与。
<div class="behav-alert">Watch Out!</div>
或
<div class="pres-alert behav-alert">Watch Out!</div>
但是，我觉得这有点矫枉过正。我经常发现自己对行为和表示都使用相同的类名。最后，行为和表现往往是密切相关的。
更新：
为了更进一步地理解您的共同开发人员的评论，我认为他将属性与演示联系起来实际上是错误的。属性的 HTML5 规范甚至指出：classclass
作者可以在 class 属性中使用的标记没有其他限制，但鼓励作者使用描述内容性质的值，而不是描述所需内容表示形式的值。
http://www.w3.org/html/wg/drafts/html/master/dom.html#classes
因此，与其使用 ，不如使用 .现在，您可以将样式附加到该类 （） 以及行为（即悬停时弹出）。class="big-red-box"class="alert"alertcolor:red;font-size:bold
评论
0赞
d_inevitable
3/20/2013
所谓“附加行为的纯粹目的”，您的意思是使用数据属性作为选择器的标准，对吧？
5赞
BoltClock
3/20/2013
换句话说：类（即属性）可用于任何类型的分类，无论是表示、行为还是其他任何分类。没有规则或限制;您可以随心所欲地自由使用它们。鉴于这种自由度，当您拥有专用于该目的的内置、久经考验的属性时，没有理由使用自定义数据属性对相关元素进行分组（尤其是与选择器一起使用时）。class
1赞
Sean Ryan
3/19/2014
在行为和演示中使用相同的类会在某个时候回来咬你。最终，你会发现你想要将相同的行为应用于需要不同样式的元素，此时你要么去掉样式以保持侦听器的纯净性，要么向侦听器添加一个新类。对侦听器使用数据属性（尤其是在一致应用的情况下）可以使代码更易于长期管理。有关更多详细信息，请参阅 alexkinnee.com/2013/11/...。
1赞
d_inevitable
3/20/2013
#4
数据属性不仅适用于选择器。有时，您希望为脚本可能使用的标记赋予额外的含义。
例如，您可以有一个 on 密码重复字段，其中的值引用第一个密码。然后，表单验证器可以读取此属性以按 ID 查找其他字段。这不能仅通过类和 ID 来完成，除非您使用特殊的命名约定，否则不会很整洁。data-attribute-validate-repeat="firstpassword"
3赞
Explosion Pills
3/20/2013
#5
如果可能的话，你绝对应该坚持使用 ID，如果没有其他原因，它就是最快的选择器。我会进一步扩展您的第二点：HTML 类应该仅用于赋予 DOM 元素语义意义。那就是使用一个CSS类，我假设你在上面有这样的类：
.block {
display: block;
}
实际上违背了HTML/CSS的精神。这并不是说我们不都这样做，但关键是你至少应该在要绑定到的类名背后有语义意义：
$(".show-popup").on('click', showPopup);
根据您的具体问题，“主要区别是什么：”正如您所说，使用该类更快/性能更高。语法当然更简洁。规范似乎没有具体说明使用 data- 属性作为选择器。但是，我一直将数据属性解释为旨在存储标量数据，其值用于算法。这意味着值可能会频繁更改，并且数据可能会频繁地添加到元素中/从元素中删除，这将使它们不适合选择器。
评论