In-depth understanding of the implementation of jQuery.data()

jQuery.data() is used to attach (and obtain) data to ordinary objects or DOM Elements.

The following will analyze its implementation in three parts:

1. Use name and value to append data to the object; that is, pass in three parameters, the first parameter is the object that needs to be appended with data, and the second parameter is the name of the data, and the third parameter is the value of the data. Of course, if you just get the value, you don't need to pass in the third parameter.

2. Use another object to append data to the object; that is, pass in two parameters, the first parameter is the data object that needs to be appended (we call it "obj"), and the second parameter is also an object (we Call it "another"); the key-value pairs contained in "another" will be copied to the data cache of "obj" (we call it "cache").

3. Attach data to DOM Element; DOM Element is also a kind of Object, but IE6 and IE7 have problems with garbage collection of objects directly attached to DOM Element; therefore we store these data in the global cache (we call it ("globalCache"), that is, "globalCache" contains the "cache" of multiple DOM Elements, and adds an attribute on the DOM Element to store the uid corresponding to the "cache".

Use name and value to append data to objects

When using jQuery.data() to append data to ordinary objects, the essence is to attach a "cache" to the object and use a special attribute name.

The "cache" that stores data is also an object. The data we attach to "obj" actually becomes the attribute of "cache". And "cache" is an attribute of "obj". In jQuery 1.6, the name of this attribute is "jQuery16" plus a random number (such as "jQuery16018518865841457738" mentioned below).

We can use the following code to test the functionality of 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>

The displayed result is:

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

In this code, we first append on "obj" An attribute (name is "name", value is "value"), and then the attached data is obtained through $.data(obj, 'name'). In order to gain a deeper understanding of the implementation mechanism, we have used a loop to obtain the properties of "obj", which actually removes the "cache" object attached to "obj".

You can see that jQuery.data() actually attaches "obj" to an object named "jQuery16018518865841457738" (the name is random), which is "cache". The attributes attached to the object using jquery.data() actually become attributes of this "cache".

We can use the following code to achieve a similar function:

$ = 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);
   }
  }
 }
}();

The first line of code in

function defines "expando", which is "jQuery1.6" plus a random number (0.xxxx), And remove the non-numeric part; this format will be used in other places in jQuery and will not be discussed here; you only need to know that this is a special name and can be used to identify different pages (such as in different iframes) "expando" will make a difference).

Next, the function getData() for obtaining data is defined, which is to obtain an attribute from "cache"; in fact, it returns cache[name].

Then there is the setData() function, which is used to set the attribute of "cache"; in fact, it is to set the value of cache[name].

is followed by getCache() to get the "cache" on "obj", that is, obj[expando]; if obj[expando] is empty, initialize it.

Finally, the data method is exposed. First, according to the incoming "obj", get the "cache" attached to "obj"; when two parameters are passed in, the getData() method is called; when three parameters are passed in , the setData() method is called.

Use another object to append data to the object

In addition to assigning values ​​by providing name and value, we can also directly pass in another object ("another") as a parameter. In this case, the attribute name and attribute value of "another" will be treated as multiple key-value pairs, and the "name" and "value" extracted from them will be copied to the cache of the target object.

The functional test code is as follows:

<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>

The displayed result is as follows:

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

In the above test code, we first pass in an "another" object with two key-value pairs, Then use $.data(obj, 'name1') and $.data(obj, 'name2') to obtain additional data; similarly, in order to deeply understand the mechanism, we took out the hidden data by traversing "obj" "cache" object, and obtained the values ​​of the "name1" attribute and "name2" attribute of the "cache" object.

You can see that jQuery.data() actually attaches an object named "obj.jQuery1600233050178663064" to "obj", which is "cache". Key-value pairs passed in using jquery.data() are copied to "cache".

We can use the following code to achieve similar functions:

$ = 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 中这刻意优化的地方非常多，在许多原本可以统一处理的对方都进行了特殊处理。但这在一定程度上，也造成了阅读源码的障碍。当然这是作者（及其他代码贡献者）本身的编程哲学，这里就不加评论了。