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获取提交的字符串的字节数
Feb 09 Javascript
js 获取时间间隔实现代码
May 12 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 Javascript
JavaScript实现网页动态生成表格
Nov 25 Javascript
Vue如何跨组件传递Slot的实现
Dec 14 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
PHP4实际应用经验篇(9)
2006/10/09 PHP
使用apache模块rewrite_module (转)
2007/02/14 PHP
php模块memcache和memcached区别分析
2011/06/14 PHP
关于svn冲突的解决方法
2013/06/21 PHP
php安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
ecshop 2.72如何修改后台访问地址
2015/03/03 PHP
深入浅出php socket编程
2015/05/13 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
jtable列中自定义button示例代码
2013/11/21 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
HTML5 canvas 9绘制图片实例详解
2016/09/06 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
浅谈Python的垃圾回收机制
2016/12/17 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
Django 重写用户模型的实现
2019/07/29 Python
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
水利公司纪检监察自我鉴定
2014/02/25 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
民事赔偿协议书
2014/11/02 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
高质量“欢迎词”
2019/04/03 职场文书
python 网络编程要点总结
2021/06/18 Python
Java移除无效括号的方法实现
2021/08/07 Java/Android
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL