jquery data caching scenarios in detail: Use of $.data ()

We often use a hidden control or a JS global variable to temporarily store data, global variables are prone to name pollution, hidden controls cause often read and write Dom wasted performance. jquery provides its own data caching scheme to achieve the same effect as hiding controls and global variables, but jquery is more elegant in its implementation. In order to better use the jquery data caching scheme, we need to Master $.data (), $.cache, $.expando, $.hasdata (), $.removedata ().

$.hasdata () is used to determine whether an object has additional properties that can be attached to any JavaScript object and HtmlElement object. $.data () is used to read or modify property values. $.removedata () is used to remove properties that have already been added, in order to free up memory and to avoid wasting memory on too many useless properties.

[JavaScript]View PlainCopy

2. var myObj = {};
4. HasData is used to determine whether the HtmlElement or JS object has data
6. Console.log (Jquery.hasdata ($ ("#a"))); False
10. Data () Add property
12. $.data (MYOBJ, ' name ', ' aty ');
14. Console.log (Jquery.hasdata (MYOBJ)); //True
18. Data () Read property
20. Console.log ($.data (MYOBJ, ' name ')); Aty
24. Removedata Deleting properties
26. $.removedata (MYOBJ, ' name ');
28. Console.log ($.data (MYOBJ, ' name ')); Undefined
32. If all properties are deleted, then HasData returns false
34. Console.log (Jquery.hasdata (MYOBJ)); //False

Add an attribute to the HtmlElement object, using the same method as adding an attribute to the normal JS object.

[HTML]View PlainCopy

1. <div id="Content"></div>
2. <script>
3. var el = document.getElementById (' content ');
4. $.data (el, ' name ', ' Aty ');
5. Console.log ($.data (el, ' name ')); Aty
6. </Script>

It's easy to see the API using the jquery data cache, and now we're going to take a look at how jquery implements the caching scheme. When providing caching for ordinary JS objects, jquery stores the data directly on the original JS object. This will secretly add a property to the JS object (similar to jQuery16101803968874529044), the property value is also an object.

[JavaScript]View PlainCopy

1. var myObj = {};
2. $.data (MYOBJ, ' name ', ' aty ');
3. Console.log (MYOBJ);
4. Console.log ($.expando);

We can see that the myobj structure has changed: the name of the property that jquery has secretly added to ordinary objects is actually $.expando.

Jquery.expando is a string that is generated using math.random and is stripped of non-numeric characters. It acts as the property name of the HtmlElement or JS object. When the page introduces the jquery framework, a random string is generated.

[JavaScript]View PlainCopy

1. expando: "jQuery" + (JQuery.fn.jquery + math.random ()). Replace (/\d/g, ""),

Now that we know how jquery adds properties to ordinary objects, and the meaning of expando, we can get the added properties from the following code.

[JavaScript]View PlainCopy

1. var hisobj = {};
2. $.data (hisobj, ' name ', ' him ');
3. Console.log (Hisobj[jquery.expando].data.name); //him

When caching is provided for htmlelement, it is not stored directly on the htmlelement. Instead, it is stored on the global object Jquery.cache. At this point, add the attribute (Jquery.expando) to HtmlElement, and the value of the property is numeric (increment by number). That is, only some numbers are saved on the HtmlElement, and the data is not placed directly into it. This is because there may be a risk of memory leaks in older versions of IE. And how does htmlelement establish contact with Jquery.cache? or an ID. Just mentioned that the attribute value number is the ID.

[HTML]View PlainCopy

1. <div id= "a" ></ div>  
2. <script>  
3. var dom =  document.getElementById ("a");   
4. $.data (dom,  ' name ',  ' Aty ');   
5. console.log (Dom[jquery.expando]);  // 1  
6. Console.log ( Jquery.cache);  // {1 : {data:{name: ' Aty '}}}  
7. </script>  

Knowing how jquery adds properties to DOM objects, we can get properties from the following code.

[JavaScript]View PlainCopy

1. Console.log (Jquery.cache[dom[jquery.expando]].data.name);

Now let's see what the difference is between the DOM object and the jquery encapsulated object.

[JavaScript]View PlainCopy

2. Adding data to DOM elements
4. var dom = document.getElementById ("a");
6. $.data (DOM, ' name ', ' aty ');
8. Console.log (Jquery.hasdata (DOM)); //true
10. Console.log ($.data (document.getElementById ("a"), ' name '); Aty
12. Console.log ($.data ($ ("#a") [0], ' name ')); Aty
16. Add objects to the DOM after wrapping the jquery
18. var $dom = $ ("#a");
20. $.data ($dom, ' age ', ' 25 ');
22. Console.log (Jquery.hasdata ($dom)); //true
24. Console.log ($.data ($dom, ' age ')); -
26. Console.log ($.data ($ ("#a"), ' age '); Undefined

This is because the essential difference is that the original DOM object is specially treated by jquery, and jquery wraps the object as if it were a normal JS object. Objects that are fetched each time through the jquery selector are not the same object .

[JavaScript]View PlainCopy

2. var $dom = $ ("#a");
4. $.data ($dom, ' age ', ' 25 ');
8. DOM objects support multiple fetches, and jquery objects do not support
10. Console.log (document.getElementById ("a") = = = document.getElementById ("a")); True
12. Console.log (document.getElementById ("a") = = = $ ("#a") [0]); True
14. Console.log ($ ("#a") = = = = $ ("#a")); False
18. jquery-wrapped objects are no different than ordinary JavaScript objects
20. Console.log ($dom [jquery.expando].data.age); //25

Finally, you can use $.data to get all the properties attached to an object.

[JavaScript]View PlainCopy

1. var $dom = $ ("#a");
2. $.data ($dom, ' age ', ' 25 ');
4. Console.log ($.data ($dom)); //object {age: "}"

Reference article:

Read jquery VI (cache data)

Http://www.cnblogs.com/weihengblogs/p/6093067.html

jquery data caching scenarios in detail: Use of $.data ()