深入理解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="jqueryjs"></script>
<script>
obj = {};
$data(obj, &#39;name&#39;, &#39;value&#39;);
documentwrite("$data(obj, &#39;name&#39;) = " + $data(obj, &#39;name&#39;) + &#39;<br />&#39;);
  
for (var key in obj) {
 documentwrite("obj" + key + &#39;name = &#39; + obj[key]name);
}
</script>

   

顯示結果是：

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

   

顯示結果為：

obreee

   

了一個屬性（名稱為“name”，值為“value”），然後透過$.data(obj, 'name') 來取得所附加的資料。為了深入了解其中的實作機制，我們有使用了一個迴圈來取得 “obj” 的屬性，實際上是取出了在 “obj” 上附加的 “cache”物件。

可以看到，jQuery.data() 實際上為 “obj” 附加到了名為 “jQuery16018518865841457738” （這個名稱是隨機的）的對象，也就是 “cache” 上。用 jquery.data() 方式為物件附加的屬性其實成為了這個 “cache” 的屬性。

我們可以用下面的程式碼實現類似的功能：

$ = function() {
 var expando = "jQuery" + ("6" + Mathrandom())replace(/\D/g, '');
  
 function getData(cache, name) {
  return cache[name];
 }
  
 function setData(cache, name, value) {
  cache[name] = value;
 }
  
 function getCache(obj) {
  obj[expando] = obj[expando] || {};
  return obj[expando];
 }
  
 return {
  data : function(obj, name, value) {
   var cache = getCache(obj);
  
   if (value === undefined) {
    return getData(cache, name);
   } else {
    setData(cache, name, value);
   }
  }
 }
}();

   

function 中的第一行程式碼定義了「expando」 ，即"jQuery1.6" 加上一個隨機數（0.xxxx），並將其中非數字的部分去掉；這種格式將在jQuery的其他地方用到，這裡不做探討；只需要知道這是一個特殊的名稱，並且可以用於標識不同的頁面（比如不同iframe 中的“expando” 就會有所不同）。

接下來定義了取得資料的函數 getData()， 即從 “cache” 中取得一個屬性；實際上也就是傳回 cache[name] 。 

接著是 setData() 函數，用來設定 “cache” 的屬性；實際上也就是設定 cache[name] 的值。 

之後是 getCache() ， 取得 “obj” 上的 “cache”，即 obj[expando]；如果 obj[expando] 為空，則進行初始化。

最後公開了data 方法，先根據傳入的“obj”，獲取附加在“obj” 上的“cache”； 當傳入兩個參數時，調用getData（）方法；當傳入三個參數時，則呼叫setData() 方法。

用另一個物件為物件附加資料

除了以提供 name 和 value 的方式進行賦值，我們還可以直接傳入另一個物件（ “another” ）作為參數。在這種情況下，「another」 的屬性名稱和屬性值將被視為多個鍵值對，從中提取的 “name” 和 “value” 都會複製到目標物件的快取中。

功能測試程式碼如下：

<script type="text/javascript" src="jqueryjs"></script>
<script>
obj = {};
$data(obj, {name1: &#39;value1&#39;, name2: &#39;value2&#39;});
  
documentwrite("$data(obj, &#39;name1&#39;) = " + $data(obj, &#39;name1&#39;) + &#39;<br />&#39; );
documentwrite("$data(obj, &#39;name2&#39;) = " + $data(obj, &#39;name2&#39;) + &#39;<br />&#39;);
  
for (var key in obj) {
 documentwrite("obj" + key + &#39;name1 = &#39; + obj[key]name1 + &#39;<br />&#39;);
 documentwrite("obj" + key + &#39;name2 = &#39; + obj[key]name2);
}
</script>

   

顯示結果如下：

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

   

的測試碼中然後分別用$.data(obj, 'name1') 和$.data(obj, 'name2') 取得附加的資料；同樣，為了深入了解其中的機制，我們透過遍歷「obj」 的方式取出了隱藏的“cache” 對象，並獲得了“cache” 對象的“name1” 屬性和“name2” 屬性的值。

可以看到，jQuery.data() 實際上為 “obj” 附加了名為 “obj.jQuery1600233050178663064” 的對象，也就是 “cache” 上。用 jquery.data() 方式傳入的鍵值對都複製到了 “cache” 中。

我們可以用下面的程式碼實現類似的功能：

$ = function() {
 // Other codes
  
 function setDataWithObject(cache, another) {
  for (var name in another) {
   cache[name] = another[name];
  }
 }
  
 // Other codes
  
 return {
  data : function(obj, name, value) {
   var cache = getCache(obj);
  
   if (name instanceof Object) {
    setDataWithObject(cache, name)
   } else if (value === undefined) {
    return getData(cache, name);
   } else {
    setData(cache, name, value);
   }
  }
 }
}();

   

🎜🎜

这段代码是在之前的代码的基础上进行修改的。首先增加了内部函数 setDataWithObject() ，这个函数的实现是遍历 “another” 的属性，并复制到 “cache” 中。

然后，在对外开放的 data 函数中，先判断传入的第二个参数的名称，如果这个参数是一个 Object 类型的实例，则调用 setDataWithObject() 方法。

为 DOM Element 附加数据

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

测试代码如下：

<div id="div_test" />
  
<script type="text/javascript" src="datajs"></script>
<script>
windowonload = function() {
 div = documentgetElementById(&#39;div_test&#39;);
 $data(div, &#39;name&#39;, &#39;value&#39;);
 documentwrite($data(div, &#39;name&#39;));
}
</script>

显示结果如下：

value

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

因为考虑到 IE6、IE7 对 DOM Element 上的对象引用的垃圾回收存在问题，我们不会直接在 DOM Element 上附加对象；而是使用全局cache，并在 DOM Element 上附加一个 uid。

实现方式如下：

$ = function() {
 var expando = "jQuery" + ("6" + Mathrandom())replace(/\D/g, '');
 var globalCache = {};
 var uuid = 0;
  
 // Other codes
  
 function getCache(obj) {
  if (objnodeType) {
   var id = obj[expando] = obj[expando] || ++uuid;
   globalCache[id] = globalCache[id] || {};
   return globalCache[id];
  } else {
   obj[expando] = obj[expando] || {};
   return obj[expando];
  }
 }
  
 // Other codes
}();

 这段代码与之前的代码相比，增加了 globalCache 和 uuid，并修改了 getCache() 方法。

globalCache 对象用于存放附加到 DOM Element 上的 “cache”，可以视为 “cache” 的“容器”。uuid 表示 “cache” 对应的唯一标识，是唯一且自增长的。uuid 或被存放在 DOM Element 的 “expando” 属性中。 

getCache() 函数中增加了一个判断，即 “obj” 具有 “nodeType” 属性，就认为这是一个 DOM Element；这种情况下，就先取出附加在 “obj” 上的 id ，即 obj[expando] ；如果 obj[expando] 未定义，则先用 ++uuid 对其进行初始化；取出 id 之后，就到 globalCache 中找到对应的 “cache” ，即 globalCache[id], 并返回。

    到此为止，jQuery.data() 函数的实现就介绍完了；但是，这里还有一个需要思考的问题：为什不都统一用 “globalCache” 存储，而要将 “cache” 直接附加到普通对象上？我认为这应该是一种性能优化的方式，毕竟少一个引用的层次，存取速度应该会略快一些。 jQuery 中这刻意优化的地方非常多，在许多原本可以统一处理的对方都进行了特殊处理。但这在一定程度上，也造成了阅读源码的障碍。当然这是作者（及其他代码贡献者）本身的编程哲学，这里就不加评论了。