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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
jquery学习笔记二 实现可编辑的表格
Apr 09 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
js实现点击链接后延迟3秒再跳转的方法
Jun 05 Javascript
JavaScript中的small()方法使用详解
Jun 08 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
JavaScript交换变量的常用方法小结【4种方法】
May 07 Javascript
vue 实现把路由单独分离出来
Aug 13 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 24 Javascript
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
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
PHP Socket 编程
2010/04/09 PHP
jquery UI 1.72 之datepicker
2009/12/29 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
JS集成fckeditor及判断内容是否为空的方法
2016/05/27 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
nodejs更改项目端口号的方法
2018/05/13 NodeJs
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
Python的argparse库使用详解
2018/10/09 Python
Python使用folium excel绘制point
2019/01/03 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
浅谈python3中input输入的使用
2019/08/02 Python
Django values()和value_list()的使用
2020/03/31 Python
python 写一个性能测试工具(一)
2020/10/24 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
高分子材料个人求职信范文
2013/09/25 职场文书
会计专业自荐信
2013/12/02 职场文书
法学研究生自我鉴定范文
2013/12/04 职场文书
大学生村官事迹材料
2014/01/21 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
个人委托书范本汇总
2014/10/01 职场文书
中班下学期个人总结
2015/02/12 职场文书
党支部意见范文
2015/06/02 职场文书
解决pytorch-gpu 安装失败的记录
2021/05/24 Python
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技
Java Spring Lifecycle的使用
2022/05/06 Java/Android