jQuery3.0中的buildFragment私有函数详解
时隔 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 等方法的所依赖。
如下图
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 数组中
如图示
后面的两个参数需要注意下
1. 最后两个参数 selection 和 ignored 只在 replaceWith 方法里使用。需要了解的是 replaceWith 只做节点替换,不会替换先前元素的所有数据(Data),比如绑定事件,$.data 都不会被新元素拥有。
2. scripts 参数只在 jQuery.parseHTML 方法里使用(domManip里传false),当 jQuery.parseHTML 的第三个参数 keepScripts 为 false 时将删除节点里所有的 script tag
以上所述是小编给大家介绍的jQuery3.0中的buildFragment私有函数详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- Android Fragment的生命周期详解
- Android Fragment概述及用法
- Android Fragment使用之实例演示
- Android开发 Activity和Fragment详解
- Android Fragment多层嵌套重影问题的解决方法
- Android 中 Fragment 嵌套 Fragment使用存在的bug附完美解决方案
- Fragment 多层嵌套方法调用问题的解决方案
- Android中关于FragmentA嵌套FragmentB的问题
- Android 动态添加Fragment的实例代码
- Android利用Fragment实现Tab选项卡效果
- Android Fragment+FragmentTabHost组件实现常见主页面(仿微信新浪)
相关文章
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
这篇文章给大家介绍使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo的实现思路,涉及到Jquery.Qrcode基本使用,Jquery.Qrcode对中文字符的支持及Jquery.Qrcode添加自定义Logo图片的相关知识,本文介绍非常详细,具有参考价值,感兴趣的朋友一起看看吧2016-09-09jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
这篇文章主要介绍了jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果,可实现仿相册插件切换效果,并附代码demo源码供读者下载参考,需要的朋友可以参考下2016-02-02jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
这篇文章主要介绍了jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法,涉及jQuery数值运算及条件判断等相关操作技巧,需要的朋友可以参考下2019-01-01jquery PrintArea 实现票据的套打功能(代码)
下面小编就为大家带来一篇jquery PrintArea 实现票据的套打功能(代码)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-03-03jq stop()和:is(:animated)的用法及区别(详解)
下面小编就为大家带来一篇jq stop()和:is(:animated)的用法及区别(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-02-02
最新评论