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 连续列表实现代码
Dec 21 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
Dec 25 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
前端JS面试中常见的算法问题总结
Dec 23 Javascript
js实现3d悬浮效果
Feb 16 Javascript
Vue制作Todo List网页
Apr 26 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
vue src动态加载请求获取图片的方法
Oct 17 Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 Javascript
jQuery实现本地存储
Dec 22 jQuery
vue项目proxyTable配置和部署服务器
Apr 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
关于在php.ini中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
浅谈php的优缺点
2015/07/14 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
JqGrid web打印实现代码
2011/05/31 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
python特性语法之遍历、公共方法、引用
2018/08/08 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
马来西亚演唱会订票网站:StubHub马来西亚
2018/10/18 全球购物
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
.net开发工程师面试题
2014/02/25 面试题
宣传工作经验材料
2014/06/02 职场文书
民事授权委托书范文
2014/08/02 职场文书
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
单位工作证明
2014/10/07 职场文书
公司欠款证明
2015/06/24 职场文书
Django 实现jwt认证的示例
2021/04/30 Python
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js
python如何查找列表中元素的位置
2022/05/30 Python