jQuery-1.9.1源码分析系列（三） Sizzle选择器引擎——编译原理续（伪类选择器“PSEUDO”和子伪类选择器"CHILD"原子选择器详解)

　　我们知道Sizzle支持的伪类有有很多，为了便于处理被Sizzle分成了两类：单个单词的伪类“PSEUDO”和多个词语使用“-”链接的“CHILD”。我们下面一一分析。

 

　　先看"PSEUDO":

a. Sizzle的伪类选择器"PSEUDO"

 

　　我们先整体看一下有哪些个伪类

　　

　　伪类生成匹配器的源码如下：

matcher = Expr.filter[ tokens[i].type ].apply( null, tokens[i].matches );

　　此时tokens[i].type = “PSEUDO”，所以生成伪类匹配器函数是Expr.filter["PSEUDO"]函数

                "PSEUDO": function( pseudo, argument ) {
                    // 伪类名称大小写不敏感
                    // 优先Expr.pseudos找到伪类对应的位置伪类函数，不行的话将伪类名称转换成小写形式使用Expr.setFilters
                    // 记住setFilters继承至Expr.pseudos
                    var args,
                        fn = Expr.pseudos[ pseudo ] || Expr.setFilters[ pseudo.toLowerCase() ] ||
                        Sizzle.error( "unsupported pseudo: " + pseudo );

                    // 用户也许使用createPseudo来表明参数需要创建过滤函数
                    // 类似Sizzle的做法
                    if ( fn[ expando ] ) {
                        return fn( argument );
                    }

                    //但是，保持老的签名支持（兼容老版本）
                    if ( fn.length > 1 ) {
                        args = [ pseudo, pseudo, "", argument ];
                        return Expr.setFilters.hasOwnProperty( pseudo.toLowerCase() ) ?
                        markFunction(function( seed, matches ) {
                            var idx,
                                matched = fn( seed, argument ),
                                i = matched.length;
                            while ( i-- ) {
                                idx = indexOf.call( seed, matched[i] );
                                seed[ idx ] = !( matches[ idx ] = matched[i] );
                            }
                        }) :
                        function( elem ) {
                            return fn( elem, 0, args );
                        };
                    }

                    return fn;
                }

 

　　Sizzle在处理这一系列的伪类过程中将这些处理分为几个组来处理（分组方案使得每组都有相同点能使用共同代码，节约代码量，值得学习）。

　　第一组，将那些易于判断节点是否匹配的伪类放在一组,这一组包括的伪类有"target"/"root"/"focus"/"enabled"/"disabled"/"checked"/"selected"/"empty"/ "parent"/"header"/"input"/"button"/"text"，这类原子匹配器在Expr.filter["PSEUDO"]中的处理简化如下

//pseudo表示伪类选择器，比如"target"

fn = Expr.pseudos[ pseudo ] || Expr.setFilters[ pseudo.toLowerCase() ] || Sizzle.error( "unsupported pseudo: " + pseudo );
...
return fn;

　　Expr.pseudos[ pseudo ]即是对应的原子匹配器。。

　　看一个例子“target”，target选择器用于匹配id属性值等于当前文档URI的锚点名称的元素。如果当前文档的URI为http://www.365mini.com/#top，则:target选择器匹配id="top"的元素。

　　Expr.pseudos["target"]的源码如下

                "target": function( elem ) {
                    var hash = window.location && window.location.hash;
                    return hash && hash.slice( 1 ) === elem.id;
                }

　　剔除掉第一组伪类后剩余的伪类如下图

　　

 

　　第二组，伪类带有一个参数非位置伪类，这类伪类有"contains"/"has"/"not"/"lang"。比如“:not(.chua)”。这类原子匹配器在Expr.filter["PSEUDO"]中的处理为

fn = Expr.pseudos[ pseudo ] || Expr.setFilters[ pseudo.toLowerCase() ] || Sizzle.error( "unsupported pseudo: " + pseudo );

// 例如Expr.pseudo["not"]使用markFunction将fn[expando]标记为true
// 类似Sizzle的做法
if ( fn[ expando ] ) {
　　return fn( argument );
}

　　　以"not"为例，Expr.pseudo["not"]源码如下

