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