javascript - 将数据属性和类/ID 用于 javascript 行为有什么区别？

Question

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

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

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

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

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

但是，我知道有关此方法的以下信息:

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

在阅读 unobtrusive javascript 时，我没有看到任何特别提及的内容。 .

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

这完全是性能/偏好的问题吗？

Answer 1

Because the classes are used for presentation

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

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

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

<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 规范甚至声明:

There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.

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

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