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 相关文章推荐
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Oct 20 Javascript
js 模拟气泡屏保效果代码
Jul 10 Javascript
JavaScript 图像动画的小demo
May 23 Javascript
jQuery实现带动画效果的二级下拉导航方法
Mar 11 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
JavaScript获取select中text值的方法
Feb 13 Javascript
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 Javascript
vue动画效果实现方法示例
Mar 18 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数据饼图效果实现代码
2011/11/23 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
javascript父、子页面交互技巧总结
2014/08/08 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
Python编写检测数据库SA用户的方法
2014/07/11 Python
Python计算程序运行时间的方法
2014/12/13 Python
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
Python函数式编程指南(二):从函数开始
2015/06/24 Python
Python数据类型详解(四)字典:dict
2016/05/12 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
大学生找工作推荐信范文
2013/11/28 职场文书
学生感冒英文请假条
2014/02/04 职场文书
可口可乐广告词
2014/03/20 职场文书
家长通知书家长评语
2014/04/17 职场文书
森林病虫害防治方案
2014/06/02 职场文书
学校四风问题对照检查材料思想汇报
2014/09/26 职场文书
工会工作个人总结
2015/03/03 职场文书
个人党性锻炼总结
2015/03/05 职场文书
公司庆典主持词
2015/07/04 职场文书
2015年暑期见闻
2015/07/14 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
创业的9条正确思考方式
2019/08/26 职场文书