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

Question

我一直在研究一个应用程序,前端主要是使用jQuery.

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

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

其他开发人员之一说我们应该将表示与逻辑分离(我同意).因为这些类用于表示,所以他建议使用数据属性:

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

但是,我知道以下关于这种方法:

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

使用[data-attribute]over class/ID有什么主要区别？

这完全取决于性能/偏好吗？

Answer 1

因为这些类用于演示

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

数据属性非常适合携带其他元素特定信息,但我强烈反对使用数据属性仅用于附加行为.

如果您真的需要为了演示和行为目的而将类的使用分开,我建议您适当地命名它们.例如,您可以这样做:

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

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

所以class="big-red-box"不应该使用,你应该使用class="alert".现在,您可以将样式附加到alert该类(color:red;font-size:bold)以及行为(即悬停时弹出窗口).

换句话说:类(即`class`属性)可用于任何类型的分类,无论是表示,行为还是其他任何方式.没有规则或限制; 你可以随意使用它们.有了这样的自由,当你有一个专门用于这个目的的内置的,经过试验和测试的属性时,就没有理由使用自定义数据属性来对相关元素进行分组(特别是与选择器一起使用). (5认同)