Question

我一直在研究应用程序，前端主要使用jQuery。

我们依赖于页面上存在的某些分类元素，以便我们可以将行为附加到它们。例如：

$('.block').on('click', clickHandler);

其他开发人员之一说我们应该将表示与逻辑分离（我同意）。因为这些类用于表示，所以他建议使用数据属性：

$('[data-attribute-name~=value]').on('click', clickHandler);

但是，我知道以下关于这种方法：

性能明显低于基于类的选择器
HTML类用于向DOM元素赋予语义含义，因此不限于表示用途。

在阅读unobtrusive javascript时，我没有特别提及。

使用[data-attribute]对类/ ID的主要区别是什么？

这完全取决于表现/偏好吗？

Answer 1

因为这些类用于演示

这只是部分正确。类用于表示和行为。使用类将行为附加到多个元素没有任何问题。

数据属性非常适合携带其他元素特定信息，但我强烈建议不要仅仅为了附加行为而使用数据属性。

如果您真的需要将类的使用分开以用于演示和行为目的，我建议您适当地命名它们。例如，你可以这样做：

<div class="pres-alert">Watch Out!</div>

VS

<div class="behav-alert">Watch Out!</div>

或

<div class="pres-alert behav-alert">Watch Out!</div>

然而，我发现这有点过分。我经常发现自己使用相同的类名，行为和表示。最后，行为和表达往往密切相关。

更新：

为了让你的合作开发者的评论更进一步，我相信他将class属性与演示相关联实际上是错误的。 class属性的HTML5规范甚至声明：

作者可以在class属性中使用令牌没有其他限制，但鼓励作者使用描述内容性质的值，而不是描述内容所需表示的值。

http://www.w3.org/html/wg/drafts/html/master/dom.html#classes

因此，您应该使用class="big-red-box"而不是class="alert"。现在，您可以将样式附加到alert类（color:red;font-size:bold）以及行为（即悬停时弹出窗口）。

Answer 2

如果没有其他原因，你应该坚持使用ID，而不是选择器中最快的。我将在第二点进一步扩展：HTML类只应用于向DOM元素赋予语义含义。那是使用CSS类，我假设你上面有：

.block {
    display: block;
}

实际上违背了HTML / CSS的精神。这并不是说我们并非都这样做，但重点是你至少应该在你要绑定的类名后面有语义含义：

$(".show-popup").on('click', showPopup);

根据您的具体问题，“主要区别是什么：”正如您所说，使用该类更快/更高效。语法肯定更清晰。关于使用数据属性作为选择器的规范doesn't seem to say anything specific。但是，我总是将数据属性解释为用于存储其值用于算法的标量数据。这意味着值可以经常更改，并且可以经常向元素添加/删除数据，这会使它们成为选择器的理想选择。

Answer 3

一个类可以与多个元素相关联，而一个id只与一个元素相关联。

我只是更仔细地阅读了您的问题，看到您需要更多信息：

我个人使用data属性来存储处理事件时可以使用的必要变量，我使用类“event”来表示jQuery而不是CSS使用的任何东西。例如：

<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>

希望有所帮助！

Answer 4

您可以拥有多个课程，并且可以将某些课程的名称与逻辑相关联，将其他人与演示文稿相关联，并保持课程选择器的效果。

<el class="block logicClass" />

Answer 5

数据属性不仅适用于选择器。有时您希望为脚本可能使用的标记赋予额外的含义。

例如，您可以在密码重复字段上有data-attribute-validate-repeat="firstpassword"，其中值指的是第一个密码。然后，表单验证器可以读取此属性以按ID查找其他字段。除非您使用特殊的命名约定，否则不能只通过类和ID来完成。

使用数据属性和类/ ID进行javascript行为有什么区别？

5 个答案: