在 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;
}

该方法主要执行步骤

  1. 通过第二个参数 content 创建 fragment
  2. 通过第一个参数 elems 构建 nodes ,将 elems 内元素转成 DOM 元素存放于数组 nodes 中
  3. 将 nodes 里元素循环放入添加到文档碎片 fragment 上
  4. 返回 fragment

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

  1. elem 是 DOM 元素(根据nodeType判断),直接放入 nodes 数组中
  2. elem 是字符串且不是 HTML tag,创建文本节点对象(textNode),放入 nodes 数组中
  3. elem 是字符串且是 HTML tag,将其转成 DOM 元素,放入 nodes 数组中

如图示

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

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

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

buildFragment 在 jQuery 各个版本中的演变

  1. 1.0.x ~ 1.3.x 中没有 buildFragment 函数,即没有抽取出该函数为 domManip 服务
  2. 1.4.x 中首次引入 buildFragment ,当时是挂在 jQuery 上的静态方法,有三个参数 args, nodes, scripts。一直到2.x.x 依然是公开可以访问的
  3. 3.x.x 开始 buildFragment 变成了一个私有函数,只能在 jQuery 代码内部访问,客户端程序员无法访问

jQuery 3.0的buildFragment的更多相关文章

  1. jQuery 2.0.3 源码分析core - 选择器

         声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢!      打开jQuery源码,一眼看去到处都充斥着正则表达式,jQuery框架的基础就是查询了,查询文档元素对象 ...

  2. jQuery 3.0的domManip浅析

    domManip 这个函数的历史由来已久,从 jQuery 1.0 版本开始便存在了,一直到最新的 jQuery 版本.可谓是元老级工具函数. domManip 的主要功能是为了实现 DOM 的插入和 ...

  3. jQuery 3.0 的 Data 浅析

    jQuery 3.0 在6月9日正式发布了,3.0 也被称为下一代的 jQuery .这个版本从14年10月开始,其中发布过一次beta 版(2016/1/14,)和候选版(2016/05/20).一 ...

  4. jQuery 3.0正式发布

    jQuery 基金会刚刚发布了该 JavaScript 框架的 3.0 版本,并且首次抛弃了对老旧的 IE 浏览器的支持.jQuery 3.0 的工作始于 2014 年 10 月,其最初目标是在 2. ...

  5. jQuery 3.0 的变化

    时隔 3 个月,jQuery 团队终于发布了 3.0 Alpha 版本.有两个版本 jQuery compat 3.0 和 jQuery 3.0. jQuery compat 3.0 对应之前的 1. ...

  6. jQuery 2.0发布,不再支持IE6/7/8

    有时发现jQuery库引用的都对,javascript代码写的也没问题,可是jquery就是出现问题,额--我发现换个jquery库就没问题了,长时间不关注jquery的问题而已: 很多人都没有使用最 ...

  7. PJax在jQuery 3.0无法运行问题修复

    PJax在jQuery 3.0无法运行 [现象] 页面报错:Uncaught TypeError: Cannot read property 'push' of undefined [原因] jQue ...

  8. jQuery 3.0 的 Data

    jQuery 3.0 的 Data Snandy If you cannot hear the sound of the genuine in you, you will all of your li ...

  9. jQuery 2.0.3 源码分析Sizzle引擎解析原理

    jQuery 2.0.3 源码分析Sizzle引擎 - 解析原理 声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 先来回答博友的提问: 如何解析 div > p + ...

随机推荐

  1. oracleXE(oracle学习版)在windows的安装配置

    oracleXE其实安装基本就是一路下一步. 在安装前记得先把tomcat打开,不然oracleXE会占用8080端口且安装过程无法更改端口. 如果需要远程连接此oracle XE的话,要关闭这台电脑 ...

  2. thinkphp疑难解决4

    关于文件上传所涉及到的php.ini 中的一些配置: (以当前要设置的关键字开头...) 是每个上传文件所允许的大小, 默认的 upload_max_filesize = 2M, 如果超过了2M,_P ...

  3. dereverberation

    Typical Approach to Dereverberation DOAs Estimating the directions of arrival of a direct source sig ...

  4. 前端MVVM框架avalon揭秘 - 双向绑定原理

    avalon大家可能不熟悉,但是Knockout估计或多或少听过用过,那么说说KO的几个概念 监控属性(Observables)和依赖跟踪(Dependency tracking) 声明式绑定(Dec ...

  5. Linux如何查看文件系统(磁盘使用情况)

    查看磁盘剩余空间: df -Th 用法:df [选项]… [文件]… 显示每个<文件>所在的文件系统的信息,默认是显示所有文件系统. 长选项必须用的参数在使用短选项时也是必须的. -a, ...

  6. LeetCode - 51. N-Queens

    51. N-Queens Problem's Link ------------------------------------------------------------------------ ...

  7. thinkphp伪静态(url重写)

    1. 服务器开启url_rewrite功能,linux空间的php虚拟主机只需要开启apache的mod_rewriet,如果是iis6.0就要安装ISAPI Rewrite模块,apache只要开启 ...

  8. IOS-JSON &amp; XML解析

    XML & JSON 简介 •JSON –作为一种轻量级的数据交换格式,正在逐步取代XML,成为网络数据的通用格式 –基于JavaScript的一个子集 –易读性略差,编码手写难度大,数据量小 ...

  9. 二叉查找树的Java实现

    为了克服对树结构编程的恐惧感,决心自己实现一遍二叉查找树,以便掌握关于树结构编程的一些技巧和方法.以下是基本思路: [1] 关于容器与封装.封装,是一种非常重要的系统设计思想:无论是面向过程的函数,还 ...

  10. Wix 安装部署(五) Bootstrapper 捆绑安装

    Wix的xml配置确实很费劲,忍不住有点像吐槽一下,前四篇完成的功能在Windows Installer中通过配置能很快的弄出来.可惜有很多加了锁的功能在InstallShield Limited E ...