html 5 data-* (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标准。

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