使用 html 类属性作为 javascript 句柄是不好的做法吗答案

【问题标题】：Is it bad practice to use the html class attribute as a javascript handle使用 html 类属性作为 javascript 句柄是不好的做法吗
【发布时间】：2012-08-30 11:36:28
【问题描述】：

我经常需要使用 jquery 一次选择多个元素...为此，我通常只需为我想要选择的所有元素添加一个类，然后使用 jquery 按类选择。

这是一种不好的做法，还是我应该改用 html 5 数据属性之类的东西？

【问题讨论】：

如果它们都与特定的对象分组相关，但这是定义的，那么即使没有相应的样式表选择器，我也不明白为什么使用类是“不好的做法”。当然，这是一个滑坡：是确定分组还是附加数据？
（选择 - 在更大的 DOM 空间上 - 基于类可能比在 [其他] 节点属性上选择更快，fsvo 更快。当然，“缓存”初始 jQuery 对象可能会完全降低任何性能顾虑。）

标签： html class-attribute

【解决方案1】：

我会说对于不需要传递参数的一般参考是可以的。

即所有.flashing 元素都将应用闪光效果。结束。

当您开始使用多个类或“数据类”时，它会失控，例如class="flashing-15times onhoveronly" 等...

一旦您需要开始传递参数或变量，您应该转向数据属性或其他 OOP 方法。

【讨论】：

我认为结合这些方法也可以（使用@class作为一种空谓词）：<div class="flashing" data-flashing-type="red_flash" />
不确定“何时需要开始传递参数”是什么意思。

【解决方案2】：

这是一个很好的练习。这就是类属性的用途。永远记住，class 属性是 HTML 语义分层的一部分，用于标记具有共同属性的对象组，而不是 CSS 的一部分。正是 CSS 选择器提供了 HTML 语义和 CSS 表示之间的绑定。标记具有共同属性的对象组正是您正在做的事情。

只需确保为要收集在一起以应用 jquery 操作的对象集合使用有意义的名称。

【讨论】：

【解决方案3】：

我认为 w3 规范在这里很有帮助：

http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes

金钱报价：

自定义数据属性旨在存储私有的自定义数据没有更合适的页面或应用程序属性或元素。

然后继续使用音乐站点的示例，该示例使用数据来包含音乐曲目的长度，以进行排序。

似乎 data- 是为这些类型的用途而保留的，而不是作为选择器的类/id。

这是另一篇有助于思考该主题的文章： http://danwebb.net/2010/1/27/put-that-data-attribute-away-son-you-might-hurt-someone

【讨论】：

这对我来说似乎是最正确的。有意义的是，类/ID 应该用于选择/样式设置，而数据属性仅用于...数据。
这回答了数据属性 vs id/class，但不是 id vs class。有人说你应该使用id来选择javascript和css的类。避免在 css 中使用 ID 变得越来越普遍。在 JavaScript 中选择类有点慢，但在 IMO 中它有时是有意义的。本文说明了这种情况：statichtml.com/2009/classes-are-not-just-for-css.html

【解决方案4】：

这曾经是执行此操作的标准方法。然而，目前的标准方法是使用数据属性。例如，如果您想制作一个使某个元素具有工具提示的插件，您可以这样做

<div data-tooltip="This is a div"></div>

您可以使用 jquery hass attribute 选择器选择具有 data- 属性的元素。

$("[data-tooltip]").each(function(){
    generate_tooltip($(this));
});

【讨论】：