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 相关文章推荐
字符串的replace方法应用浅析
Dec 06 Javascript
完美解决IE低版本不支持call与apply的问题
Dec 05 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
JS+DIV实现鼠标划过切换层效果的方法
May 25 Javascript
简单的jQuery入门指引
Jul 28 Javascript
js实现文本框宽度自适应文本宽度的方法
Aug 13 Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 Javascript
AngularJS入门教程之过滤器详解
Aug 19 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
JS基于贪心算法解决背包问题示例
Nov 27 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 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 curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
js实现圆盘记速表
2015/08/03 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
2017/12/10 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
js里面的变量范围分享
2020/07/18 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
tensorflow获取变量维度信息
2018/03/10 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
用Python 执行cmd命令
2020/12/18 Python
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
孝老爱亲模范事迹材料
2014/05/25 职场文书
党支部三会一课计划
2014/09/24 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
见义勇为事迹材料
2014/12/24 职场文书
2016年国培研修日志
2015/11/13 职场文书
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js