jQuery 1.6 源码学习（三）——core.js[3]之init方法

不得不说，jQuery现在的版本更新速度大有朝chrome看齐的趋势，看来chrome的版本更新价值观很有影响力，github上已经是 1.7版了，不过官方已发布依然是1.6.1，不过想来这些版本内核现在应该是很稳定了，所以学习的时候也不考虑那么多细节了，直接down最新版来啃！

 

在分析core的基本框架的时候已经弄清了，jQuery的实例对象是通过new init方法来返回的，那么init方法便是jQuery的核心方法了，也是jQuery的对外接口jQuery()（即$()）的内部实现，熟悉 jQuery的童鞋应该知道除了在构建对象时封装DOM元素为类数组的jQuery实例对象，jQuery()方法也可以通过几种不同的调用方式达到不同 的效果，接下来看看源代码详细的分析：

init: function( selector, context, rootjQuery ) {

    var match, elem, ret, doc;

    // 分支1 在没有指定选择器的情况下，直接返回本身

    // Handle $(""), $(null), or $(undefined)

    if ( !selector ) {

        return this;

    }

    // 分支2 ，当传递单个DOM元素时，直接将其作为jQuery数组的第一个元素 同样，其context也设置为该元素

    // Handle $(DOMElement)

    if ( selector.nodeType ) {

        this.context = this[0] = selector;

        this.length = 1;

        return this;

    }

    // 分支3 因为body元素在一个页面只有一个 因此优化body 访问，context此时设置为document

    // The body element only exists once, optimize finding it

    if ( selector === "body" && !context && document.body ) {

        this.context = document;

        this[0] = document.body;

        this.selector = selector;

        this.length = 1;

        return this;

    }

    // 分支4 处理HTML字符串，此时又分成如下两种情况：

    // 1 : 形如<a></a>的html代码

    // 2 : 形如#xxx的ID选择器

    // Handle HTML strings

    if ( typeof selector === "string" ) {

        // 此处为一个优化，即直接判断第一个字符和最后一个字符是不是<>对已经总字符数大于3个，

        // 在这种条件下假设HTML字符串为正确的，因此略去了正则匹配

        // Are we dealing with HTML string or an ID?

        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 {

            // 此正则表达式用来匹配HTML字符串或者ID（#xxx）选择器

            // 且该表达式并不完整验证字符串是否正确

            // 注：quickExpr = /^(?:[^<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/

            match = quickExpr.exec( selector );

        }

        // 如果为形如"#xxx"的ID选择器，捕获组1则为undefined(即未匹配html字符串成功），

        // context的指定则会导致调用find方法

        // Verify a match, and that no context was specified for #id

        if ( match && (match[1] || !context) ) {

            // 此时处理html代码

            // HANDLE: $(html) -> $(array)

            if ( match[1] ) {

                context = context instanceof jQuery ? context[0] : context;

                doc = (context ? context.ownerDocument || context : document);

                // 处理单个标签情况, 形如 $("<div>") 或 $("<a></a>")

                // 注： rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/

                // If a single string is passed in and it's a single tag

                // just do a createElement and skip the rest

                ret = rsingleTag.exec( selector );

 

                if ( ret ) {

                    if ( jQuery.isPlainObject( context ) ) {

                        selector = [ document.createElement( ret[1] ) ];

                        // 现在attr方法和css方法在底层调用了access方法，此方法的分析先搁置一下，

                        // 在创建HTML代码时，context用来为创建的对象设置其指定的属性

                        jQuery.fn.attr.call( selector, context, true );

 

                    } else {

                        selector = [ doc.createElement( ret[1] ) ];

                    }

 

                } else {

                    //非单个标签时将使用buildFragmenty来创建文档片段，

                    // 该方法位于manipulation.js中，属于内部方法，以后分析

                    ret = jQuery.buildFragment( [ match[1] ], [ doc ] );

                    //clone依然位于manipulation.js中，深度复制一个对象

                    // 此处将selector设置为文档片段的子节点

                    selector = (ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment).childNodes;

                }

                //merge方法用于合并两个数组，在这里会将我们创建的文档片段或者元素合并到this中（即jQuery实例对象中）

                return jQuery.merge( this, selector );

            // HANDLE: $("#id")

            } else {

                // 捕获组2是id值

                elem = document.getElementById( match[2] );

                // 一个bug，参见 http://bugs.jquery.com/ticket/6963

                // Check parentNode to catch when Blackberry 4.6 returns

                // nodes that are no longer in the document #6963

                if ( elem && elem.parentNode ) {

                    // IE和opera返回name而不是ID，此时将调用find方法查找元素

                    // Handle the case where IE and Opera return items

                    // by name instead of ID

                    if ( elem.id !== match[2] ) {

                        return rootjQuery.find( selector );

                    }

                    // 否则直接将DOM元素插入到jQuery实例对象中

                    // Otherwise, we inject the element directly into the jQuery object

                    this.length = 1;

                    this[0] = elem;

                }

 

                this.context = document;

                this.selector = selector;

                return this;

            }

 

        // HANDLE: $(expr, $(...))

        // 处理类似于$("div#div1",$("div#div2"))这种情况时，将递归查找，等价于$("divdiv2").find("div#div1");

        } else if ( !context || context.jquery ) {

            return (context || rootjQuery).find( selector );

 

        // 这种情况是我们处理时最普遍的情况，依然将调用find方法，在选择器代码中再做分析

        // HANDLE: $(expr, context)

        // (which is just equivalent to: $(context).find(expr)

        } else {

            return this.constructor( context ).find( selector );

        }

 

    // HANDLE: $(function)

    // Shortcut for document ready

    // 分支5 处理ready方法，$(fn)的情况

    } else if ( jQuery.isFunction( selector ) ) {

        return rootjQuery.ready( selector );

    }

    //防止$($("xxx"))这种情况处理时发生异常

    if (selector.selector !== undefined) {

        this.selector = selector.selector;

        this.context = selector.context;

    }

    //将jQuery类数组转化为一个真正的数组（[xx,xx])

    return jQuery.makeArray( selector, this );

},

 如代码中注释所言，jQuery对象就是这样一点点构建起来的，当然作为选择器的核心方法find留到后面再做分析，这次的分析先告一段落，下次将会看看jQuery是如何实现隐式迭代和链式调用的。