浅析html5的dataset

 

前言：

 

很多时候，我们在操作页面某些元素的时候，需要存储一些数据，一般大家很常见的方式都会设置一些自定义属性，比如：

 

微博feed list里面的图片放大：

 

 

大家看到有一个自定义的key------action-data，里面存储了一些数据。

 

 

那问题来了：

 

• 自定义属性命名有没有规范或者标准？？
• 获取自定义属性的值咋搞？？

正文：

先介绍一下html5的dataset!!!!!!!

• what is the dataset？

以data-为前缀的，可以通过dataset对象来获取相关的属性值。

直接上例子吧！！！！

<a id="test" data-userName="zhangyaohun" data-user-job="fe">测试文字</a>

 

var test = document.getElementById("test");
console.log(test.dataset);

 

我们看看结果：

 

疑问又来了：what is the DOMStringMap??????

 

资料查看：http://www.w3.org/TR/html5/common-dom-interfaces.html#domstringmap-0

 

 

结论也来了：

 

 

• 首先自定义属性都会把大写转换为小写
• 出现"data-user-job"，在返回的dataset对象里面就是userJob
• 在调用dataset获取的对象里面的key都是原来data-后面的

浏览器兼容性相关：

数据来自：http://caniuse.com/#feat=dataset

 

----------------------------------------------分割线-----------------------------------------------------------------------------

获取自定义属性一般采用getAttribute

 

dataset VS getAttribute的性能单侧：

http://jsperf.com/html5-data-attribute-dataset-vs-getattribute

http://jsperf.com/dataset-vs-attributes-loop/3

----------------------------------------------分割线-----------------------------------------------------------------------------

感想：

其实以后再设计类似data存储和获取相关的时候，建议命名采用data-的前缀，高级浏览器采用dataset的分支

一个相关的Jquery插件：http://www.orangesoda.net/jquery.dataset.html

扩展阅读：

http://www.zhangxinxu.com/wordpress/?p=1693