jQuery源码二周目#11 Sizzle 预编译

经过词法解析之后做什么？
遍历解析好的Token序列去生成一个个匹配器，在Expr.filter中已经提前写好了全部的TAG、ID、CLASS、ATTR、CHILD、PSEUDO、NAME7种匹配器。然后将DOM元素挨个与生成的匹配器匹配，如果所有匹配器都返回true，那该DOM元素就是我们需要的DOM元素。

预编译

其实Sizzle源码的处理和上面说的有些不一样，上面说的是将DOM元素挨个匹配，其实在源码中不是这样的。源码中是遍历Token序列生成对应的元匹配器，然后将多个元匹配器融合成一个超级匹配器，这样就能用一个方法完成匹配。

// 预编译
Sizzle.compile = function(selector, match) {
    var
        i,
        elementMatchers = [],
        cached;

    i = match.length;
    while(i--) {
        cached = matcherFromTokens(match[i]);
        elementMatchers.push(cached);
    }

    return matcherFromGroupMatchers(elementMatchers);
}

这是我简化过的Sizzle.compile()方法，源码中很多的干扰项都被我除掉了。这里面有两个重要的方法：matcherFromTokens和matcherFromGroupMatchers。

matcherFromTokens

生成用于匹配单个选择器群组的函数

function matcherFromTokens(tokens) {
    var
        i,
        token,
        matcher,
        matchers = [];

    for (i = 0; i < tokens.length; i++) {
        token = tokens[i];

        if (matcher = Expr.relative[token.type]) { // 生成层级匹配器
            matchers = [addCombinator(elementMatcher(matchers), matcher)];
        } else {
            // 问题：为什么这里不写成matcher = Expr.filter[token.type](token.matches);
            // 因为ATTR类型的匹配器需要传入三个参数
            matcher = Expr.filter[token.type].apply(null, token.matches);
            matchers.push(matcher);
        }
    }

    return elementMatcher(matchers);
}

像div > p + .aaron[type="checkbox"], #id:first-child这个选择器中有两组tokens，分别将div > p + .aaron[type="checkbox"]和#id:first-child传入matcherFromTokens中进行编译，这也是为什么Sizzle.compile()方法中要使用while循环去遍历match的原因。

编译无非是将token取出来生成元匹配器，然后放入到matchers中，最后通过elementMatcher()方法将所有匹配器整合成一个方法并输出。生成匹配器什么的都很简单啦，因为在Expr.filter中已经写好了，直接拿过来用即可。真正难的是处理层级关系>, +, 空格, ~，Sizzle源码是通过addCombinator()方法去处理的。

还有一个细节就是tokens的遍历方式是从左到右，为什么是这样自己脑内模拟程序执行流程或许就能明白。这东西太过抽象无法用语言描述，只能自行体会。

elementMatcher

这个方法很简单，就是将匹配器集合遍历挨个执行

function elementMatcher( matchers ) {
    return matchers.length > 1 ?

        // 如果是多个匹配器
        function( elem, context, xml ) {
            var i = matchers.length;
            while ( i-- ) {
                if ( !matchers[ i ]( elem, context, xml ) ) {
                    return false;
                }
            }
            return true;
        } :

        // 如果是单个匹配器，返回自己即可
        matchers[ 0 ];
}

注意这里遍历顺序又是从右往左

addCombinator

这个方法也很难去讲解，只有自行调试才能理解

// 层级关系处理器
function addCombinator(matcher, combinator) {
    var dir = combinator.dir;

    return combinator.first ?

        // 紧密型
        function( elem, context, xml ) {
            while ( ( elem = elem[ dir ] ) ) {

                // 加这么一个判断是因为有的时候拿到的是text类型的元素
                if ( elem.nodeType === 1 ) {
                    return matcher( elem, context, xml );
                }
            }
            return false;
        } :

        // 非紧密型一直递归查询，查到最后为null会跳出循环并且返回false
        // 如果递归过程中某一层返回true
        function( elem, context, xml ) {
            while ( ( elem = elem[ dir ] ) ) {
                if ( elem.nodeType === 1 ) {
                    if (matcher(elem, context, xml)) {
                        return true;
                    }
                }
            }
            return false;
        }
}

matcherFromGroupMatchers

这个方法很容易理解，选择器div > p + .aaron[type="checkbox"], #id:first-child会生成两组matcherFromTokens匹配器，将DOM元素分别匹配两个匹配器，只要有一个匹配器返回为true，就将DOM元素保存，最后一起返回。

// 超级匹配器（多组）
// 像div > p + .aaron[type="checkbox"], #id:first-child这种选择器有两组matcherFromTokens匹配器
// 该方法的作用就是将两组matcherFromTokens匹配器合并成一个匹配器
function matcherFromGroupMatchers(elementMatchers) {
    return function (seed, results) {
        var i,
            j,
            elems,      // 种子合集
            elem,       // 种子合集中的单个DOM元素
            matcher;    // matcherFromTokens匹配器

        // 如果没有种子元素则全文检索
        elems = seed || Expr.find["TAG"]("*");

        // 遍历所有元素
        for (i = 0; i < elems.length; i++) {
            j = 0;
            elem = elems[i];

            // 遍历所有matcherFromTokens匹配器
            // 把elems中的元素挨个放入elementMatchers匹配器中
            // 若返回为true，将该元素放入results集合中
            while (matcher = elementMatchers[j++]) {
                if (matcher(elem)) {
                    results.push(elem);
                }
            }
        }
    }
}

最后

Sizzle.select = function(selector) {
    var
        seed,           // 种子集合：类型为ID、TAG、CLASS中任意一种的DOM元素集合
        match,          // 词法解析后的数据
        results = []    // 目标元素
        ;

    // 词法解析
    match = Sizzle.tokenize(selector);

    // 预编译
    var superMatcher = Sizzle.compile(selector, match);
    superMatcher(seed, results);

    return results;
}

总结

整个Sizzle源码学下来，我只学会了如何使用闭包。可能有人觉得只学会了一个东西也太废了，先听我把话说完。我觉得整个Sizzle源码最有价值的部分就是预编译（Sizzle.compile）部分，elementMatcher是预编译里面最重要的方法，说白了它不过就是个while循环，但它和普通while循环不一样的地方是它用闭包的技巧将被循环的对象保存下来，保证后续调用的时候能够取出来。

至于其他的如何词法解析、如何筛选seed合集、匹配器怎么写的都显得不那么重要了。闭包这个概念我也不是第一次见了，以前在书上看到过很多次关于它的讲解，但是我从来都没学会怎么去使用。通过这次的源码学习，我能够亲眼看见别人是如何去玩转闭包这个东西的。果然学习光靠看书是没用的，实践才是检验真理的唯一标准。

在此献上源码
传送门