类与数据属性，自动字段初始化器答案

【问题标题】：Classes vs data attribute, auto field initialiser类与数据属性，自动字段初始化器
【发布时间】：2012-10-30 10:24:53
【问题描述】：

一点背景

我在 javascript/jQuery 中编写了一个方法，该方法循环遍历字段并根据它们是什么来设置它们，即下拉、自动完成、文本等...

这样做的原因是我对输入和文本区域进行了专门的样式设置，一旦页面加载，它们必须在 javascript 中初始化。此类中的方法循环遍历页面上的每个字段，并根据它的内容设置事件。

目前我通过给字段容器一个类来检测每个字段是什么，jQuery 读取这个类并相应地设置字段，如下所示：

<div id="company-container" class="autocomplete autocomplete-215 form-sprite">
    <input type="text" class="field" name="company" id="company" autocomplete="off" maxlength="80" tabindex="1" />
    <div class="label overflow" id="company-label">Company</div>
    <div class="glow form-sprite" id="company-glow"></div>
    <ul class="subNav"></ul>
</div>

jQuery 看起来像这样：

$(options.fields).each(function(){
    // Set the field events
    SineMacula.setBlur($(this));        
    SineMacula.setFocus($(this));
    SineMacula.toggleLabel($(this));
    // If the field is a drop down then set it
    if($(this).parent().hasClass('dropdown')){
        SineMacula.setDropdown($(this).parent());
    }
    // If the field is a checkbox then set it
    if($(this).parent().hasClass('checkbox')){
        SineMacula.setCheckbox($(this).parent());
    }
    // and so on ...
});

上面的大部分代码都可以忽略，但它应该让你知道我在做什么......

问题

我最近注意到 HTML5 属性 data-*，其中 * 可以是任何东西。我的问题是：

我应该使用 HTML5 data-* 属性而不是类吗？
有比data-* 属性或类更好的方法吗？
虽然data-*属性是HTML5，但只要定义了正确的DOCTYPE，它是否兼容早期的浏览器？

【问题讨论】：

标签： javascript jquery html custom-data-attribute sinemacula

【解决方案1】：

在这种情况下，它可能无关紧要，因为您仍在使用有效的属性（而不是随机的自定义属性）。如果你觉得data-* 属性更符合语义，那就去吧。
不，这就是 data-* 属性的设计目的 - 在元素上存储任意数据。
是的，它与所有浏览器兼容。它只会被旧浏览器忽略，但您始终可以使用 getAttribute 方法检索其值。

【讨论】：

谢谢詹姆斯，这就是我想知道的 :-)

【解决方案2】：

如果您仍然使用这些类进行样式设置，那么您也可以将它们用于您的 jQuery 选择器。实际上我相信使用类作为选择器会稍微快一些，而不是data-* 属性。
如果你打算存储一些与元素相关的任意数据，data-* 属性绝对是要走的路。
是的，它们向后兼容。使用 jQuery，您可以使用 .data() 方法获取它们的值。如果您打算使用纯 JavaScript 阅读它们，则需要对使用 .getAttribute() 的旧浏览器进行后备。这个SO answer 再详细一点。

【讨论】：