javascript - 有没有一种简单/快速的方法可以将 "data-"属性映射到大小写混合的属性名称？

Question

我有一个基础插件类，用作我所有 jQuery 插件的基础。它类似于 jQuery UI 小部件，但为我做了更多繁重的工作。

我现在希望将 data- 属性值从附加元素映射到传递给插件的任何选项。这将允许插件不仅采用典型的 options 对象，而且还允许对单个元素进行数据驱动的覆盖值(常见要求)。

我遇到的问题是我的选项属性通常是大小写混合的，例如MaxHeight，但显然 HTML 规范只允许小写字符进入data- 属性名称。

作为示例测试台:http://jsfiddle.net/TrueBlueAussie/tfkrwq09/1/

HTML:

<div id="test" data-DataTest="test2"></div>

jQuery:

var object = {
    DataTest: 123
};
$.each($('#test').data(), function (k, v) {
    object[k] = v;
});

console.log(object.datatest); // test
console.log(object.DataTest); // 123

期望的结果:

console.log(object.datatest); // undefined
console.log(object.DataTest); // test

我正在寻找将 data- 属性映射到混合大小写属性的方法，同时保持当前的速度和简单性(如果可能)。

Answer 1

请参阅以下有关驼峰规则的链接:https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset

所以在你的情况下，我会使用:

<div id="test" data--data-test="test2"></div>

得到:

object.DataTest;//测试2