javascript - 类与数据属性，自动字段初始化器

Question

一点背景

我在 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-*，其中 * 可以是任何内容。我的问题是:

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

Answer 1

1. 在这种情况下，这可能无关紧要，因为您仍在使用有效属性(而不是随机的自定义属性)。如果您觉得 data-* 属性会更语义化，那就去做吧。

2. 不，这就是 data-* 属性的设计目的 - 在元素上存储任意数据。

3. 是的，它与所有浏览器兼容。它只会被旧版浏览器忽略，但您始终可以使用 getAttribute 方法检索它的值。