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


Posted in Javascript onJanuary 07, 2013

一、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、字符串不存在<object>,<embed>标签(IE 6不能把<object>,<embed>标签嵌入到文档碎片中)
2.4、字符串不存在checked属性(只针对克隆拥有checked属性节点时丢失选中状态的浏览器,如:Safria)
2.5、字符串中不存在html5标签(只针对不支持html5标签的浏览器)
3、处理args数组
通过jQuery.clean函数格式化处理数组项字符串,并生成dom节点添加到文档碎片中
4、判断缓存值
如果缓存值为由clean函数处理的文档碎片,则数组项字符串略过clean函数处理
5、返回值
函数返回一个对象,保存文档碎片和可缓存状态
三、源码注释分析
【基于jQuery1.8.3】

var rnocache = /<(?:script|object|embed|option|style)/i, 
rchecked = /checked\s*(?:[^=]|=\s*.checked.)/i, 
rnoshimcache = new RegExp("<(?:" + nodeNames + ")[\\s/>]", "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 <object> or <embed> 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不能把<object>,<embed>标签嵌入到文档碎片中 
// WebKit浏览器(如:Safria)克隆拥有checked属性节点时,也会丢失选中状态,因此不缓存,google最新版本不存在该bug 
// 最后,IE6,7、8不会正确地重用由html5标签元素创建的缓存片段 
if ( args.length === 1 && typeof first === "string" && first.length < 512 && context === document && 
first.charAt(0) === "<" && !rnocache.test( first ) && 
// 如果浏览器能够克隆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 }; 
};
Javascript 相关文章推荐
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
javascript multibox 全选
Mar 22 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
判断一个对象是否为jquery对象的方法
Mar 12 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
javascript实现自由编辑图片代码详解
Jun 21 Javascript
vue 设置 input 为不可以编辑的实现方法
Sep 19 Javascript
js实现文字头像的生成代码
Mar 07 Javascript
js新闻滚动 js如何实现新闻滚动效果
Jan 07 #Javascript
YUI Compressor压缩JavaScript原理及微优化
Jan 07 #Javascript
onclick与listeners的执行先后问题详细解剖
Jan 07 #Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
Jan 07 #Javascript
jquery乱码与contentType属性设置问题解决方案
Jan 07 #Javascript
jQuery插件开发基础简单介绍
Jan 07 #Javascript
jquery入门—数据删除与隔行变色以及图片预览
Jan 07 #Javascript
You might like
PHP在Web开发领域的优势
2006/10/09 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
PHP array_shift()用法实例分析
2019/01/07 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
arguments对象
2006/11/20 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
禁用Enter键表单自动提交实现代码
2014/05/22 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
详解用python写一个抽奖程序
2019/05/10 Python
python3 实现口罩抽签的功能
2020/03/11 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
python中uuid模块实例浅析
2020/12/29 Python
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
英语专业毕业生自我鉴定
2013/11/09 职场文书
城建学院毕业生自荐信
2014/01/31 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
医德医魂心得体会
2014/09/11 职场文书
2015年仓库工作总结
2015/04/09 职场文书
小学中队长竞选稿
2015/11/20 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书