jQuery1.11源码分析(9)-----初始化jQuery对象的函数和关联节点获取函数

这篇也没什么好说的，初始化jQuery对象的函数要处理多种情况，已经被寒冬吐槽烂了。关联节点获取函数主要基于两个工具函数dir和sibling，前者基于指定的方向遍历，后者则遍历兄弟节点(真的不能合并？)。后面的一些API则主要调用这两个函数。大几百行代码，不过逻辑很简单

// Initialize a jQuery object
// A central reference to the root jQuery(document)
var rootjQuery,
	// Use the correct document accordingly with window argument (sandbox)
	document = window.document,

	// A simple way to check for HTML strings
	// Prioritize #id over  to avoid XSS via location.hash (#9521)
	// Strict HTML recognition (#11290: must start with <)
    //一个检查字符串是否包含HTML的简单正则。
    //需要避免如<script>alert(1)</script>之类的XSS
	rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,
    //接下来就是被寒冬黑得不亦乐乎的真正的产生jQuery对象的函数了
	init = jQuery.fn.init = function( selector, context ) {
		var match, elem;

		// HANDLE: $(""), $(null), $(undefined), $(false)
		if ( !selector ) {
            //??????为什么这里return 的是一个空数组？
            //这只是显示问题
            console.log(this.length);
			return this;
		}

		// Handle HTML strings
        //处理HTML字符串
        //当传入的是字符串时
		if ( typeof selector === "string" ) {
            //当传入的字符串类似于"<div >"
			if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
				// Assume that strings that start and end with <> are HTML and skip the regex check
				match = [ null, selector, null ];

			} else {
				match = rquickExpr.exec( selector );
			}

			// Match html or make sure no context is specified for #id
			if ( match && (match[1] || !context) ) {

				// HANDLE: $(html) -> $(array)
				if ( match[1] ) {
					context = context instanceof jQuery ? context[0] : context;

					// scripts is true for back-compat
					// Intentionally let the error be thrown if parseHTML is not present
                    //把DOM元素加到this里
					jQuery.merge( this, jQuery.parseHTML(
						match[1],
						context && context.nodeType ? context.ownerDocument || context : document,
						true
					) );

					// HANDLE: $(html, props)
                    //什么情况下context是PlainObject？
                    //处理$(html,props)这种情况。。所以第二个参数是{attrName:attrValue}，context此时为PlainObject
					if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
						for ( match in context ) {
							// Properties of context are called as methods if possible
                            //为什么这里要调用函数？
							if ( jQuery.isFunction( this[ match ] ) ) {
								this[ match ]( context[ match ] );

							// ...and otherwise set as attributes
							} else {
								this.attr( match, context[ match ] );
							}
						}
					}

					return this;

				// HANDLE: $(#id)
				} else {

                    //先尝试使用原生借口
					elem = document.getElementById( match[2] );

					// Check parentNode to catch when Blackberry 4.6 returns
					// nodes that are no longer in the document #6963
					if ( elem && elem.parentNode ) {
						// Handle the case where IE and Opera return items
						// by name instead of ID
						if ( elem.id !== match[2] ) {
							return rootjQuery.find( selector );
						}

						// Otherwise, we inject the element directly into the jQuery object
                        //这里不能用push，是因为this是一个伪数组，但不能用自己写的push？
						this.length = 1;
						this[0] = elem;
					}

					this.context = document;
					this.selector = selector;
					return this;
				}

			// HANDLE: $(expr, $(...))
			} else if ( !context || context.jquery ) {
				return ( context || rootjQuery ).find( selector );

			// HANDLE: $(expr, context)
			// (which is just equivalent to: $(context).find(expr)
            //这里就是转换调用一下，这种思路可以学习
			} else {
				return this.constructor( context ).find( selector );
			}

		// HANDLE: $(DOMElement)
		} else if ( selector.nodeType ) {
			this.context = this[0] = selector;
			this.length = 1;
			return this;

		// HANDLE: $(function)
		// Shortcut for document ready
		} else if ( jQuery.isFunction( selector ) ) {
			return typeof rootjQuery.ready !== "undefined" ?
				rootjQuery.ready( selector ) :
				// Execute immediately if ready is not present
                //否则立刻执行
				selector( jQuery );
		}
        //如果传进来的是jQuery对象
		if ( selector.selector !== undefined ) {
			this.selector = selector.selector;
			this.context = selector.context;
		}

		return jQuery.makeArray( selector, this );
	};

// Give the init function the jQuery prototype for later instantiation
//将init这个函数的原型设置为jQuery.fn，这样每个jQuery对象都可以共享jQuery.fn上的函数
init.prototype = jQuery.fn;

// Initialize central reference
//文档节点的jQuery对象
rootjQuery = jQuery( document );

//后面关联节点时用来判断函数名是否带有Until或All的正则
var rparentsprev = /^(?:parents|prev(?:Until|All))/,
	// methods guaranteed to produce a unique set when starting from a unique set
    //标记某些方法是否需要确保返回的集合里每一个元素都唯一
	guaranteedUnique = {
		children: true,
		contents: true,
		next: true,
		prev: true
	};

jQuery.extend({
    //按某一方向查找，返回匹配元素数组，注意这里有until
	dir: function( elem, dir, until ) {
		var matched = [],
			cur = elem[ dir ];
		while ( cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery( cur ).is( until )) ) {
			if ( cur.nodeType === 1 ) {
				matched.push( cur );
			}
			cur = cur[dir];
		}
		return matched;
	},
    //按兄弟元素方向查找，返回匹配元素数组
	sibling: function( n, elem ) {
		var r = [];

		for ( ; n; n = n.nextSibling ) {
			if ( n.nodeType === 1 && n !== elem ) {
				r.push( n );
			}
		}

		return r;
	}
});

