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 相关文章推荐
jquery动态改变form属性提交表单
Jun 03 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 Javascript
javascript 闭包详解
Jul 02 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 Javascript
微信小程序 导入图标实现过程详解
Oct 11 Javascript
JS实现打字游戏
Dec 17 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
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实现执行定时任务
2015/12/21 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
jQuery中操控hidden、disable等无值属性的方法
2014/01/06 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
jQuery实现表格冻结顶栏效果
2017/08/20 jQuery
Angular2 http jsonp的实例详解
2017/08/31 Javascript
Python使用MD5加密字符串示例
2014/08/22 Python
django admin 后台实现三级联动的示例代码
2018/06/22 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
2017/12/11 HTML / CSS
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
资料员岗位职责
2013/11/17 职场文书
完美主义个人的自我评价
2014/02/17 职场文书
初中班主任教育随笔
2015/08/15 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书
创业计划之特色精品店
2019/08/12 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang
给numpy.array增加维度的超简单方法
2021/06/02 Python