html5制作大小写转换,记一次HTML5的data()标准-大小写规范的重要性

今天在测试IE与chrome的兼容性问题的时候，发现了一个奇怪的现象。

使用到了data()属性，  我在html标签中使用了 data-myName

在chrome中使用

var ddd = $(this).data()

var xxx =  ddd.myname;

这样是可以获取到的。

但是换成了IE 之后。。。。

TMD 就直接不鸟我了。。。。直接就获取不到这个变量了。。。  shit 啊

后来在我的导师葛亮的指导下，他说html5 data()属性的一些东西。然后我又去查了下jquery的api 得知到。。。

// Gets all values

if (key === undefined) {

if (this.length) {

data = jQuery.data(elem);

if (elem.nodeType === 1 && !jQuery._data(elem, "parsedAttrs")) {

attr = elem.attributes;

for (l = attr.length; i < l; i++) {

name = attr[i].name;

if (name.indexOf("data-") === 0) {

name = jQuery.camelCase(name.substring(5));

dataAttr(elem, name, data[name]);

}

}

jQuery._data(elem, "parsedAttrs", true);

}

}

return data;

}

然后进入到 dataAttr函数中去了解了下

function dataAttr(elem, key, data) {

// If nothing was found internally, try to fetch any

// data from the HTML5 data-* attribute

if (data === undefined && elem.nodeType === 1) {

var name = "data-" + key.replace(rmultiDash, "-$1").toLowerCase();

data = elem.getAttribute(name);

if (typeof data === "string") {

try {

data = data === "true" ? true : data === "false" ? false : data === "null" ? null : jQuery.isNumeric(data) ? +data : rbrace.test(data) ? jQuery.parseJSON(data) : data;

} catch(e) {}

// Make sure we set the data so it isn't changed later

jQuery.data(elem, key, data);

} else {

data = undefined;

}

}

return data;

}

jquery 建议我们所写的data是遵守html5 的data-*　属性的。。。。。。。

ｓｈｉｔ！！！！

然后我又无耻的查看了下  html5 的 data-* 的属性

然后查到了，

All attribute names on HTML elements in HTML documents get ASCII-lowercasedautomatically, so the restriction on ASCII uppercase letters doesn't affect such documents.

看到了ASCII-lowercased了之后我顿时想死了。。。。。  尼玛只能小写啊！！！！

所以严格点的规范是写成：

在html中data-my-name

然后在js中获取是：

var ddd = $(this).data()

var xxx =  ddd.myName;(js会自动转换成驼峰形式来获取的)

所有说：：：：：规范啊！规范啊！！！！