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 相关文章推荐
JavaScript版代码高亮
Jun 26 Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 Javascript
JavaScript基础——使用Canvas绘图
Nov 02 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 Javascript
纯JS实现简单的日历
Jun 26 Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
微信小程序开发之转发分享功能
Oct 22 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数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
PHP实现的自定义数组排序函数与排序类示例
2016/11/18 PHP
php中bind_param()函数用法分析
2017/03/28 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
jQuery 开天辟地入门篇一
2009/12/09 Javascript
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
js去除浏览器默认底图的方法
2015/06/08 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
Python中的startswith和endswith函数使用实例
2014/08/25 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
解决pip install psycopg2出错问题
2020/07/09 Python
详解Django中异步任务之django-celery
2020/11/05 Python
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
公司门卫岗位职责
2014/03/15 职场文书
实践单位评语
2014/04/26 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
英语求职信范文
2014/05/23 职场文书
首都博物馆观后感
2015/06/05 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
成人成长感言如何写?
2019/08/16 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers