16

我一直在开发一个应用程序，前端主要使用 jQuery。

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

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

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

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

但是，我对这种方法有以下了解：

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

在阅读不引人注目的 javascript时，我没有看到任何特别提及。

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

严格来说是性能/偏好问题吗？

4

5 回答 5

13

因为这些类用于演示

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

数据属性非常适合携带额外的元素特定信息，但我强烈建议不要将数据属性用于附加行为的唯一目的。

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

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

对比

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

或者

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

但是，我觉得这有点矫枉过正。我经常发现自己对行为和表现都使用相同的类名。最后，行为和表现往往密切相关。

更新：

为了让您的共同开发人员的评论更进一步，我相信他将class属性与表示相关联实际上是错误的。class属性的 HTML5 规范甚至声明：

作者可以在类属性中使用的标记没有其他限制，但鼓励作者使用描述内容性质的值，而不是描述所需内容呈现的值。

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

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

于 2013-03-19T18:20:55.570 回答
3

如果没有其他原因，您绝对应该尽可能坚持使用 ID，因为它是最快的选择器。我会更多地扩展您的第二点：HTML 类应该只用于向 DOM 元素传递语义含义。那是使用我假设您在上面的 CSS 类，例如：

.block {
    display: block;
}

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

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

根据您的具体问题，“主要区别是什么：”正如您所说，使用该类更快/性能更高。语法当然更干净。该规范似乎没有具体说明使用 data- 属性作为选择器。但是，我一直将 data- 属性解释为旨在存储其值用于算法的标量数据。这意味着值可能会经常更改，并且数据可能会频繁地添加到元素中/从元素中删除，这会使它们不适合选择器。

于 2013-03-19T18:25:00.513 回答
1

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

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

我个人使用data属性来存储可以在处理事件时使用的必要变量，并且我将“事件”类用于任何将由 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>

希望有帮助！

于 2013-03-19T18:16:44.660 回答
1

您可以有多个类，您可以将一些名称与逻辑关联，将其他名称与表示关联，并保持类选择器的性能。

<el class="block logicClass" />
于 2013-03-19T18:19:17.270 回答
1

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

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

于 2013-03-19T18:20:56.113 回答