pseudos: {
    // Potentially complex pseudos
    "not": markFunction(function( selector ) {
        // selector参数需要去除前后的空白，避免被识别为关系选择器
        // 先生成selector的匹配器放在matcher中
        var input = [],
            results = [],
            matcher = compile( selector.replace( rtrim, "$1" ) );

        return matcher[ expando ] ?
        //如果selector中有伪类,返回的函数是伪类分割器方式返回的匹配器，
        //其中matches对应着results
        markFunction(function( seed, matches, context, xml ) {
            //先把种子seed中能匹配matcher的元素存在unmatched备用
            var elem,
                unmatched = matcher( seed, null, xml, [] ),
                i = seed.length;

                // 将unmatched里面的元素取出来存在matches并同步seed
                while ( i-- ) {
                    if ( (elem = unmatched[i]) ) {
                        seed[i] = !(matches[i] = elem);
                    }
                }
            }) :
        //selector中没有伪类
        function( elem, context, xml ) {
            input[0] = elem;
            matcher( input, null, xml, results );
            return !results.pop();
        };
    })

　　":not(selector)"处理比正常的情况复杂一些，多了一种当selector中包含伪类的特殊处理（当selector没有伪类的时候返回的匹配器和正常情况没有太多区别）。在selector有伪类的时候按照伪类的方式来处理，返回的匹配器有四个参数是function( seed, results, context, xml ) ，匹配结果保存在第二个参数results中。　　

　　继续剔除掉第二组伪类后剩余的伪类如下图

　　

 

　　第三组，位置伪类，这一组包括"first"/"last"/"eq"/"even"/"odd"/"lt"/"gt"，其中:eq(index)、:gt(index)、:lt(index)这三个伪类需要一个index参数。

这类原子匹配器在Expr.filter["PSEUDO"]中的处理为

"PSEUDO": function( pseudo, argument ) {
　　...
　　fn = Expr.pseudos[ pseudo ] || Expr.setFilters[ pseudo.toLowerCase() ] || Sizzle.error( "unsupported pseudo: " + pseudo ); 
　　// 例如Expr.pseudo["not"]使用markFunction将fn[expando]标记为true 　　// 类似Sizzle的做法 　　if ( fn[ expando ] ) { 　　　　return fn( argument ); 　　}
　　...
}

　　根据伪类匹配器生成的方法（在matcherFromTokens函数中）

matcher = Expr.filter[ tokens[i].type ].apply( null, tokens[i].matches )

　　Expr.filter["PSEUDO"]的参数( pseudo, argument )和tokens[i].matches对应。

　　我们看一下Expr.pseudo["eq"]的方法源码：

pseudos: {
    "eq": createPositionalPseudo(function( matchIndexes, length, argument ) {
        return [ argument < 0 ? argument + length : argument ];
    })
    ...
}

// 返回一个函数给位置伪类使用
function createPositionalPseudo( fn ) {
    return markFunction(function( argument ) {
        argument = +argument;
　　　　 //标记匹配器为类似伪类分隔器生成的匹配器（这类匹配器都有四个参数( seed, results, context, xml )） return markFunction(function( seed, matches ) {
            var j,
            matchIndexes = fn( [], seed.length, argument ),
            i = matchIndexes.length;

            // 匹配指定下标的元素
            while ( i-- ) {
                if ( seed[ (j = matchIndexes[i]) ] ) {
                    seed[j] = !(matches[j] = seed[j]);
                }
            }
        });
    });
}

　　以“eq(0)”为例,Expr.filter["PSEUDO"]的参数( pseudo = "eq", argument = 0 )【tokens[i].matches = ["eq","0"]】。那么对应着Expr.pseudo["eq"]的参数为(argument = 0)，即createPositionalPseudo中argument = 0。最终使用markFunction将匹配器标记为类似伪类分隔器生成的匹配器（这类匹配器都有四个参数( seed, results, context, xml )）。

 

　　继续剔除第三组后剩下的伪类如下图

　　

　　剩下的所有的为第四组伪类，他们针对input标签做匹配。他们是有以下的代码生成的

        // Add button/input type pseudos
        for ( i in { radio: true, checkbox: true, file: true, password: true, image: true } ) {
            Expr.pseudos[ i ] = createInputPseudo( i );
        }
        for ( i in { submit: true, reset: true } ) {
            Expr.pseudos[ i ] = createButtonPseudo( i );
        }

        // Returns a function to use in pseudos for input types
        function createInputPseudo( type ) {
            return function( elem ) {
                var name = elem.nodeName.toLowerCase();
                return name === "input" && elem.type === type;
            };
        }

        // Returns a function to use in pseudos for buttons
        function createButtonPseudo( type ) {
            return function( elem ) {
                var name = elem.nodeName.toLowerCase();
                return (name === "input" || name === "button") && elem.type === type;
            };
        }

　　这些个伪类比较简单，不再详解。当然应为Sizzle被jQuery内置，jQuery本身还拓展了部分这样的伪类，比如：visible/hidden/animated

 

b. Sizzle伪类选择器中的子伪类选择器“CHILD”

　　在词法分析的时候就提到过有三种比较特别的词语ATTR/CHILD/PSEUDO，他们在词法分析完成以后还需要做一下额外的工作修饰他们的matches字段。这里主要讲CHILD。

