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 相关文章推荐
javascript比较文档位置
Apr 08 Javascript
很酷的javascript loading效果代码
Jun 18 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
js 动态修改css文件用到了cssRule
Aug 20 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
vue.js系列中的vue-fontawesome使用
Feb 10 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
小程序实现留言板
Nov 02 Javascript
React学习之JSX与react事件实例分析
Jan 06 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
基于mysql的bbs设计(二)
2006/10/09 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
php查询操作实现投票功能
2016/05/09 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
javascript实现的动态文字变换
2007/07/28 Javascript
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
js闭包的用途详解
2014/11/09 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
jquery动态导航插件dynamicNav用法实例分析
2015/09/06 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
Python中的包和模块实例
2014/11/22 Python
Python简单定义与使用二叉树示例
2018/05/11 Python
python获取地震信息 微信实时推送
2019/06/18 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
物业工作计划书
2014/01/10 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
党员民主评议个人总结
2014/10/20 职场文书
教师工作能力自我评价
2015/03/04 职场文书
年度考核个人总结
2015/03/06 职场文书
小学见习报告
2015/06/23 职场文书
五年级作文之成长
2019/09/16 职场文书
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python