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 相关文章推荐
js弹出的对话窗口永远保持居中显示
Dec 15 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
chrome下img加载对height()的影响示例探讨
May 26 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
Jquery日历插件制作简单日历
Oct 28 Javascript
AngularJS 实现JavaScript 动画效果详解
Sep 08 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
Vue2.X 通过AJAX动态更新数据
Jul 17 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 array_reduce()函数的应用解析
2018/10/28 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
VUE中的无限循环代码解析
2017/09/22 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
python笔记(2)
2012/10/24 Python
Python中字典和JSON互转操作实例
2015/01/19 Python
Python中functools模块函数解析
2017/03/12 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
T3官网:头发造型工具
2019/12/26 全球购物
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
授权委托书怎么写
2014/09/25 职场文书
个人自查自纠材料
2014/10/14 职场文书
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis
MySQL 如何限制一张表的记录数
2021/09/14 MySQL
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android
volatile保证可见性及重排序方法
2022/08/05 Java/Android