jQuery.fn.extend({
    //这个函数应该和之前的is待在一块
	has: function( target ) {
		var i,
			targets = jQuery( target, this ),
			len = targets.length;

		return this.filter(function() {
			for ( i = 0; i < len; i++ ) {
				if ( jQuery.contains( this, targets[i] ) ) {
					return true;
				}
			}
		});
	},
    //匹配jQuery对象中每一个DOM元素最接近的父元素，最后会去重
	closest: function( selectors, context ) {
		var cur,
			i = 0,
			l = this.length,
			matched = [],
			pos = rneedsContext.test( selectors ) || typeof selectors !== "string" ?
				jQuery( selectors, context || this.context ) :
				0;

		for ( ; i < l; i++ ) {
			for ( cur = this[i]; cur && cur !== context; cur = cur.parentNode ) {
				// Always skip document fragments
                //跳过文档碎片节点
				if ( cur.nodeType < 11 && (pos ?
                    //pos此时是一个jQuery对象
					pos.index(cur) > -1 :

					// Don't pass non-elements to Sizzle
					cur.nodeType === 1 &&
                        //这里是检查cur是否和selectors匹配
						jQuery.find.matchesSelector(cur, selectors)) ) {
                    //因为只匹配最近的一个节点
					matched.push( cur );
					break;
				}
			}
		}

		return this.pushStack( matched.length > 1 ? jQuery.unique( matched ) : matched );
	},

	// Determine the position of an element within
	// the matched set of elements
    //其实本质上还是调用工具函数inArray，不过inArray设计得不错，错误返回-1，正确返回索引
	index: function( elem ) {

		// No argument, return index in parent
        //这个获得索引的方法很巧妙，检查自己前面有多少元素，就是自己的索引
		if ( !elem ) {
			return ( this[0] && this[0].parentNode ) ? this.first().prevAll().length : -1;
		}

		// index in selector
        //处理传进来的参数是elem的情况
		if ( typeof elem === "string" ) {
			return jQuery.inArray( this[0], jQuery( elem ) );
		}

		// Locate the position of the desired element
		return jQuery.inArray(
			// If it receives a jQuery object, the first element is used
			elem.jquery ? elem[0] : elem, this );
	},
    //这个添加方式颇为奇葩。。添加完还要unique一下。。添加完原有的selector也会没了。。
	add: function( selector, context ) {
		return this.pushStack(
			jQuery.unique(
				jQuery.merge( this.get(), jQuery( selector, context ) )
			)
		);
	},
    //把压栈之前的jQuery对象加过来，估计是后面有用
	addBack: function( selector ) {
		return this.add( selector == null ?
			this.prevObject : this.prevObject.filter(selector)
		);
	}
});

//之所以需要这么个工具函数，是因为在遍历的时候需要考虑无用节点。。不过其实也没用几次。。
function sibling( cur, dir ) {
	do {
		cur = cur[ dir ];
	} while ( cur && cur.nodeType !== 1 );

	return cur;
}

//这里为什么是each而不是extend?
//这里使用each的形式对下面的每一个函数进行处理
//下面这些函数就是调用前面的API，说明前面抽象得比较好
jQuery.each({
	parent: function( elem ) {
		var parent = elem.parentNode;
		return parent && parent.nodeType !== 11 ? parent : null;
	},
	parents: function( elem ) {
		return jQuery.dir( elem, "parentNode" );
	},
	parentsUntil: function( elem, i, until ) {
		return jQuery.dir( elem, "parentNode", until );
	},
	next: function( elem ) {
		return sibling( elem, "nextSibling" );
	},
	prev: function( elem ) {
		return sibling( elem, "previousSibling" );
	},
	nextAll: function( elem ) {
		return jQuery.dir( elem, "nextSibling" );
	},
	prevAll: function( elem ) {
		return jQuery.dir( elem, "previousSibling" );
	},
	nextUntil: function( elem, i, until ) {
		return jQuery.dir( elem, "nextSibling", until );
	},
	prevUntil: function( elem, i, until ) {
		return jQuery.dir( elem, "previousSibling", until );
	},
	siblings: function( elem ) {
		return jQuery.sibling( ( elem.parentNode || {} ).firstChild, elem );
	},
	children: function( elem ) {
		return jQuery.sibling( elem.firstChild );
	},
	contents: function( elem ) {
        //这里要判断元素是否是iframe
		return jQuery.nodeName( elem, "iframe" ) ?
			elem.contentDocument || elem.contentWindow.document :
			jQuery.merge( [], elem.childNodes );
	}
    //处理函数，进行一层封装
}, function( name, fn ) {
	jQuery.fn[ name ] = function( until, selector ) {
		var ret = jQuery.map( this, fn, until );

		if ( name.slice( -5 ) !== "Until" ) {
            //当name不为xxxUntil时，说明第一个参数不是用来until的，而是选择符。
			selector = until;
		}
        //含有选择符的话要过滤一下
		if ( selector && typeof selector === "string" ) {
			ret = jQuery.filter( selector, ret );
		}

		if ( this.length > 1 ) {
			// Remove duplicates
            //当需要去重的时候去重
			if ( !guaranteedUnique[ name ] ) {
				ret = jQuery.unique( ret );
			}

			// Reverse order for parents* and prev-derivatives
			if ( rparentsprev.test( name ) ) {
				ret = ret.reverse();
			}
		}

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