jQuery 1.6 源码学习(一)——core.js[1]之基本架构

在网上下了一个jQuery 1.2.6的源码分析教程,看得似懂非懂,于是还是去github上下载源码,然后慢慢看源代码学习,首先来说说core.js这个核心文件吧。

jQuery整体的基本架构说起来也并不复杂,但是要看明白还是要花一点功夫,core.js这个文件搭建起了jQuery的整个框架,该文件的基本内容我大致总结如下:

//将整个jQuery 对象作为一个外部接口
var jQuery = (function(){

var jQuery = function( selector, context ) {
		//当执行形如$("p")的代码时会new一个jQuery.fn.init的对象,此对象一般我们称之为jQuery对象,下文中我将称其为jQuery实例对象,以与jQuery对象本身区分开来
		return new jQuery.fn.init( selector, context, rootjQuery );
	},/*
	...
	此处包含一些其他的变量,如正则表达式,useragent等
	...
	*/
//此处之所以把jQuery的原型与jQuery.fn绑定是因为fn可以作为其短名称出现
jQuery.fn = jQuery.prototype = {
//jQuery对象的原型所在,其中的方法和属性可由jQuery实例对象访问
	init :function(){
		//用以构建jQuery实例对象,最后返回一个类数组对象
	},
	/*
	...

	其他属性和方法,例如length,jquery版本,以及许多访问jquery数组元素的方法
	如:eq,get 等。

	...
	*/
}
//绑定jQuery对象的原型链
jQuery.fn.init.prototype = jQuery.fn;

//extend 可由 jQuery对象(静态方法)以及实例对象(实例方法)访问
jQuery.extend = jQuery.fn.extend =  function(){
	/*
	...
	jQuery本身的所有内容几乎都是由extend方法所扩展的,包括jQuery插件机制也建立在此方法之上
	该方法,
	...
	*/

};

jQuery.extend({
	/*
	jQuery自身核心的一些方法和属性,
	包括 noConflict,isReady等
	*/
});

/*
...
此处是一些其他操作,例如浏览器检测,处理ready事件等
...
*/
//最后返回jQuery供外部使用(作为全局对象)
return jQuery;
})();

可以看出jQuery大致分为两个部分,一个是静态方法部分,一个是实例对象部分,而这两者都是通过同一个函数extend来进行扩展的,也许上面代码看起来还比较抽象,下图则描述了整个框架的关系:

image

这样整个结构就显得清晰多了。其中最右边的jQuery实例是通过new jQuery.fn.init得到的。这样,扩展到jQuery.fn上的方法即可以作为实例方法供jQuery实例访问,而扩展到jQuery对象本身上的方法则作为静态方法。

在core.js中调用了extend来扩展绝大部分核心方法,首先来分析一下extend方法:

jQuery.extend = jQuery.fn.extend = function() {
	var options, name, src, copy, copyIsArray, clone,
		target = arguments[0] || {}, //将第一个参数作为扩展的目标对象
		i = 1,
		length = arguments.length,
		deep = false;

	// Handle a deep copy situation
	//可以传递一个bool值进来用于表示扩展对象时是否是深拷贝
	if ( typeof target === "boolean" ) {
		deep = target;
		target = arguments[1] || {};
		// skip the boolean and the target
		i = 2;
	}

	// Handle case when target is a string or something (possible in deep copy)
	// 当扩展对象是字符串时
	if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
		target = {};
	}

	// extend jQuery itself if only one argument is passed
	if ( length === i ) {
	// 关键!!当调用$.extend时,this将绑定到jQuery对象上,此时扩展的方法或者属性将是静态的,
	// 而调用$.fn.extend时则绑定到jQuery.fn上,此时扩展的均是实例方法,我们在撰写插件时可以在方法内部使用this,此时的this指向的是jQuery的实例对象
		target = this;
		--i;//修正i,以便后面正确遍历对象
	}
	//以下便是扩展代码,既可以用于扩展jQuery,也可以用来扩展自定义的对象,此方法是公开的,更多可以参考jQuery文档
	for ( ; i < length; i++ ) {
		// Only deal with non-null/undefined values
		if ( (options = arguments[ i ]) != null ) {
			// Extend the base object
			for ( name in options ) {
				src = target[ name ];
				copy = options[ name ];

				// Prevent never-ending loop
				if ( target === copy ) {
					continue;
				}

				// Recurse if we're merging plain objects or arrays
				// 如果是合并普通对象或者数组时,采用递归方式进行深拷贝(比如当数组中嵌套数组或者对象嵌套对象时)
				// 在jQuery内部核心扩展方法时并没有用到此段代码,比如下面的isPlainObject,isArray方法都是用extend扩展到jQuery中的。
				if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
					if ( copyIsArray ) {
						copyIsArray = false;
						clone = src && jQuery.isArray(src) ? src : []; //

					} else {
						clone = src && jQuery.isPlainObject(src) ? src : {};
					}

					// Never move original objects, clone them
					target[ name ] = jQuery.extend( deep, clone, copy );

				// Don't bring in undefined values
				} else if ( copy !== undefined ) {
					target[ name ] = copy;
				}
			}
		}
	}

	// Return the modified object
	return target;
};

基本上extend方法就是这样啦~

好吧,鉴于我人比较懒,今天就分析到这里,每天学习一点点,每天进步一点点~

原文地址:https://www.cnblogs.com/firstdream/p/2342677.html