使用jQuery的data读取标签缓存数据

最近做项目，在 HTML 标签里面使用 data-* 的形式缓存信息时，遇到了之前一直没碰到的问题，就重新了解了下 data 的机制。现在整理一下，以供之后参考。

使用 jQuery 的data(name)和attr(name)的区别是：

attr 取值，取的是 DOM 节点中的属性值，写在 HTML 标签里，变动会体现在标签里；
data 取值之后会放入 jQuery 元素对象的缓存 ( dataset ) 中，之后变动也是在缓存中。

jQuery data 取值

简单介绍一下 data函数

data(name)
返回元素上储存的响应名字的数据，可以用 data(name, value) 来设定。
example: $(selector).data(name) ;
如果 jQuery 集合指向多个元素，那么只返回第一个元素的对应数据。
这个函数可以用于在一个元素上存取数据而避免了循环引用的风险。
jQuery.data 是1.2.3版的新功能。

用法：
在 HTML 标签中的 data-xxx 放入数据进行初始化，之后使用 $dom.data(“xxx”) 获取对应的值。

<table>
<tr data-resourceuuid="201612121641078700726">
    <td width="30%">2</td>
    <td width="35%">3</td>
    <td width="30%"><a href="#" onclick="test(this)">点击</a></td>
</tr>

</table>

<script src="../js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function test(obj){
    var $a = $(obj);
    var $li = $a.parent().parent();

    var resourceid = $li.data("resourceuuid");
    console.log("resourceuuid="+resourceid+", type ="+ typeof resourceid);

    var resourceid2 =$li.attr("data-resourceuuid");
    console.log("resourceuuid2="+resourceid2+", type ="+ typeof resourceid2);
}
</script>

在这里使用 data() 函数获取的值跟预期有出入。

使用 jquery-1.7.2.js 的时候，data() 和 attr() 获取的值不一致。

resourceuuid=201612121641078700000, type =number
resourceuuid2=201612121641078700726, type =string

而使用 jquery-1.11.2.js 的时候，

<script src="../js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>

data()和attr()返回的值是一致的

resourceuuid=201612121641078700726, type =string
resourceuuid2=201612121641078700726, type =string

旧版的 jQuery 的 data() 函数和新版的处理逻辑有区别。如果碰到类似的问题，优先考虑jQuery版本问题。
当然稳妥的方式是 使用 attr() 函数，不过相较data()函数来说，效率要低一些，因为每次都会读取DOM节点属性 。

两者的区别主要是：
data() 函数获取key对应的value，如果没在 jQuery 缓存中找到key，则会读取DOM节点的对应属性来赋值。之后再使用data()获取该属性值时，会在缓存中找。相对应的使用data对属性赋值后，缓存中的内容也会变化，但不影响DOM节点的对应属性值。
attr() 函数会直接操作DOM节点的对应属性，重新对属性赋值后，相应的HTML代码也会发生变化。

使用attr()修改 data-resourceuuid 属性:

function test(obj){
    ...
    var resourceid2 =$li.attr("data-resourceuuid");
    console.log("resourceuuid2="+resourceid2+", type ="+ typeof resourceid2);
    $li.attr("data-resourceuuid", "2134");
}

执行之后，HTML代码发生变化:

<tr data-resourceuuid="123456">
    ...
</tr>

使用 data() 修改 resourceuuid 属性:

function test(obj){
    ...
    var resourceid2 =$li.attr("data-resourceuuid");
    console.log("resourceuuid2="+resourceid2+", type ="+ typeof resourceid2);
    //$li.attr("data-resourceuuid", "2134");
    $li.data("resourceuuid", "2134");
}

执行之后，HTML代码没有变化:

<tr data-resourceuuid="201612121641078700726">
...
</tr>