我是靠谱客的博主 犹豫盼望,最近开发中收集的这篇文章主要介绍记一次HTML5的data()标准-大小写规范的重要性,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

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

今天在测试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-* 属性的。。。。。。。

shit!!!!

然后我又无耻的查看了下  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

最后

以上就是犹豫盼望为你收集整理的记一次HTML5的data()标准-大小写规范的重要性的全部内容,希望文章能够帮你解决记一次HTML5的data()标准-大小写规范的重要性所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(43)

评论列表共有 0 条评论

立即
投稿
返回
顶部