jQuery.buildFragmentの利用方法とideas_jqueryの分析-jsチュートリアル-php.cn

1. jQuery.buildFragment の使い方 1. パラメータ jQuery.buildFragment( args, context, scripts) 2. 戻り値 return { フラグメント: フラグメント, キャッシュ可能: キャッシュ可能; 2. アイデア分析 1. 渡されたコンテキスト パラメーターのさまざまな値に従って、コンテキストがドキュメント ルート ノードであることを確認します。ドキュメント 2. キャッシュ可能性の制限 2.1. 文字列が 512 バイト未満である 2.2. 文字列内にオプション タグが存在しない (オプション タグをクローンすると選択された状態が失われるため、 2.3. 文字列は存在しません 、 タグはドキュメントのフラグメントに埋め込むことができません) 2.4. 文字列は存在します。 Checked 属性を持たない (複製時に選択状態を失う Checked 属性を持つノードのみ) ブラウザ (Safria など) 2.5. html5 タグが文字列に存在しない (HTML5 タグが存在しないブラウザのみ) html5 タグはサポートしていません) 3. args 配列を処理します jQuery.clean 関数の項目文字列を使用して配列をフォーマットして処理し、dom ノードを生成してドキュメント フラグメントに追加します 4.キャッシュ値 キャッシュ値がクリーン関数によって処理されたドキュメントフラグメントの場合、配列項目文字列はクリーン関数の処理をスキップします 5、戻り値 関数はドキュメントフラグメントを保存しキャッシュ可能にするオブジェクトを返しますstatus 3. ソースコードのアノテーション解析 [jQuery1.8.3ベース] コードをコピー コードは次のとおりです: 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 }; };