jQuery3.0中的buildFragment私有函数详解


Posted in Javascript onAugust 16, 2016

时隔 3 个月,jQuery 团队终于发布了 3.0 Alpha 版本。有两个版本 jQuery compat 3.0 和 jQuery 3.0。

jQuery compat 3.0 对应之前的 1.x, 兼容更多的浏览器,对于IE支持到 8.0 版本

jQuery 3.0 对应之前的 2.x,关注更新的浏览器,对于IE支持到 9.0 版本

此外, 3.0还增加了对 Yandex 浏览器的支持,一款来自俄罗斯的浏览器。

下面看下jQuery3.0中的buildFragment。

在 jQuery3.0中,buildFragment 是一个私有函数,用来构建一个包含子节点 fragment 对象。这个 fragment 在 DOM1 中就已经有了,所有浏览器都支持。当频繁操作(添加、插入) DOM 时使用该方法可以提高性能,John resig 做过一个测试及一篇博客。

jQuery3.0 中 buildFragment 只在 domManip 和 jQuery.parseHTML 中使用,domManip 则被 DOM 操作如 append、prepend、before、after 等方法的所依赖。

如下图

jQuery3.0中的buildFragment私有函数详解

buildFragment 函数有 5 个参数,源码如下

function buildFragment( elems, context, scripts, selection, ignored ) {
var elem, tmp, tag, wrap, contains, j,
fragment = context.createDocumentFragment(),
nodes = [],
i = 0,
l = elems.length;
for ( ; i < l; i++ ) {
elem = elems[ i ];
if ( elem || elem === 0 ) {
// Add nodes directly
if ( jQuery.type( elem ) === "object" ) {
// Support: Android <=4.0 only, PhantomJS 1 only
// push.apply(_, arraylike) throws on ancient WebKit
jQuery.merge( nodes, elem.nodeType ? [ elem ] : elem );
// Convert non-html into a text node
} else if ( !rhtml.test( elem ) ) {
nodes.push( context.createTextNode( elem ) );
// Convert html into DOM nodes
} else {
tmp = tmp || fragment.appendChild( context.createElement( "div" ) );
// Deserialize a standard representation
tag = ( rtagName.exec( elem ) || [ "", "" ] )[ 1 ].toLowerCase();
wrap = wrapMap[ tag ] || wrapMap._default;
tmp.innerHTML = wrap[ 1 ] + jQuery.htmlPrefilter( elem ) + wrap[ 2 ];
// Descend through wrappers to the right content
j = wrap[ 0 ];
while ( j-- ) {
tmp = tmp.lastChild;
}
// Support: Android <=4.0 only, PhantomJS 1 only
// push.apply(_, arraylike) throws on ancient WebKit
jQuery.merge( nodes, tmp.childNodes );
// Remember the top-level container
tmp = fragment.firstChild;
// Ensure the created nodes are orphaned (#12392)
tmp.textContent = "";
}
}
}
// Remove wrapper from fragment
fragment.textContent = "";
i = 0;
while ( ( elem = nodes[ i++ ] ) ) {
// Skip elements already in the context collection (trac-4087)
if ( selection && jQuery.inArray( elem, selection ) > -1 ) {
if ( ignored ) {
ignored.push( elem );
}
continue;
}
contains = jQuery.contains( elem.ownerDocument, elem );
// Append to fragment
tmp = getAll( fragment.appendChild( elem ), "script" );
// Preserve script evaluation history
if ( contains ) {
setGlobalEval( tmp );
}
// Capture executables
if ( scripts ) {
j = 0;
while ( ( elem = tmp[ j++ ] ) ) {
if ( rscriptType.test( elem.type || "" ) ) {
scripts.push( elem );
}
}
}
}
return fragment;
}

该方法主要执行步骤

通过第二个参数 content 创建 fragment

通过第一个参数 elems 构建 nodes ,将 elems 内元素转成 DOM 元素存放于数组 nodes 中

将 nodes 里元素循环放入添加到文档碎片 fragment 上

返回 fragment

重点在第 2 步,构建 nodes,有 3 种情形

elem 是 DOM 元素(根据nodeType判断),直接放入 nodes 数组中

elem 是字符串且不是 HTML tag,创建文本节点对象(textNode),放入 nodes 数组中

elem 是字符串且是 HTML tag,将其转成 DOM 元素,放入 nodes 数组中

如图示

jQuery3.0中的buildFragment私有函数详解

后面的两个参数需要注意下

1. 最后两个参数 selection 和 ignored 只在 replaceWith 方法里使用。需要了解的是 replaceWith 只做节点替换,不会替换先前元素的所有数据(Data),比如绑定事件,$.data 都不会被新元素拥有。

jQuery3.0中的buildFragment私有函数详解

2. scripts 参数只在 jQuery.parseHTML 方法里使用(domManip里传false),当 jQuery.parseHTML 的第三个参数 keepScripts 为 false 时将删除节点里所有的 script tag

jQuery3.0中的buildFragment私有函数详解

以上所述是小编给大家介绍的jQuery3.0中的buildFragment私有函数详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
JavaScript Event学习第九章 鼠标事件
Feb 08 Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 Javascript
细说javascript函数从函数的构成开始
Aug 29 Javascript
javascript正则匹配汉字、数字、字母、下划线
Apr 10 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
JS弹出窗口的运用与技巧大全
Nov 01 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
微信小程序实现登录页云层漂浮的动画效果
May 05 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 Javascript
ElementUI实现el-form表单重置功能按钮
Jul 21 Javascript
js 自带的 map() 方法全面了解
Aug 16 #Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 #Javascript
js 自带的sort() 方法全面了解
Aug 16 #Javascript
JavaScript实战之菜单特效
Aug 16 #Javascript
深入理解js generator数据类型
Aug 16 #Javascript
js 创建对象 经典模式全面了解
Aug 16 #Javascript
js 上传文件预览的简单实例
Aug 16 #Javascript
You might like
Wordpress php 分页代码
2009/10/21 PHP
用PHP查询搜索引擎排名位置的代码
2010/01/05 PHP
php长字符串定义方法
2012/07/12 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
JavaScript日历实现代码
2010/09/12 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
利用TensorFlow训练简单的二分类神经网络模型的方法
2018/03/05 Python
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
python实现简易内存监控
2018/06/21 Python
python实现顺序表的简单代码
2018/09/28 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
python分布式编程实现过程解析
2019/11/08 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
Linux中如何用命令创建目录
2015/01/12 面试题
洗手间标语
2014/06/23 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书