Jquery.data () storing data

How to implement Jquery.data ()

The role of Jquery.data () is to append data to a normal object or DOM Element.
The following is a three-part analysis of how it is implemented:
1. Append data to the object with name and value, i.e. pass in three parameters, the first parameter is the object that needs additional data, 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 can not pass in the third argument.
2. Append the data to the object with another object, i.e. pass in two parameters, the first parameter is the data object that needs to be appended (we call "obj"), the second parameter is also an object (what we call "another"); the key-value pairs contained in "another" will be copied to "obj" Data cache (which we call "cache").
3. Append data to DOM element; Dom element is also an object, but IE6, IE7 has problems with garbage collection of objects directly attached to the DOM element, so we store this data in the global cache (What we call "GLOBALCAC He ")," Globalcache "contains the" cache "of multiple DOM element and adds a property on the DOM element to hold the corresponding UID of" cache ".

Attaching data to an object with name and value

When attaching data to a normal object using Jquery.data (), it is essentially attaching a "cache" to the object and using a special property name.
The "cache" that holds the data is also an object, and the data that we append to "obj" actually becomes the "cache" property. and "Cache" is also a property of "obj", in JQuery 1.6, the name of this property is "JQUERY16" plus a random number (as mentioned below "jQuery16018518865841457738").

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

The results shown are:

‘name‘value  value  

In this code, we first append an attribute to "obj" (named "Name", "value") and then get the appended data through $.data (obj, ' name '). In order to gain an insight into the implementation mechanism, we have used a loop to get the properties of "obj", in effect removing the "cache" object attached to "obj".
As you can see, jquery.data () actually attaches "obj" to an object named "jQuery16018518865841457738" (the name is random), that is, "cache". The property attached to an object in Jquery.data () is actually a property of the "cache".

Attaching data to an object with another object

In addition to assigning values in the form of a name and value, we can also pass directly to another object ("another") as a parameter. In this case, the property names and property values of "another" are treated as multiple key-value pairs, and the "name" and "value" from which they are extracted are copied to the cache of the target object.
The functional test code is as follows:

<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[k      Ey].name1 +  ' <br/> ' ); document.write ( "obj."  + key +  '. name2 = '  + obj[key]  . name2); }  </script>  

The results appear as follows:

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

In the test code above, we first pass in a "another" object with two key-value pairs, and then use the .d aTa(obJ , the Name 1 )and the . Data (obj, ' name2 ') gets the additional data; Similarly, to gain a deeper understanding of the mechanism, we remove the hidden "cache" object by traversing "obj" and get the value of the "Name1" property and the "Name2" property of the "Cache" object.

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

Attaching data to DOM Element

Because the DOM element is also an object, the previous method can also assign a value to the DOM element, but considering the garbage collection problem in IE6, IE7 (which does not effectively reclaim the attached object reference on the DOM element), jquery uses a common object that has no Append data in the same way.

The test code is as follows:

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

The results appear as follows:

value

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Jquery.data () storing data