7C00.ME/houmu 2013-10-04

Html5 Dataset属性和jquery的data方法比较

一些文章在介绍html 5 data-* (dataset)属性时,会提到jquery的data方法,认为data方法能够很好的利用html 5的这个特性。但实际上,二者的兼容性是很差的。下面给出一段测试代码:

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<div id="e" data-v="origin"></div>
<script>
var log = function(msg){console.log(msg);};
var print = function(){
    log("jquery.data    : " + je.data("v"));
    log("native dataset : " + ne.dataset["v"]);
    log("--");
}

var je = $("#e");
var ne = document.getElementById("e");

log("origin value");
print();

log("set with native dataset");
ne.dataset["v"] = "native";
print();
/* reset */ ne.dataset["v"] = "origin";

log("set with jquery data");
je.data("v", "jquery");
print();
/* reset */ je.data("v", "origin");
</script>

在console的输出结果如下:

origin value jquery.data : origin native dataset : origin – set with native dataset jquery.data : origin native dataset : native – set with jquery data jquery.data : jquery native dataset : origin –

测试的最开始,data()和dataset从html中读取的data-v值是一致的,但是当对值进行修改时,结果就不一样了。另外,通过审查元素可以发现:通过jquery.data方法设置data属性不会修改DOM;而通过dataset方法则会同步修改DOM。或许可以认为,jquery data的实现方式没有遵循html 5标准。

鉴于这种情况的存在,在一个项目中应该不要混用两种方法。