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 相关文章推荐
一个页面放2段图片滚动代码出现冲突的问题如何解决
Dec 21 Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 Javascript
JavaScript实现弹出广告功能
Mar 30 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
Nov 28 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
浅谈vue父子组件怎么传值
Jul 21 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
Sep 01 Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 Javascript
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
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中的boolean(布尔)类型详解
2013/10/28 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
Tensorflow中的placeholder和feed_dict的使用
2018/07/09 Python
Python适配器模式代码实现解析
2019/08/02 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
python的range和linspace使用详解
2019/11/27 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
通过python检测字符串的字母
2020/02/18 Python
python生成并处理uuid的实现方式
2020/03/03 Python
西班牙手机之家:Phone House
2018/10/18 全球购物
幼儿园家长评语
2014/02/10 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
创先争优个人总结
2015/03/04 职场文书
银行求职自荐信范文
2015/03/04 职场文书
2015年派出所民警工作总结
2015/04/24 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书