jQuery.buildFragment使用方法及思路分析_jquery

一、jQuery.buildFragment使用方法 1、参数 jQuery.buildFragment( args, context, scripts );2、返回值 return { fragment: fragment, cacheable: cacheable }; 二、思路分析 1、处理context参数 根据传入到context参数值的不同，确保context为文档根节点document 2、限制可缓存条件 2.1、字符串小于512字节 2.2、字符串不存在option标签(克隆option标签会丢失选中状态,因此不缓存) 2.3、字符串不存在 , 标签(IE 6不能把 , 标签嵌入到文档碎片中) 2.4、字符串不存在checked属性(只针对克隆拥有checked属性节点时丢失选中状态的浏览器，如：Safria） 2.5、字符串中不存在html5标签(只针对不支持html5标签的浏览器) 3、处理args数组 通过jQuery.clean函数格式化处理数组项字符串，并生成dom节点添加到文档碎片中 4、判断缓存值 如果缓存值为由clean函数处理的文档碎片，则数组项字符串略过clean函数处理 5、返回值 函数返回一个对象，保存文档碎片和可缓存状态 三、源码注释分析 【基于jQuery1.8.3】 复制代码 代码如下: var rnocache = /rchecked = /checked\s*(?:[^=]|=\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 // 根据参数context值的不同,确保context为文档根节点document // jQuery1.8.0版本以后代码相对于之前版本有很大改进,以下是改进地方: // 针对context参数值为undefined, jQuery对象,DOM元素节点情况改进代码 // 解决了1.8.0版本中context参数为文档片段(#document-fragment)的bug 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字符串小于512字节 // 克隆option标签会丢失选中状态,因此不缓存 // IE 6不能把 , 标签嵌入到文档碎片中 // WebKit浏览器(如：Safria)克隆拥有checked属性节点时,也会丢失选中状态,因此不缓存,google最新版本不存在该bug // 最后,IE6,7、8不会正确地重用由html5标签元素创建的缓存片段 if ( args.length === 1 && typeof first === "string" && first.length first.charAt(0) === "// 如果浏览器能够克隆checked属性和支持html5,或者html字符串中不存在checked和html5标签元素 (jQuery.support.checkClone || !rchecked.test( first )) && (jQuery.support.html5Clone || !rnoshimcache.test( first )) ) { // Mark cacheable and look for a hit // 如果以上条件都满足，则打上可缓存标记 cacheable = true; // 将数组项字符串(主要是html字符串)缓存到jQuery.fragment对象的属性列表中，并获取缓存值 // 如果clean函数已经处理过了第二次相同的字符串内容，缓存值则为clean函数处理的文档碎片，字符串解析可以略过clean处理 fragment = jQuery.fragments[ first ]; // 在clean函数处理了第一次字符串(与第二次相同)后，cachehit为true cachehit = fragment !== undefined; } // 判断缓存值 if ( !fragment ) { fragment = context.createDocumentFragment(); // 通过clean函数处理args数组，将数组每一项字符串都生成dom节点， // 并且添加到提供的文档碎片(fragment)中，因此返回的对象中的fragment属性 // 保存了参数args数组项字符串生成的dom节点 jQuery.clean( args, context, fragment, scripts ); // Update the cache, but only store false // unless this is a second parsing of the same content // 当cachehit为true时，jQuery.fragment[first]为clean函数处理的文档碎片 if ( cacheable ) { jQuery.fragments[ first ] = cachehit && fragment; } } return { fragment: fragment, cacheable: cacheable }; };

jQuery.buildFragment使用方法及思路分析_jquery

相关文章