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 相关文章推荐
[原创]网络复制内容时常用的正则+editplus
Nov 30 Javascript
通过javascript获取iframe里的值示例代码
Jun 24 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
微信小程序实现图片轮播及文件上传
Apr 07 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
Jun 29 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
JavaScript 链表定义与使用方法示例
Apr 28 Javascript
vue 单页应用和多页应用的优劣
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环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
php遍历数组的4种方法总结
2014/07/05 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
python各种语言间时间的转化实现代码
2016/03/23 Python
python中import学习备忘笔记
2017/01/24 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
vue实现倒计时功能
2021/03/24 Vue.js
工商管理专业学生的自我评价
2013/10/01 职场文书
物流专业大学应届生求职信
2013/11/03 职场文书
金融专业大学生自我评价
2014/01/09 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
骨干教师考核评语
2014/12/31 职场文书
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python