jQuery.data() 儲存資料

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') + '
');  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')  + '
' );  document.write("$.data(obj, 'name2') = " + $.data(obj, 'name2') + '
');  for (var key in obj) {      document.write("obj." + key + '.name1 = ' + obj[key].name1 + '
');      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採用了與普通對象有所不同的方式附加資料。

測試代碼如下：

<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 上取出了附加的屬性並輸出。