拜读jquery源码（一）

之前有前辈和我说学习JavaScript的知识点，尤其是比较抽象和深奥的点，可以看下优秀的框架源码，所以今天开始拜读jquery的源码，不仅是巩固jquery的用法和每个方法的实现，更重要的是学习框架的设计模式以及设计缘由。

借鉴和参考别人的理解：

jQuery的总体框架：
 (function(window,undefined){
    var jQuery=function(selector,context){
        //...
    };
    //工具方法utilities
    //回调函数 callbacks
    //异步队列 Defered Object
    //浏览器功能测试 Support
    //数据缓存 Data
    //队列 Queue
    //属性操作 Attributes
    //事件系统 Events
    //选择器 Sizzle
    //DOM遍历 Traversing
    //DOM操作 Manipulation
    //样式操作 CSS
    //异步请求  Ajax
    //动画 Animation
    //坐标 offset，尺寸 Dimensions
    window.jQuery=window.$=jQuery;
}})(window);
关于上述代码，解释如下：
1.jQuery的整体代码包裹在一个立即执行的自调用匿名的函数中，这样可以尽量减少和其他第三方库的干扰；
2，在上述代码最后，将jQuery对象添加到全局window上，并为之设置变量$,从而使得可以在外界访问jQuery;
3,为自调用匿名函数设置参数window，并传入参数window,这样一方面可以缩短作用域链，可以尽快访问到window;另一方面便于代码压缩；
4，为自动用匿名函数设置参数undefined，一方面可以缩短查找Undefined的作用域链，另一方面可防止undefined在外界被修改。

jquery.fn执行jquery的原型对象，共享方法，让我们更好理解，jQuery是一个封装得非常好的‘类’，比如我们用语句　$("#btn1") 会生成一个 jQuery类的实例。

以下是阅读后做的笔记，其中难以理解的是pushStack 方法，pushStack() 函数用于将一个DOM元素集合加入到jQuery栈， 主要是用于内部函数。

//jquery.fn执行jquery的原型对象
jQuery.fn = jQuery.prototype = {


	// The current version of jQuery being used
	jquery: version,


	constructor: jQuery,


	// The default length of a jQuery object is 0
	length: 0,


	//toArray：取回包含在该jquery集合中的所有元素，作为一个数组
	//alert( $( "li" ).toArray() );调用这个方法，所有的匹配的DOM节点都会返回，包含在一个标准数组中：[<li id="foo">, <li id="bar">]
	//arr.slice.call(this),call方法调用一个对象的一个方法，以另一个对象替换当前对象。
	//this是jquery.fn的实例，toArray方法完全继承了slice的方法和属性
	toArray: function() {
		return slice.call( this );
	},


	// Get the Nth element in the matched element set OR
	// Get the whole matched element set as a clean array
	//get方法没有参数则返回所有元素的一个数组，同toArray方法
	//有参数则取回jquery对象所匹配的DOM元素，例如console.log( $( "li" ).get( 0 ) );=><li id="bar">
	get: function( num ) {


		// Return all the elements in a clean array
		if ( num == null ) {
			return slice.call( this );
		}
		// Return just the one element from the set
		//console.log( $( "li" )[ 0 ] );的句法无法用负数索引，负索引从匹配元素的末尾开始计数
		//num为负数则转换为正数，get(-1)=>get(2)
		return num < 0 ? this[ num + this.length ] : this[ num ];
	},


	// Take an array of elements and push it onto the stack
	// (returning the new matched element set)
	//pushStack把获取的元素数组放到栈中返回一个新的被匹配的数组
	//在执行jquery构造函数之后会产生一个实例对象，里面放着匹配到的元素，当使用这一个方法时
	//就会再新建一个空的jquery对象，然后再把调用这个方法的对象匹配到的元素放到栈中，就是一
	//个数组通过一个指针指向调用此方法的对象，这样就是一个链式栈可以不断扩展
	pushStack: function( elems ) {
		// Build a new jQuery matched element set
		//构造一个新的空jquery对象ret，this.constructor 指向构造函数 jQuery()		
		//$.merge() 函数用于合并两个数组内容到第一个数组
		var ret = jQuery.merge( this.constructor(), elems );


		// Add the old object onto the stack (as a reference)
		//在新对象中添加这么一个属性来指向当前的jQuery对象
		//merge产生的jQuery对象设置一个prevObject属性，并将当前（merge之前的）的对象赋值给prevObject
		ret.prevObject = this;


		// Return the newly-formed element set
		return ret;
	},


	// Execute a callback for every element in the matched set.
	//迭代一个jQuery对象，针对每个匹配的元素执行一个函数
	/*例如：
		$( "li" ).each(function( index ) {
  			console.log( index + ": " + $( this ).text() );
		});
	*/
	each: function( callback ) {
		return jQuery.each( this, callback );
	},


	//将一组数组转换为其他数组
	map: function( callback ) {
		return this.pushStack( jQuery.map( this, function( elem, i ) {
			return callback.call( elem, i, elem );
		} ) );
	},


	slice: function() {
		return this.pushStack( slice.apply( this, arguments ) );
	},


	first: function() {
		return this.eq( 0 );
	},


	last: function() {
		return this.eq( -1 );
	},


	eq: function( i ) {
		//若i=-1，len=3，则j=0+3=3，即最后一位索引为-1，第一位索引为0
		var len = this.length,
			j = +i + ( i < 0 ? len : 0 );
		return this.pushStack( j >= 0 && j < len ? [ this[ j ] ] : [] );
	},


	//end返回当前jquery对象的上一个状态
	// 所有通过pushStack方法获得的jQuery对象都可以通过end方法返回之前的状态
　  // 如果有preObject对象则返回该对象，否则调用构造函数返回jQuery的空对象
	end: function() {
		return this.prevObject || this.constructor();
	},


	// For internal use only.
	// Behaves like an Array's method, not like a jQuery method.
	//javascript原生方法
	push: push,
	sort: arr.sort,
	splice: arr.splice
};