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 相关文章推荐
JavaScript Chart 插件整理
Jun 18 Javascript
一次失败的jQuery优化尝试小结
Feb 06 Javascript
js编码、解码函数介绍及其使用示例
Sep 05 Javascript
JavaScript中数据结构与算法(四):串(BF)
Jun 19 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
Vue2.0 组件传值通讯的示例代码
Aug 01 Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 Javascript
vue实现路由监听和参数监听
Oct 29 Javascript
Element Card 卡片的具体使用
Jul 26 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
PHP面向对象程序设计之接口用法
2014/08/20 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
js限制checkbox选中个数以限制六个为例
2014/07/15 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
input框中的name和id的区别
2016/11/16 Javascript
有趣的bootstrap走动进度条
2016/12/01 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
webpack 代码分离优化快速指北
2019/05/18 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
Python Socket编程入门教程
2014/07/11 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
python实现两张图片的像素融合
2019/02/23 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
Python configparser模块应用过程解析
2020/08/14 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
c语言常见笔试题总结
2016/09/05 面试题
长青弘远的面试题
2012/06/09 面试题
企业节能减排实施方案
2014/03/19 职场文书
支部书记四风对照材料
2014/08/28 职场文书
计划生育证明书写要求
2014/09/17 职场文书
党支部反对四风思想汇报
2014/10/10 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
让子弹飞观后感
2015/06/11 职场文书
对Golang中的FORM相关字段理解
2021/05/02 Golang
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android
改造DE1103三步曲
2022/04/07 无线电