Detailed description of the buildFragment private function in jQuery3.0, jquery. buildfragment

Detailed description of the buildFragment private function in jQuery3.0, jquery. buildfragment

After three months, the jQuery team finally released the 3.0 Alpha version. There are two versions: jQuery compat 3.0 and jQuery 3.0.

JQuery compat 3.0 corresponds to the previous 1.x, which is compatible with more browsers and supports IE to version 8.0.

JQuery 3.0 corresponds to the previous version 2.x. it focuses on the updated browser and supports IE to version 9.0.

In addition, 3.0 has added support for the Yandex browser, a browser from Russia.

Let's take a look at buildFragment in jQuery3.0.

In jQuery3.0, buildFragment is a private function used to construct a fragment object containing a subnode. This fragment already exists in DOM1 and is supported by all browsers. This method can improve performance when DOM is frequently operated (added or inserted). John resig did a test and a blog.

In jQuery3.0, buildFragment is only used in domManip and jQuery. parseHTML. domManip is dependent on DOM operations such as append, prepend, before, and after.

For example

The buildFragment function has five parameters. The source code is as follows:

function buildFragment( elems, context, scripts, selection, ignored ) {var elem, tmp, tag, wrap, contains, j,fragment = context.createDocumentFragment(),nodes = [],i = 0,l = elems.length;for ( ; i < l; i++ ) {elem = elems[ i ];if ( elem || elem === 0 ) {// Add nodes directlyif ( jQuery.type( elem ) === "object" ) {// Support: Android <=4.0 only, PhantomJS 1 only// push.apply(_, arraylike) throws on ancient WebKitjQuery.merge( nodes, elem.nodeType ? [ elem ] : elem );// Convert non-html into a text node} else if ( !rhtml.test( elem ) ) {nodes.push( context.createTextNode( elem ) );// Convert html into DOM nodes} else {tmp = tmp || fragment.appendChild( context.createElement( "div" ) );// Deserialize a standard representationtag = ( rtagName.exec( elem ) || [ "", "" ] )[ 1 ].toLowerCase();wrap = wrapMap[ tag ] || wrapMap._default;tmp.innerHTML = wrap[ 1 ] + jQuery.htmlPrefilter( elem ) + wrap[ 2 ];// Descend through wrappers to the right contentj = wrap[ 0 ];while ( j-- ) {tmp = tmp.lastChild;}// Support: Android <=4.0 only, PhantomJS 1 only// push.apply(_, arraylike) throws on ancient WebKitjQuery.merge( nodes, tmp.childNodes );// Remember the top-level containertmp = fragment.firstChild;// Ensure the created nodes are orphaned (#12392)tmp.textContent = "";}}}// Remove wrapper from fragmentfragment.textContent = "";i = 0;while ( ( elem = nodes[ i++ ] ) ) {// Skip elements already in the context collection (trac-4087)if ( selection && jQuery.inArray( elem, selection ) > -1 ) {if ( ignored ) {ignored.push( elem );}continue;}contains = jQuery.contains( elem.ownerDocument, elem );// Append to fragmenttmp = getAll( fragment.appendChild( elem ), "script" );// Preserve script evaluation historyif ( contains ) {setGlobalEval( tmp );}// Capture executablesif ( scripts ) {j = 0;while ( ( elem = tmp[ j++ ] ) ) {if ( rscriptType.test( elem.type || "" ) ) {scripts.push( elem );}}}}return fragment;}

The main steps are as follows:

Use the second parameter content to create fragment

Create nodes using the first elems parameter and convert the elements in elems into DOM elements and store them in the array nodes.

Add the elements in nodes to the fragment of the file.

Return fragment

The focus is on Step 1. There are three scenarios for building nodes.

Elem is a DOM element (determined based on nodeType) and is directly put into the nodes array.

Elem is a string and not an HTML tag. Create a text Node object (textNode) and put it in the nodes array.

Elem is a string and an HTML tag. It is converted into a DOM element and placed in the nodes array.

Display

Note the following two parameters.

1. The last two parameters selection and ignored are only used in the replaceWith method. It should be noted that replaceWith only performs node replacement and does not replace all Data of the previous elements, such as binding events. $. data is not owned by new elements.

2. the scripts parameter is only used in the jQuery. parseHTML method (false in domManip). When the third parameter keepScripts of jQuery. parseHTML is false, all script tags in the node will be deleted.

The above is a detailed description of the buildFragment private function in jQuery3.0, which I will introduce to you. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!