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 相关文章推荐
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
php的文件上传入门教程(实例讲解)
Apr 10 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
Sep 25 Javascript
vue底部加载更多的实例代码
Jun 29 Javascript
详解vue开发中调用微信jssdk的问题
Apr 16 Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 Javascript
使用Ajax实现无刷新上传文件
Apr 12 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开发文件系统实例讲解
2006/10/09 PHP
基于PHP一些十分严重的缺陷详解
2013/06/03 PHP
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
代码生成器 document.write()
2007/04/15 Javascript
Mac地址验证的javascript代码
2013/11/09 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
Python发送email的3种方法
2015/04/28 Python
python读取oracle函数返回值
2016/07/18 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
python如何为创建大量实例节省内存
2018/03/20 Python
python邮件发送smtplib使用详解
2020/06/16 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
关于初始种子自动选取的区域生长实例(python+opencv)
2020/01/16 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
学校百日安全生产活动总结
2014/07/05 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python
如何解决.cuda()加载用时很长的问题
2021/05/24 Python