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下用eval生成JSON对象
Sep 17 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
Mar 15 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 Javascript
Angularjs上传图片实例详解
Aug 06 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 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
简单的过滤字符串中的HTML标记
2006/12/25 PHP
php学习笔记 类的声明与对象实例化
2011/06/13 PHP
探讨PHP删除文件夹的三种方法
2013/06/09 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
JQuery 入门实例1
2009/06/25 Javascript
jquery tools 系列 scrollable学习
2009/09/06 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
解决python报错MemoryError的问题
2018/06/26 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
Python 监测文件是否更新的方法
2019/06/10 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
中国高端家电购物商城:顺电
2018/03/04 全球购物
Sql面试题
2013/03/20 面试题
采用怎样的方法保证数据的完整性
2013/12/02 面试题
建筑专业自荐信
2013/10/18 职场文书
大学运动会入场词
2014/02/22 职场文书
英语专业自荐书
2014/06/13 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
商务代表岗位职责
2015/02/15 职场文书
nginx优化的六点方法
2021/03/31 Servers
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
解析mybatis-plus中的resultMap简单使用
2021/11/23 Java/Android