从数据属性解析 $.extend 配置答案

【问题标题】：Parse $.extend configuration from data attribute从数据属性解析 $.extend 配置
【发布时间】：2012-01-31 19:12:49
【问题描述】：

我知道我可以使用 $.data 但如何遍历所有 data- 属性并将值与默认插件配置合并？

(function($){

  $.fn.plugin = function(opts){  

    opts = $.extend({
      foo: 'abc',
      boo: 45
    }, opts);

    return this.each(function(){        
          ...
    });

  };
})(jQuery);

所以如果我使用

$('.el').plugin();

它应该在.el 上查找数据属性，例如 data-foo 等 ...

【问题讨论】：

标签： javascript jquery html jquery-plugins

【解决方案1】：

在您的each() 循环中，您可以将data() 返回的对象与您的默认值合并，然后在对$.extend() 的一次调用中将opts 参数与结果合并：

$.fn.plugin = function(opts) {
    return this.each(function() {        
        var thisOpts = $.extend({
            foo: "abc",
            boo: 45
        }, $(this).data(), opts);
        // Now use 'thisOpts' as operating parameters for this element...
    });
};

这应该可以实现您想要的：opts 参数具有最高优先级，其次是当前元素的 data- 属性，然后是插件默认值。

【讨论】：

【解决方案2】：

.data() 方法支持 data- 属性。

从 jQuery 1.4.3 开始，HTML 5 数据属性将自动拉入 jQuery 的数据对象。属性的处理 jQuery 1.6 中更改了嵌入式破折号以符合 W3C HTML5 规范。

在不指定参数的情况下调用它会返回一个包含所有数据属性的键/值对的对象：

var mydata = $("#mydiv").data();

【讨论】：

【解决方案3】：

你可以像这样获取一个元素的所有属性：

//get the element and setup an array for output
var el  = document.getElementById("o"),
    arr = [];

//loop through each attribute for the element
for (var i = 0, attrs = el.attributes, l=attrs.length; i < l; i++){

    //if the current attribute starts with `data-` then add it to the array
    if (attrs.item(i).nodeName.substr(0, 5) == 'data-') {
        arr.push(attrs.item(i).nodeName);
    }
}

这是一个演示：http://jsfiddle.net/ksbD3/1/

我也从这个答案中获得了上述大部分代码：Get all Attributes from a HTML element with Javascript/jQuery

【讨论】：

【解决方案4】：

您可以在 jQuery 对象上使用data() 方法，它将所有数据属性作为键/值对。试试这个。

(function($){

  $.fn.plugin = function(opts){  

    //this.data() will give { foo: 'abc', boo: 45 ... }
    opts = $.extend(this.data(), opts);

    return this.each(function(){        
          ...
    });

  };
})(jQuery);

.data()参考：http://api.jquery.com/data/

【讨论】：

【解决方案5】：

感谢您使用 opts = $.extend(this.data(), opts); 指出的所有答案

这里需要补充一个重要的事实：HTML数据属性的转换。

data-coolName 可以这样访问 this.data(coolname)

data-another-cool-name 可以这样访问 this.data(anotherCoolName)

详情：Does jQuery internally convert HTML5 data attribute keys to lowercase?

java的大小写敏感和属性名的转换如果你不知道的话可能是一个陷阱。

【讨论】：