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