　　以":nth-of-type(2)"为例，词法分析中先通过正则使用exec方法得到的结果如下

　　RegExpObj.exec(":nth-of-type(2)"):  [":nth-of-type(2)", "nth", "of-type", "2", "", undefined, undefined, "", "2"]

　　使用preFilters修正后结果为

　　match = preFilters["CHILD"]( match ): [":nth-of-type(2)", "nth", "of-type", "2", 0, 2, undefined, "", "2"]

　　最终这个CSS选择器词法分析完成后结果为

//CSS选择器":nth-of-type(2)"词法解析结果tokens
tokens = [{
　　matches: ["nth","of-type","2",0,2,undefined,"","2"],
　　type: "CHILD",
　　value: ":nth-of-type(2)"
}]

　　同先前的只有一个单词的伪类选择器一样，“CHILD”方式获取匹配器的方法如下（在matcherFromTokens函数中）

matcher = Expr.filter[ tokens[i].type ].apply( null, tokens[i].matches )

　　Expr.filter["CHILD"]的参数（type, what, argument, first, last）和tokens[i].matches对应。以":nth-of-type(2)"为例，则为（type ="nth", what = "of-type", argument = "2", first = 0, last = 2）

　　好了，有这个认识就行。在讲解源码之前我们来看一下"CHILD"伪类对应的都有哪些

• :first-child
• :last-child
• :only-child
• :first-of-type
• :last-of-type
• :only-of-type
• :nth-child(n)
• :nth-last-child(n)
• :nth-of-type(n)
• :nth-last-of-type(n)

　　前面几个没有参数n为简单子伪类选择器，后面几个为复杂子伪类选择器。所以处理的时候也是分成两组来处理的。

 

　　在编译生成匹配器的阶段，子匹配器（“CHILD”）对几个重要的状态进行了初始化，以备执行匹配的时候使用

　　var simple = type.slice( 0, 3 ) !== "nth",//简单子选择器（以非nth开头的6个选择器）？
　　　　forward = type.slice( -4 ) !== "last",//向前查找（以非last开头的选择器都是循环查找nextSibling来处理的，唯有以last开头的选择器是使用previousSibling来处理？
　　　　ofType = what === "of-type";//*-of-type？

选择器	simple	forward	ofType
first-child【type为"first",what为"child"】	true	true	false
last-child【type为"last",what为"child"】	true	false	false
only-child【type为"only",what为"child"】	true	true	false
first-of-type【type为"first",what为"of-type"】	true	true	false
last-of-type【type为"last",what为"of-type"】	true	false	true
only-of-type【type为"only",what为"of-type"】	true	true	true
nth-child(n)【type为"nth",what为"child"】	false	true	false
nth-last-child(n)【type为"nth-last",what为"child"】	false	false	false
nth-of-type(n)【type为"nth",what为"of-type"】	false	true	true
nth-last-of-type(n)【type为"nth-last",what为"of-type"】	false	false	true

　　

　　在执行阶段，简单子伪类选择器比较简单，比如first-child，dir(dir = simple !== forward ? "nextSibling" : "previousSibling")为"previousSibling"，只要不断比较node = node[ dir ]判断node是否还有"previousSibling"节点，是表示该节点并不是first-child，返回false；否表示该节点就是first-child，返回true。需要特别处理的是only-chlid需要双向比较。源码

                            // :(first|last|only)-(child|of-type)
                            if ( simple ) {
                                while ( dir ) {
                                    node = elem;
                                    while ( (node = node[ dir ]) ) {
                                        if ( ofType ? node.nodeName.toLowerCase() === name : node.nodeType === 1 ) {
                                            return false;
                                        }
                                    }
                                    // Reverse direction for :only-* (if we haven't yet done so)
                                    start = dir = type === "only" && !start && "nextSibling";
                                }
                                return true;
                            }

　　复杂子伪类选择器的处理分成几个分支来处理，结构如下

                            start = [ forward ? parent.firstChild : parent.lastChild ];

                            // non-xml :nth-child(...) 保存缓存数据到其父节点
                            if ( forward && useCache ) {
                                ...// 使用以前缓存元素索引（如果可用的话）
                            } else if ( useCache && (cache = (elem[ expando ] || (elem[ expando ] = {}))[ type ]) && cache[0] === dirruns ) {
                                diff = cache[1];

                                // xml :nth-child(...) 或 :nth-last-child(...) 或 :nth(-last)?-of-type(...)
                            } else {
                                ...
                            }

                            // Incorporate the offset, then check against cycle size
                            diff -= last;
                            return diff === first || ( diff % first === 0 && diff / first >= 0 );

　　具体代码分析了，肚子饿了，回家。。。

　　

 　　如果觉得本文不错，请点击右下方【推荐】！