jquery 源码分析七

     这篇主要是分析Sizzle引擎中最关键的一个函数Sizzle，这个函数接受四个参数selector,context,results,seed，这四个参数的意义分别是选择器，上下文环境，保存结果数组，还有一个未知。。

     由于这个函数里面涉及了许多相关函数，所以先对主函数进行分析，并只是列出相关函数的作用。相关函数的分析会放在文章末尾。接下来先看主函数：

function Sizzle( selector, context, results, seed ) {
    var match, elem, m, nodeType,
        i, groups, old, nid, newContext, newSelector;
        //各种常量定义
    //设置合理的root节点，在网页中为document
    if ( ( context ? context.ownerDocument || context : preferredDoc ) !== document ) {
        setDocument( context );
    }
    //确定上下文环境和结果数组
    context = context || document;
    results = results || [];
    //如果无selector或者selector不为字符串，则直接返回results
    if ( !selector || typeof selector !== "string" ) {
        return results;
    }
    //如果上下文环境的节点不是element或者document的话，就直接返回 空数组
    if ( (nodeType = context.nodeType) !== 1 && nodeType !== 9 ) {
        return [];
    }

    //documentIsHTML 用于确定工作环境是否是html
    if ( documentIsHTML && !seed ) {

        // rquickExpr = /^(?:#([w-]+)|(w+)|.([w-]+))$/
        // 用于快速的检测是否是单一的ID,CLASS或TAG选择符
        if ( (match = rquickExpr.exec( selector )) ) {
            // ID选择
            if ( (m = match[1]) ) {
                if ( nodeType === 9 ) {
                    elem = context.getElementById( m );
                    // 检测是否有parentNode存在，有些浏览器会返回已经被删除了的节点
                    if ( elem && elem.parentNode ) {
                        // 处理在IE, Opera, 和Webkit 会返回name等于 m 的元素
                        if ( elem.id === m ) {
                            results.push( elem );
                            return results;
                        }
                    } else {
                        return results;
                    }
                } else {
                    // 如果context不是document的话，要检测context对elem的包含情况。
                    if ( context.ownerDocument && (elem = context.ownerDocument.getElementById( m )) &&
                        contains( context, elem ) && elem.id === m ) {
                        results.push( elem );
                        return results;
                    }
                }

            // TAG选择
            } else if ( match[2] ) {
                push.apply( results, context.getElementsByTagName( selector ) );
                return results;

            // CLASS选择
            } else if ( (m = match[3]) && support.getElementsByClassName && context.getElementsByClassName ) {
                push.apply( results, context.getElementsByClassName( m ) );
                return results;
            }
        }

        // querySelectorAll,处理复杂的选择
        // rbuggyQSA用于检测querySelectAll的怪异特性
        if ( support.qsa && (!rbuggyQSA || !rbuggyQSA.test( selector )) ) {
            //expando是sizzle中唯一特征码
            nid = old = expando;
            newContext = context;
            newSelector = nodeType === 9 && selector;

            
            // querySelectorAll在element为根元素时行为很奇怪
            // 我们可以给根元素一个特定的ID值
            // 这样在selector最前面加上ID，就可以做到很好的筛选
            // IE8中不支持在对象元素上用
            if ( nodeType === 1 && context.nodeName.toLowerCase() !== "object" ) {
                //tokenize的作用是将selector中的筛选符分割开来并放到相应数组中
                //例：tokenize('div#a')
                // --->[[
                //      {matches:{0:div,index:0,input:'div#a'},
                //       type:'TAG',
                //       value:'div'},
                //       {matches:{0:a,index:0,input:'div#a'},
                //       type:'ID',
                //       value:'#a'}
                //      ]]
                groups = tokenize( selector );

                //如果context存在id，那么就是用原来的id，否则就用expando
                if ( (old = context.getAttribute("id")) ) {
                    nid = old.replace( rescape, "\$&" );
                } else {
                    context.setAttribute( "id", nid );
                }
                nid = "[id='" + nid + "'] ";

                //将所有的选择符拼接
                i = groups.length;
                while ( i-- ) {
                    groups[i] = nid + toSelector( groups[i] );
                }
                //探测是否有a+div或者[class~='abc']类似的情况，rsibling = /[+~]/
                newContext = rsibling.test( selector ) && testContext( context.parentNode ) || context;
                newSelector = groups.join(",");
            }
            //newSelector存在的话
            if ( newSelector ) {
                try {
                    //直接在context下用querySelectorAll，并将结果压入数组
                    push.apply( results,
                        newContext.querySelectorAll( newSelector )
                    );
                    return results;
                } catch(qsaError) {
                } finally {
                    //最后删除添加的id
                    if ( !old ) {
                        context.removeAttribute("id");
                    }
                }
            }
        }
    }

    // 其它情况都用select，这个函数以后分析
    return select( selector.replace( rtrim, "$1" ), context, results, seed );
}

接下来就是对里面那些相关函数的分析，这里面的涉及到的函数或变量主要有：setDocument，documentIsHTML，contains，toSelector，testContext，rbuggyQSA，tokenize

rbuggyQSA，tokenize,setDocument因为太绕(我连开5,6个jquery一起读了，然后再用chrome来追踪才读出来的，泪奔。。。)，所以这次先不讲了。

首先是documentIsHTML，废话不多说，直接上代码：

documentIsHTML = !isXML( doc );

isXML = Sizzle.isXML = function( elem ) {
    // 首先是确定根元素是否有documentElement
    // 然后是确定documentElement节点名字是不是HTML
    var documentElement = elem && (elem.ownerDocument || elem).documentElement;
    return documentElement ? documentElement.nodeName !== "HTML" : false;
};

然后是contains，contains是在setDocument中定义的，因为contains是Sizzle中的全局变量，所以就可以到处用了。

    // rnative = /^[^{]+{s*[native w/用于检测是否有原生函数
    // docElem = 根元素.documentElement
    // hasCompare = rnative.test( docElem.compareDocumentPosition );
    contains = hasCompare || rnative.test( docElem.contains ) ?
        //首先是有compareDocumentPosition或者contains的情况
        function( a, b ) {
            var adown = a.nodeType === 9 ? a.documentElement : a,
                bup = b && b.parentNode;
            //先判断是否a直接包含b.parentNode
            //否则，在确定bup后，先尝试用contains
            //再用compareDocumentPosition
            //compareDocumentPosition返回16表示a包含bup
            //故要用&16将其转化为0或非0数字
            return a === bup || !!( bup && bup.nodeType === 1 && (
                adown.contains ?
                    adown.contains( bup ) :
                    a.compareDocumentPosition && a.compareDocumentPosition( bup ) & 16
            ));
        } :
        //b循环向上取parent，若与a相同，则返回true
        function( a, b ) {
            if ( b ) {
                while ( (b = b.parentNode) ) {
                    if ( b === a ) {
                        return true;
                    }
                }
            }
            //循环不到，就返回false
            return false;
        };

然后是toSelector：

//循环，将每个对象下的value值合并到selector
function toSelector( tokens ) {
    var i = 0,
        len = tokens.length,
        selector = "";
    for ( ; i < len; i++ ) {
        selector += tokens[i].value;
    }
    return selector;
}

对于selector有空格的情况，toknize函数解析的时候会将空格也独立解析成一项，所以在这边合并时空格仍旧会出现，不会被丢弃。

最后是testContext，检测context是否为空，并且context下是否有getElementsByTagName方法，代码如下：

function testContext( context ) {
    return context && typeof context.getElementsByTagName !== strundefined && context;
}

呼，搞定~