html 5 data-* (dataset) 屬性和 jquery data方法比較 - tt-0411－IT工程師數位筆記本

文章出處

一些文章在介紹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標準。

鑒于這種情況的存在，在一個項目中應該不要混用兩種方法。

文章列表