Data for JQuery 3.0

<span id="Label3"></p>Data Snandy for JQuery 3.0<p id="tagline"><p id="tagline">If You cannot hear the sound of the genuine in you, you'll all of the Your life spend your days on the ends of strings that Somebody else pulls.</p></p>Data Analysis of JQuery 3.0<p><p>jquery 3.0 was officially released on June 9, and 3.0 is also known as the next generation of Jquery. This version began in October 14 with a beta release (2016/1/14,) and a candidate (2016/05/20). It's not easy to walk all the Way.</p></p><p><p></p></p><p><p>Article Directory</p></p> <ol> <ol> <li>Data analysis</li> <li>The use of data within jquery</li> <li>Comparison of 1.x.x and 2.x.x</li> </ol> </ol><p><p></p></p>I. Analysis of data<p><p>Data in JQuery 3.0 is used internally and is defined as a "class." Altogether two objects were created with it, Datapriv and Datauser. Data has 1 object properties (expando) and class attributes (uid), and there are 6 methods, as follows</p></p><p><p></p></p><p><p></p></p><p><p>Read the following separately</p></p><p><p></p></p>1, Data.uid<p><p>This is a number starting from 1 with the Increment.</p></p><p><p></p></p>2, expando<p><p>The combination of Jquery.expando and uid, which is used as a key for elements such as Dom elements, is Unique. The Jquery.expando is generated as follows</p></p> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter">1</td> <td class="code"><code class="javascript plain">jQuery.expando = </code><code class="javascript string">"jQuery"</code><code class="javascript plain">+ ( version + Math.random() ).replace( /\D/g, </code><code class="javascript string">""</code><code class="javascript plain">)</code></td> </tr> </tbody> </table><p><p></p></p><p><p>That is, ' jQuery ' + (version number + random number), then remove all non-numbers, such as</p></p> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter">1</td> <td class="code"><code class="javascript string">"jQuery"</code><code class="javascript plain">+ </code><code class="javascript string">"3.0.0"</code><code class="javascript plain">+ 0.129896303388626 == </code><code class="javascript string">"jQuery3.0.00.129896303388626"</code></td> </tr> </tbody> </table><p><p></p></p><p><p>Remove the non-numeric into</p></p> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter">1</td> <td class="code"><code class="javascript string">"jQuery30009423638425146147"</code></td> </tr> </tbody> </table><p><p>　　</p></p><p><p>JQuery 3.0 Internal Variables Datapriv and Datauser are generated expando as follows</p></p> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter">12</td> <td class="code"><code class="javascript plain">jQuery 300 024727210109188635 1</code><code class="javascript plain">jQuery 300 024727210109188635 2</code></td> </tr> </tbody> </table><p><p>The third part is the random number, each refresh will change, the other parts of the Same.</p></p><p><p></p></p>3. Cache<p><p>The cache method assigns an object to the owner as storage, and the owner must satisfy acceptdata, and the cache will take This.expando as the lead key.<br>Owner has two kinds, one is DOM element (nodetype is 1 and 9), the other is normal JS Object. such as text nodes (nodetype=3), annotation nodes (nodetype=8) are not added.</p></p><p><p></p></p><p><p>Acceptdata is defined as follows</p></p> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter">1234567891011</td> <td class="code"><code class="javascript keyword"><code class="javascript keyword">var</code></code><code class="javascript plain"><code class="javascript plain">acceptData = </code></code><code class="javascript keyword"><code class="javascript keyword">function</code></code><code class="javascript plain"><code class="javascript plain">( owner ) {</code></code> <code class="javascript spaces"><code class="javascript spaces">    </code></code><code class="javascript comments"><code class="javascript comments">// Accepts only:</code></code><code class="javascript spaces"><code class="javascript spaces">    </code></code><code class="javascript comments"><code class="javascript comments">//  - Node</code></code><code class="javascript spaces"><code class="javascript spaces">    </code></code><code class="javascript comments"><code class="javascript comments">//    - Node.ELEMENT_NODE</code></code><code class="javascript spaces"><code class="javascript spaces">    </code></code><code class="javascript comments"><code class="javascript comments">//    - Node.DOCUMENT_NODE</code></code><code class="javascript spaces"><code class="javascript spaces">    </code></code><code class="javascript comments"><code class="javascript comments">//  - Object</code></code><code class="javascript spaces"><code class="javascript spaces">    </code></code><code class="javascript comments"><code class="javascript comments">//    - Any</code></code><code class="javascript spaces"><code class="javascript spaces">    </code></code><code class="javascript comments"><code class="javascript comments">/* jshint -W018 */</code></code><code class="javascript spaces"><code class="javascript spaces">    </code></code><code class="javascript keyword"><code class="javascript keyword">return</code></code><code class="javascript plain"><code class="javascript plain">owner.nodeType === 1 || owner.nodeType === 9 || !( +owner.nodeType );</code></code><code class="javascript plain"><code class="javascript plain">};</code></code></td> </tr> </tbody> </table><p><p>Acceptdata in 3.0, a total of 3 used, respectively,</p></p> <ol> <ol> <li>The cache method of the Data class, which is not available to programmers for private METHODS.</li> <li>The $.cleandata method clears all cached data associated with the Element. For public methods, but rarely used. This method is used in empty, html, replacewith, and remove methods.</li> <li>$ (). Trigger method, proactively dispatches events for public methods.</li> </ol> </ol><p><p></p></p><p><p>If it is a DOM element, it is used to assign values directly using the dot operator, and if it is a normal JS object use ES5 's Object.defineproperty method, which is the embodiment of JQuery 3.0 using the new API.</p></p> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter">1234567891011121314</td> <td class="code"><code class="javascript comments"><code class="javascript comments">// If it is a node unlikely to be stringify-ed or looped over</code></code><code class="javascript comments"><code class="javascript comments">// use plain assignment</code></code><code class="javascript keyword"><code class="javascript keyword">if</code></code><code class="javascript plain"><code class="javascript plain">( owner.nodeType ) {</code></code><code class="javascript spaces"><code class="javascript spaces">    </code></code><code class="javascript plain"><code class="javascript plain">owner[ </code></code><code class="javascript keyword"><code class="javascript keyword">this</code></code><code class="javascript plain"><code class="javascript plain">.expando ] = value;</code></code><code class="javascript comments"><code class="javascript comments">// Otherwise secure it in a non-enumerable property</code></code><code class="javascript comments"><code class="javascript comments">// configurable must be true to allow the property to be</code></code><code class="javascript comments"><code class="javascript comments">// deleted when data is removed</code></code><code class="javascript plain"><code class="javascript plain">} </code></code><code class="javascript keyword"><code class="javascript keyword">else</code></code><code class="javascript plain"><code class="javascript plain">{</code></code><code class="javascript spaces"><code class="javascript spaces">    </code></code><code class="javascript plain"><code class="javascript plain">Object.defineProperty( owner, </code></code><code class="javascript keyword"><code class="javascript keyword">this</code></code><code class="javascript plain"><code class="javascript plain">.expando, {</code></code><code class="javascript spaces"><code class="javascript spaces">        </code></code><code class="javascript plain"><code class="javascript plain">value: value,</code></code><code class="javascript spaces"><code class="javascript spaces">        </code></code><code class="javascript plain"><code class="javascript plain">configurable: </code></code><code class="javascript keyword"><code class="javascript keyword">true</code></code><code class="javascript spaces"><code class="javascript spaces">    </code></code><code class="javascript plain"><code class="javascript plain">} );</code></code><code class="javascript plain"><code class="javascript plain">}</code></code></td> </tr> </tbody> </table><p><p></p></p><p><p>Converted to the following code</p></p> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter">1234567</td> <td class="code"><code class="javascript plain">elem[</code><code class="javascript string">‘jQuery3000247272101091886351‘</code><code class="javascript plain">] = dataObj;</code><code class="javascript keyword">var</code><code class="javascript plain">person = {name: </code><code class="javascript string">‘John‘</code><code class="javascript plain">, age: 30};</code><code class="javascript plain">Object.defineProperty( person, </code><code class="javascript string">‘jQuery3000247272101091886351‘</code><code class="javascript plain">, {</code><code class="javascript spaces">    </code><code class="javascript plain">value: dataObj,</code><code class="javascript spaces">    </code><code class="javascript plain">configurable: </code><code class="javascript keyword">true</code><code class="javascript plain">} );</code></td> </tr> </tbody> </table><p><p></p></p><p><p>This is how the cache method, passed to owner, is set only for the first time, returns value (an empty object), and then returns directly after the value is Taken.</p></p><p><p>Source</p></p>+ View Code<p><p></p></p>4. Set<p><p>The cache method above creates an empty object with the expando key for owner, and all subsequent methods are expanded around the empty object, which is called the cache object, and all subsequent data is added to it. Set is the object to the building blocks, set each time to retrieve the cache, and then add new properties and Data. If data is a string, it is added as a key, and if it is an object, it is added by traversing it. Just note that the horizontal line connector will be turned into the hump format, which is also for the compatibility of H5 Data-xxx.</p></p><p><p>Source</p></p>+ View Code<p><p>　　</p></p><p><p></p></p>5. Get<p><p>Get is simple enough, the key is retrieved from the cache the value of the key, none to retrieve the entire cache.</p></p><p><p>Source</p></p>+ View Code<p><p>　　</p></p>6. Access<p><p>This method is instant getter and setter, That's All.</p></p><p><p>Getter condition</p></p> <ol> <ol> <li>Key is undefined, then take the entire cache</li> <li>Key is a string and value is undefined, which is the value of the specified key</li> </ol> </ol><p><p><br>Setter conditions</p></p> <ol> <ol> <li>The three parameters of owner, key, and value are all passed</li> </ol> </ol><p><p>Source</p></p>+ View Code<p><p></p></p>7. Remove<p><p>Emptying the cache object above the binding element (owner) still requires the This.expando to get the caches first, and if a key is passed, the value of the specified key is deleted (key itself is also deleted).<br>of course, The JQuery API maintains the convenience, key can be an array, so you can delete multiple keys in Bulk. If key does not pass the entire cache is deleted, the DOM and ordinary JS objects are distinguished, the DOM object uses undefined assignment, and the JS object uses Delete.</p></p><p><p>Source</p></p>+ View Code<p><p></p></p>8, HasData<p><p>Used to determine if there is cached data on the owner and returns TRUE or False.</p></p><p><p>Source</p></p>+ View Code<p><p></p></p>second, the use of data within jquery<p><p>All the methods of data are explained above, and it is mentioned that the data class is used internally within jQuery, altogether creating its two objects: Datapriv and Datauser.</p></p><p><p>These two objects have a clear division of labor in the 3.0.0, Datapriv can guess is "data" and "private" two words of the combination of shorthand. That is, Datapriv is private to serve jQuery internal methods, and Datauser is used to serve the methods that are publicly available to the User.</p></p><p><p></p></p><p><p>Below is a look at which modules are used in which these two objects are Distributed.</p></p><p><p></p></p><p><p></p></p><p><p>Full version Click to expand to view</p></p>+ View Code<p><p></p></p><p><p>The above can be seen, in addition to "public", Datapriv used in the JQuery queue, animation, events and other modules, Datauser used in the data cache and Dataattr Module.</p></p><p><p></p></p><p><p>"public" means that Datapriv and datauser are used in all three of these methods.</p></p><p><p></p></p><p><p><strong>$.hasdata (elem)</strong></p></p><p><p>Used to determine if the relevant data cache is bound on the elem, returns True and false, and returns false only on Datapriv and Datauser.</p></p><p><p>Source</p></p>+ View Code<p><p></p></p><p><p><strong>$.cleandata (elems)</strong></p></p><p><p>Emptying all the data caches bound by the elem, and, of course, the need to empty both Datapriv and datauser.<br>Note: Although this method is publicly exposed to $, there is no introduction to this method on the official website Api. Improper use can have serious consequences, such as after binding an event (. on), calling the method, and the bound event will all be Invalidated. Because all the data within the DATAPRIV is Emptied.</p></p><p><p><br><strong>Clonecopyevent (src, Dest)</strong></p></p><p><p>This is an internal method that $.clone will use to it. When cloning an element, the data that is bound to node is cloned in addition to the node Nodes. Like what</p></p> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter">1</td> <td class="code"><code class="javascript keyword">var</code><code class="javascript plain">cloneNode = $.clone(elem);</code></td> </tr> </tbody> </table><p><p>Clone the Elem to cloneNode, and there will be an event CloneNode added on Elem.</p></p><p><p></p></p>Iii. comparison of 1.x.x and 2.x.x<p><p>The versions of the JQuery 1.x and 2.x series differ greatly in the implementation of the data cache Module. You can compare me to this article for 11 years.</p></p><p><p></p></p><p><p><strong>1. Data structure of the cache</strong></p></p><p><p>1.x (until 1.11.2) cache is stored on jquery.cache, 2.x (including 3.x) uses an internal class Data cache, which mainly uses two objects Datapriv and Datauser. It is obvious that 2.x is doing better, all of its cached data is private, there is no risk of being misinterpreted, and 1.x Jquery.cache is public, and if it is misinterpreted (for example, a classmate takes it for granted, adding a cache object to $) can be disastrous.</p></p><p><p><br><strong>2. jquery._data</strong></p></p><p><p>See this underline to know is private (the formula), in 1.x is only used internally, not provided to the Developer. With the 1.11.2 example, This method is event module, Queue module, animation module, setglobaleval, clonecopyevent, fixclonenodeissues, dommanip, showhide, defaultprefilter, Toggleclass Use. 3.x use Datapriv and Datauser substitution, we can compare to See.</p></p><p><p>(2/3). x is significantly better than 1.x, and Datapriv and Datauser are truly private (packaged better and more secure) than the 1.x contract private Jquery._data. Although 3.0.0 is also conservatively compatible with jquery._data, it is believed that the subsequent version will be removed Soon.<br></p></p><p><p><br><strong>3. Refactoring</strong></p></p><p><p>The 1.x is centered on $._data, which assists in implementing other apis, (2/3). X is implemented with Datapriv/datauser as the Center. (2/3). x reconstructs the code and extracts the Data class to make it Clearer.</p></p><p><p></p></p><p><p></p></p><p><p>Related:</p></p><p><p>http://naotu.baidu.com/file/c287195ae96011f7511571a4280042c7?token=ddb7c115786ff90f</p></p><p><p>http://naotu.baidu.com/file/186bfe75ebe2878fa4d70856f0f33672?token=c8b112b939e0f65c</p></p><p><p>Http://www.cnblogs.com/snandy/archive/2011/06/10/2077298.html</p></p><p><p>Http://www.cnblogs.com/snandy/p/4650599.html</p></p>Category: JQuery<p><p>Data for JQuery 3.0</p></p></span>