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 相关文章推荐
静态页面的值传递(三部曲)
Sep 25 Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
jQuery+Ajax实现无刷新操作
Jan 04 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 Javascript
React Native 环境搭建的教程
Aug 19 Javascript
VueJs组件prop验证简单介绍
Sep 12 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 Javascript
Vue数据双向绑定的深入探究
Nov 27 Javascript
Html5生成验证码的示例代码
May 10 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
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
php 删除无限级目录与文件代码共享
2008/11/22 PHP
php 删除数组元素
2009/01/16 PHP
php 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
10款实用的PHP开源工具
2015/10/23 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
JavaScript实现复制功能各浏览器支持情况实测
2013/07/18 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
教导处工作制度
2014/01/18 职场文书
工地安全检查制度
2014/02/04 职场文书
大学军训感言200字
2014/02/26 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
三严三实对照检查材料
2014/08/25 职场文书
介绍信模板
2015/01/31 职场文书
追讨欠款律师函
2015/06/24 职场文书
班主任经验交流心得体会
2015/11/02 职场文书