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

jQuery1.11源码分析(9)-----初始化jQuery对象的函数和关联节点获取函数,古老的榕树,5-wow.com