Analysis of jQuery.buildFragment usage methods and ideas

1. How to use jQuery.buildFragment 1. Parameters jQuery.buildFragment( args, context, scripts); 2. Return value return { fragment: fragment, cacheable: cacheable } ; 2. Idea analysis 1. Process the context parameter According to the different values of the context parameter passed in, ensure that the context is the document root node document 2. Limit the cacheability Conditions 2.1. The string is less than 512 bytes 2.2. The option tag does not exist in the string (cloning the option tag will lose the selected status, so it is not cached) 2.3. The string does not exist , tag (IE 6 cannot embed , tags into document fragments) 2.4. The string does not have the checked attribute (only for the node with the checked attribute that loses the selected status when cloning it) Browser, such as: Safria) 2.5. The html5 tag does not exist in the string (only for browsers that do not support the html5 tag) 3. Process the args array Format and process the array through the jQuery.clean function Item string, and generate dom nodes and add them to the document fragments 4. Determine the cache value If the cache value is a document fragment processed by the clean function, the array item string will skip the clean function processing 5 , return value The function returns an object to save document fragments and cacheable status 3. Source code annotation analysis [Based on jQuery1.8.3] Copy code The code is as follows: var rnocache = / rchecked = /checkeds*(?:[^=]|=s*.checked. )/i, rnoshimcache = new RegExp(" ]", "i"); jQuery.fragments = {}; jQuery .buildFragment = function( args, context, scripts ) { var fragment, cacheable, cachehit, first = args[ 0 ]; // Set context from what may come in as undefined or a jQuery collection or a node // Updated to fix #12266 where accessing context[0] could throw an exception in IE9/10 & // also doubles as fix for #8950 where plain objects caused createDocumentFragment exception / / According to the different value of the parameter context, ensure that the context is the document root node document // The code after jQuery 1.8.0 has been greatly improved compared to the previous version. The following are the improvements: // For the context parameter value: undefined, jQuery object, DOM element node status improvement code // Solve the bug in version 1.8.0 that the context parameter is a document fragment (#document-fragment) context = context || document; context = !context.nodeType && context[0] || context; context = context.ownerDocument || context; // Only cache "small" (1/2 KB) HTML strings that are associated with the main document // Cloning options loses the selected state, so don't cache them // IE 6 doesn't like it when you put or elements in a fragment // Also, WebKit does not clone 'checked' attributes on cloneNode, so don't cache // Lastly, IE6,7,8 will not correctly reuse cached fragments that were created from unknown elems #10501 / / html string is less than 512 bytes // Cloning the option tag will lose the selected status, so it is not cached // IE 6 cannot embed , tags into document fragments // When a WebKit browser (such as: Safria) clones a node with a checked attribute, it will also lose the selected status, so it will not be cached. This bug does not exist in the latest version of Google // Finally, IE6, 7, and 8 will not be correct Reuse the cached fragment created by the html5 tag element if ( args.length === 1 && typeof first === "string" && first.length first. charAt(0) === " // If the browser can clone the checked attribute and support html5, or the checked and html5 tag elements do not exist in the html string (jQuery.support.checkClone || !rchecked.test( first )) && (jQuery.support.html5Clone || !rnoshimcache.test( first )) ) { // Mark cacheable and look for a hit // If the above conditions are met, mark the cacheable mark cacheable = true; // Cache the array item string (mainly html string) to the attribute list of the jQuery.fragment object , and get the cache value //If the clean function has processed the same string content for the second time, the cache value is the document fragment processed by the clean function, and string parsing can skip the clean processing fragment = jQuery.fragments[ first ]; // After the clean function processes the string for the first time (the same as the second time), cachehit is true cachehit = fragment !== undefined; } // Determine the cache value if ( !fragment ) { fragment = context.createDocumentFragment(); // Process the args array through the clean function, and generate dom for each string in the array node, // and added to the provided document fragment (fragment), so the fragment attribute in the returned object // saves the dom node generated by the parameter args array item string jQuery.clean ( args, context, fragment, scripts ); // Update the cache, but only store false // unless this is a second parsing of the same content // When cachehit is true, jQuery .fragment[first] is the document fragment processed by the clean function if ( cacheable ) { jQuery.fragments[ first ] = cachehit && fragment; } } return { fragment: fragment , cacheable: cacheable }; };

Analysis of jQuery.buildFragment usage methods and ideas_jquery