jQuery.data() 存储数据

jQuery.data() 的实现方式

jQuery.data() 的作用是为普通对象或 DOM Element 附加数据。

以下将分三个部分分析事实上现方式：

1. 用name和value为对象附加数据；即传入三个參数，第一个參数为须要附加数据的对象，第二个參数为数据的名称，第三个參数为数据的值。

当然，仅仅是获取值的话，也能够不传入第三个參数。

2. 用还有一个对象为对象附加数据。即传入两个參数。第一个參数为须要附加的数据对象（我们称之为“obj”），第二个參数也是一个对象（我们称之为“another”）；“another”中包括的键值对将会被拷贝到 “obj” 的数据缓存（我们称之为“cache”）中。

3. 为 DOM Element 附加数据；DOM Element 也是一种 Object 。但 IE6、IE7 对直接附加在 DOM Element 上的对象的垃圾回收存在问题。因此我们将这些数据存放在全局缓存（我们称之为“globalCache”）中，即 “globalCache” 包括了多个 DOM Element 的 “cache”。并在 DOM Element 上加入一个属性，存放 “cache” 相应的 uid 。

用name和value为对象附加数据

使用 jQuery.data() 为普通对象附加数据时，其本质是将一个 “cache” 附加到了对象上，并使用了一个特殊的属性名称。

存放数据的 “cache” 也是一个 object。我们为 “obj” 附加的数据实际上成为了 “cache” 的属性。而 “cache” 又是 “obj” 的一个属性，在 jQuery 1.6中，这个属性的名称是 “jQuery16”加上一个随机数（如以下提到的 “jQuery16018518865841457738” ）。

我们能够用以下的代码来測试 jQuery.data() 的功能：

<script type="text/javascript" src="jquery.js"></script>
<script>
obj = {};
$.data(obj, 'name', 'value');
document.write("$.data(obj, 'name') = " + $.data(obj, 'name') + '<br />');  

for (var key in obj) {
    document.write("obj." + key + '.name = ' + obj[key].name);
}
</script>

显示结果为：

$.data(obj, 'name') = value
obj.jQuery16018518865841457738.name = value  

在这段代码中，我们首先在 “obj” 上附加了一个属性（名称为“name”。值为“value”），然后通过 $.data(obj, ‘name’) 来获取所附加的数据。为了深入了解当中的实现机制，我们有使用了一个循环来获取 “obj” 的属性，实际上是取出了在 “obj” 上附加的 “cache”对象。

能够看到，jQuery.data() 实际上为 “obj” 附加到了名为 “jQuery16018518865841457738” （这个名称是随机的）的对象，也就是 “cache” 上。用 jquery.data() 方式为对象附加的属性实际上成为了这个 “cache” 的属性。

用还有一个对象为对象附加数据

除了以提供 name 和 value 的方式进行赋值。我们还能够直接传入还有一个对象（ “another” ）作为參数。这样的情况下，“another” 的属性名称和属性值将被视为多个键值对。从中提取的 “name” 和 “value” 都会被拷贝到目标对象的缓存中。

功能測试代码例如以下：

<script type="text/javascript" src="jquery.js"></script>
<script>
obj = {};
$.data(obj, {name1: 'value1', name2: 'value2'});  

document.write("$.data(obj, 'name1') = " + $.data(obj, 'name1')  + '<br />' );
document.write("$.data(obj, 'name2') = " + $.data(obj, 'name2') + '<br />');  

for (var key in obj) {
    document.write("obj." + key + '.name1 = ' + obj[key].name1 + '<br />');
    document.write("obj." + key + '.name2 = ' + obj[key].name2);
}
</script>  

显示结果例如以下：

$.data(obj, 'name1') = value1
$.data(obj, 'name2') = value2
obj.jQuery1600233050178663064.name1 = value1
obj.jQuery1600233050178663064.name2 = value2  

以上測试代码中，我们先将一个带有两个键值对的 “another” 对象传入，然后分别用 .data(obj,′name1′)和.data(obj, ‘name2’) 获取附加的数据；相同，为了深入了解当中的机制，我们通过遍历 “obj” 的方式取出了隐藏的 “cache” 对象。并获得了 “cache” 对象的 “name1” 属性和 “name2” 属性的值。

能够看到，jQuery.data() 实际上为 “obj” 附加了名为 “obj.jQuery1600233050178663064” 的对象，也就是 “cache” 上。用 jquery.data() 方式传入的键值对都被拷贝到了 “cache” 中。

为 DOM Element 附加数据

因为 DOM Element 也是一种 Object，因此之前的方式也能够为 DOM Element 赋值。但考虑到 IE6、IE7 中垃圾回收的问题（不能有效回收 DOM Element 上附加的对象引用）。jQuery採用了与普通对象有所不同的方式附加数据。

測试代码例如以下：

<div id="div_test" />  

<script type="text/javascript" src="data.js"></script>
<script>
window.onload = function() {
    div = document.getElementById('div_test');
    $.data(div, 'name', 'value');
    document.write($.data(div, 'name'));
}
</script>  

显示结果例如以下：

value

測试代码中，首先通过 document.getElementById 方法获取了一个 DOM Element （当然，也能够用 jQuery 的选择器），然后在这个 DOM Element 上附加了一个属性。随后就从 DOM Element 上取出了附加的属性并输出。