jQuery的历史版本

Posted 2023-05-09

参考技术A

2006年8月，jQuery的第一个稳定版本，并且已经支持CSS选择符、事件处理和AJAX交互

2007年7月，jQuery 1.1.3版发布，这次小版本的变化包含了对jQuery选择符引擎执行速度的显著提升。

2008年5月，jQuery 1.2.6版发布，这版主要是将Brandon Aaron开发的流行的Dimensions插件的功能移植到了核心库中，同时也修改了许多BUG，而且有不少的性能得到提高。

2009年1月，jQuery 1.3版发布，它使用了全新的选择符引擎Sizzle，在各个浏览器下全面超越其他同类型javascript框架的查询速度，程序库的性能也因此有了极大提升。

2010年1月，也是jQuery的四周年生日，jQuery 1.4版发布，为了庆祝jQuery四周岁生日，jQuery团队特别创建了jQuery14站点，带来了连续14天的新版本专题介绍。

2010年2月，jQuery 1.4.2版发布，它新增了有关事件委托的两个方法：delegate和undelegate。

2011年1月，jQuery 1.5版发布。

2011年5月，jQuery 1.6版发布。

该版本重写了Attribute模块和大量的性能改进。

2011年，11月，jQuery 1.7版发布。

总结：目前jQuery有1.x和2.x还有3.x三个主要版本，区别在于2.x移除了对古老的IE 6、7、8的支持，因此2.x的代码更精简。

选择哪个版本主要取决于你是否想支持IE 6~8

jQuery 3.0的domManip浅析

domManip 这个函数的历史由来已久，从 jQuery 1.0 版本开始便存在了，一直到最新的 jQuery 版本。可谓是元老级工具函数。

 

domManip 的主要功能是为了实现 DOM 的插入和替换。具体共为以下 5 个函数服务

• 内部后插入（append）
• 内部前插入（prepend）
• 外部前插入（before）
• 外部后插入（after）
• 替换元素 （replaceWith，1.9.x 之前的版本没有使用 domMainp）

 

而一个 each 就生成了另外 5 个函数：appendTo、prependTo、insertBefore、insertAfter、replaceAll

jQuery.each( {
	appendTo: "append",
	prependTo: "prepend",
	insertBefore: "before",
	insertAfter: "after",
	replaceAll: "replaceWith"
}, function( name, original ) {
	jQuery.fn[ name ] = function( selector ) {
		var elems,
			ret = [],
			insert = jQuery( selector ),
			last = insert.length - 1,
			i = 0;

		for ( ; i <= last; i++ ) {
			elems = i === last ? this : this.clone( true );
			jQuery( insert[ i ] )[ original ]( elems );

			// Support: Android <=4.0 only, PhantomJS 1 only
			// .get() because push.apply(_, arraylike) throws on ancient WebKit
			push.apply( ret, elems.get() );
		}

		return this.pushStack( ret );
	};
} );

 

如图

 

内部调用如图

 

源码

append: function() {
	return domManip( this, arguments, function( elem ) {
		if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
			var target = manipulationTarget( this, elem );
			target.appendChild( elem );
		}
	} );
},
prepend: function() {
	return domManip( this, arguments, function( elem ) {
		if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
			var target = manipulationTarget( this, elem );
			target.insertBefore( elem, target.firstChild );
		}
	} );
},
before: function() {
	return domManip( this, arguments, function( elem ) {
		if ( this.parentNode ) {
			this.parentNode.insertBefore( elem, this );
		}
	} );
},
after: function() {
	return domManip( this, arguments, function( elem ) {
		if ( this.parentNode ) {
			this.parentNode.insertBefore( elem, this.nextSibling );
		}
	} );
},
replaceWith: function() {
	var ignored = [];

	// Make the changes, replacing each non-ignored context element with the new content
	return domManip( this, arguments, function( elem ) {
		var parent = this.parentNode;

		if ( jQuery.inArray( this, ignored ) < 0 ) {
			jQuery.cleanData( getAll( this ) );
			if ( parent ) {
				parent.replaceChild( elem, this );
			}
		}

	// Force callback invocation
	}, ignored );
}

　　

domManip 的实现

domManip 的主要功能就是添加 DOM 元素，因为添加的位置不同而提供了四个公开函数 append、prepend、before、after，此外还有一个 replaceWith。简单说 domManip 就做了两件事

1. 先完成 DOM 节点添加
2. 如果添加的 DOM 节点内有 script 标签，需要额外处理下。对于可执行的 script （通过type属性判断）则执行其内的脚本代码，其它的则不执行。

 

domManip 依赖的一个重要函数就是 buildFragment，为 DOM 插入提高了性能。

 

domManip 内对 script 节点元素做了特殊处理

1. script 无 type 属性，默认会执行其内的 JS 脚本
2. script 的 type="text/javascript" 或 type="text/ecmascript" ，会执行其内的 JS 脚本
3. script 如果有 src 属性，会执行 $._evalUrl 请求远程的 JS 文件并执行
4. 其它不会执行 JS 脚本，有时我们会用 script 来做 html 模板，如 underscore.js，type="text/template" 或 type="text/plain" 这种，其内的 JS 都不会被执行

此外 dataPriv.access( node, "globalEval" )，这一句标示了如果该 script 已经执行过，则不会再次执行。或者说执行后会设置一个 globalEval: true 的标示。

domManip 内部依赖 buildFragment、restoreScript、disableScript、jQuery._evalUrl、DOMEval 这几个小函数，而 restoreScript、jQuery._evalUrl 也仅在 domManip 用到。

// Replace/restore the type attribute of script elements for safe DOM manipulation
function disableScript( elem ) {
	elem.type = ( elem.getAttribute( "type" ) !== null ) + "/" + elem.type;
	return elem;
}
function restoreScript( elem ) {
	var match = rscriptTypeMasked.exec( elem.type );

	if ( match ) {
		elem.type = match[ 1 ];
	} else {
		elem.removeAttribute( "type" );
	}

	return elem;
}
jQuery._evalUrl = function( url ) {
	return jQuery.ajax( {
		url: url,

		// Make this explicit, since user can override this through ajaxSetup (#11264)
		type: "GET",
		dataType: "script",
		cache: true,
		async: false,
		global: false,
		"throws": true
	} );
};

　　

domManip 经历了各个版本的演变

1. 3.0.x 之前版本的 domManip 函数是挂在 jQuery 对象上面的（jQuery.fn.domManip），即通过 $().domManip 方式可以访问；3.0.x 后 domManip 是一个私有函数，外部无法访问
2. 1.2.x 之前 domManip 有 4 个参数；1.3.x ~ 1.9.x 是 3 个参数；2.x 只有 2 个参数；3.x 有 4 个参数
3. 1.9.x 之前的版本 replaceWith 没有使用 domMainp

 

相关：

http://www.cnblogs.com/snandy/p/5760742.html