总架构图(摘自《jQuery技术内幕》):

clipboard.png

代码逐步分析:

//init负责解析参数selector和context的类型;selector和context共有12个分支
function init(selector , context , rootjQuery){
    //selector可以为任意类型的值,但只有undefined、DOM元素、字符串、函数、jQuery对象、普通js对象都有效,其他类型可以接受但没意义
    //context:可以不传入,或者传入DOM元素、jQUery对象、普通js对象之一
    //rootjQuery:包含了document对象的jQuery对象,用于document.getElementById()查找失败、selector是选择器表达式且未指定context、selector是函数
    var match, elem, ret, doc;
    if(!selector){
        return this;
    }
    //判断传入的参数是否是DOM节点
    if( selector.nodeType ){
        this.context = this[0] = selector;
        this.length = 1;
        return this;
    }

    //如果传入了body,噼里啪啦立刻return this
    if( selector === "body" && !context && document.body){
        this.context = document;
        this[0] = document.body;
        this.selector = selector;
        this.length = 1;
        return this;
    }

    //如果传入其他字符串
    if( typeof selector === "string"){
        if(selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3){
            match = [null , selector , null]
        }
        else{
            var quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/;
            //关于?:的用法,这是正则的反向引用。想知道什么是反向引用请戳:http://baike.baidu.com/view/6987307.htm。看明白的同学麻烦回来教教我
            //据说这串正则可以防XSS,不过具体怎么防我还没搞明白
            match = quickExpr.exec( selector );
            //exec方法会返回一个数组,第一个参数是与正则匹配的串,剩下的参数是与括号内正则匹配的子串
        }

        if( match && (match[1] || !context ){
            //进一步对正则的判断,如果输入的是HTML代码则match[1]不是undefined,如果输入是‘#id’之流,则match[2]不是undefined
            //因为match非空,如果match[1]为undefined,则match[2]肯定非空。
            if( match[1] ){
                //单独处理输入为HTML串
                context = context instanceof jQuery ? context[0] : context;
                doc = ( context ? context.ownerDocument || context : document);
                //ownerDocument是文档本身元素

                var rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/;
                ret = rsingleTag.exec( selector );
                //匹配单个标签

                if( ret ){
                //如果ret非空,则判断selector是单独标签,调用document.createElement()创建标签对以后哪个的DOM元素;如果餐宿context是普通对象,
                //则调用jQuery方法attr()并传入参数context,同时把参数context中的属性、时间设置到创建的DOM元素上。
                    if( jQuery.isPlainObject( context) ){
                    //如果context是个纯粹的对象, - -什么叫纯粹的对象orz...
                        selector = [ document.createElement( ret[1] )];
                        //把DOM放到数据,为了160行更方便调用jQuery.merge()
                        jQuery.fn.attr.call( selector, context, true);

                    }
                    else{
                        selector = [ doc.createElement( ret[1] ) ];
                    }
                }
                else{
                    ret = jQuery.bulidFragment( [ match[1] ], [ doc ] );
                    //bulidFragment,创建文档碎片什么鬼,不懂
                    selector = (ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment).childNodes; 
                    //如果HTML代码符合缓存条件,则在使用转换后的DOM元素,必须先复制一份再使用,否则直接使用。
                }

                return jQuery.merge( this, selector );
                //合并到jQuery对象中并返回
            }
            else{
            //如果传入的是$('#id'),且未指定context
                elem = document.getElementById( match[2] );
                //直接查找id
                //原文档说在blackberry 4.6会返回已经不再文档中的DOM节点
                if( elem && elem.parentNode ){
                    //在IE6,IE7和某些版本opera中,会按属性name查找而不是id。
                    //所以sizzle通过document.getElementsByTagName("*")去除所有DOM元素,
                    //然后通过id逐一筛选出需要的
                    if( elem.id !== match[2] ){
                        return rootjQuery.find( selector );
                    }
                    this.length = 1;
                    this[0] = elem;
                }
                //找到元素后,设置第一个元素、属性length、context、selector,并返回当前jQuery对象
                this.context = document;
                this.selector = selector;
                return this;
            }
        }
        else if ( !context || context.jquery ){
        //字符串分支,不是单独标签、复杂HTML代码、#id,而是选择器表达式
        //直接调用sizzle去找
            return ( context || rootjQuery ).find( selector );
        }

        else{
            return this.constructor( context ).find( selector );
        }

    }
    //如果传入 $(function)
    else if ( jQuery.isFunction( selector ) ){
        return rootjQuery.ready( selector );
        //如果selector是函数,则认为绑定ready时间,
        //$(function)是$(document).ready(function)的缩写
    }
    if( selector.selector !== undefined){
        this.selector = selector.selector;
        this.context = selector.context;
    }
    return jQuery.makeArray( selector, this );

}

lapsec
756 声望25 粉丝

引用和评论

0 条评论