记一次HTML5的data()标准-大小写规范的重要性

最新推荐文章于 2024-08-04 16:33:59 发布

AirZH??

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量499

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/bosscheng/blog/132826

版权

2019独角兽企业重金招聘Python工程师标准>>>

今天在测试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-lowercased automatically, 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会自动转换成驼峰形式来获取的）

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

转载于:https://my.oschina.net/bosscheng/blog/132826