Sizzle一步步实现所有功能（层级选择）

第二步：实现Sizzle("el,el,el..."),Sizzle("el > el"),Sizzle("el el"),Sizzle("el + el"),Sizzle("el ~ el")

(function( window ){
      
var arr = [];
var select ;
var Expr;
var push = arr.push;
// http://www.w3.org/TR/css3-selectors/#whitespace
// 各种空白待穿正则字符串
var whitespace = "[\x20\t\r\n\f]";
// 带空格选择器正则，记忆无空格选择器
// http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier
var    identifier = "(?:\\.|[\w-]|[^\x00-\xa0])+";
// 属性选择器: http://www.w3.org/TR/selectors/#attribute-selectors
var    attributes = "\[" + whitespace + "*(" + identifier + ")(?:" + whitespace +
        // Operator (capture 2)
        "*([*^$|!~]?=)" + whitespace +
        // "Attribute values must be CSS identifiers [capture 5] or strings [capture 3 or capture 4]"
        "*(?:'((?:\\.|[^\\'])*)'|"((?:\\.|[^\\"])*)"|(" + identifier + "))|)" + whitespace +
        "*\]";
var rtrim = new RegExp( "^" + whitespace + "+|((?:^|[^\\])(?:\\.)*)" + whitespace + "+$", "g" );
// 快速选择器正则 ID 或者 TAG(包括*) 或者 CLASS 选择器
var rquickExpr = /^(?:#([w-]+)|(w+|*)|.([w-]+))$/;
// 连接符号
var rcomma = new RegExp( "^" + whitespace + "*," + whitespace + "*" );
// 层级符号正则'>',' ','+','~'
var rcombinators = new RegExp( "^" + whitespace + "*([>+~]|" + whitespace + ")" + whitespace + "*" );
var matchExpr = {
        "ID": new RegExp( "^#(" + identifier + ")" ),
        "CLASS": new RegExp( "^\.(" + identifier + ")" ),
        "TAG": new RegExp( "^(" + identifier + "|[*])" ),
};
// 浏览器代码正则
var rnative = /^[^{]+{s*[native w/;
// token缓存
var tokenCache = createCache();
// 编译缓存
var compilerCache = createCache();
// 入口
function Sizzle( selector ){
    // 清除空格
    selector = selector.replace( rtrim, "$1" )
    var results = [];
    var match;
    var matcher;
    var elem;
    var m;
    var context = document;
    
    // 是否为最简选择器
    if( match = rquickExpr.exec( selector )){
        // Sizzle('#ID)
        if ( (m = match[1]) ) {
            elem = context.getElementById( m );
            if( elem ){
                results.push( elem );
            }
            return results;
            
        // Sizzle("TAG")
        }else if( (m = match[2]) ){
            push.apply( results, context.getElementsByTagName( selector ) );
            return results;
        
        // Sizzle(".CLASS")    
        }else if( (m = match[3]) ){
            // 支持getElementsByClassName
            if( support.getElementsByClassName ){
                push.apply( results, context.getElementsByClassName( m ) );
                return results;
            }
        }
    }
    // 复杂选择调到select
    return select( selector, context, results);
}
// 创建缓存函数
function createCache() {
    var keys = [];

    function cache( key, value ) {
        // Use (key + " ") to avoid collision with native prototype properties (see Issue #157)
        if ( keys.push( key + " " ) > 10 ) {
            // Only keep the most recent entries
            delete cache[ keys.shift() ];
        }
        return (cache[ key + " " ] = value);
    }
    return cache;
}
// 错误函数
Sizzle.error = function( msg ) {
    throw new Error( "Syntax error, unrecognized expression: " + msg );
};
// 版本支持变量的对外访问入口
var support = Sizzle.support = {};

// 判断是否支持getElementsByClassName
// 支持: IE<9
support.getElementsByClassName = rnative.test( document.getElementsByClassName );
// 表达式对象
// 存放各类相对位置，各种查询函数，各种过滤函数等。
Expr = {
    relative: {
        ">": { dir: "parentNode", first: true },
        " ": { dir: "parentNode" },
        "+": { dir: "previousSibling", first: true },
        "~": { dir: "previousSibling" }
    },
    filter: {
        "TAG": function( nodeNameSelector ) {
            var nodeName = nodeNameSelector.toLowerCase();
            return nodeNameSelector === "*" ?
                function() { return true; } :
                function( elem ) {
                    return elem.nodeName.toLowerCase() === nodeName;
                };
        },
        "CLASS": function( className ) {
            var className = className.toLowerCase();
            return function( elem ) {
                    return elem.className.toLowerCase() === className;
            };
        }
    },
    find: {
        "TAG": function( tag, context ) {
            return context.getElementsByTagName( tag );
        },
        "CLASS": support.getElementsByClassName&&function( tag, context ) {
            return context.getElementsByClassName( tag );
        },
    },
}
// tokenize函数
// 将选择器字符串转化为方便使用的数组对象形式
tokenize = Sizzle.tokenize = function( selector, parseOnly ) {
    var cached = tokenCache[ selector + " " ];
    
    // cached.slice生成新的数组，对其修改不会修改其引用缓存
    if ( cached ) {
        return cached.slice( 0 );
    }
    // 循环条件
    var soFar = selector;
    // 结果数组
    var groups = [];
    // 匹配参数
    var matched;
    // 一个独立的tokens
    var tokens;
    // 辅助变量
    var match;

    while ( soFar ) {

        //首次默认创建一个tokens
        //之后每碰到一个逗号新增一个新的tokens
        if ( !matched || (match = rcomma.exec( soFar )) ) {
            if ( match ) {
                // Don't consume trailing commas as valid
                soFar = soFar.slice( match[0].length ) || soFar;
            }
            groups.push( (tokens = []) );
        }
        
        matched = false;

        // 关系token
        if ( (match = rcombinators.exec( soFar )) ) {
            matched = match.shift();
            tokens.push({
                value: matched,
                // Cast descendant combinators to space
                type: match[0].replace( rtrim, " " )
            });
            soFar = soFar.slice( matched.length );
        }

        // TAG，CLASS，ID token
        for ( type in Expr.filter ) {
            if ( match = matchExpr[ type ].exec( soFar ) ) {
                matched = match.shift();
                tokens.push({
                    value: matched,
                    type: type,
                    matches: match
                });
                soFar = soFar.slice( matched.length );
            }
        }
        // 一次循环到这里三个条件都不符合没有匹配结果时，跳出。
        if ( !matched ) {
            break;
        }
    }

    // 意外跳出，soFar存在，报错。
    return soFar ?
            Sizzle.error( selector ) :
            // 缓存后转成新数组返回（预防修改缓存内容）
            tokenCache( selector, groups ).slice( 0 );
};
// 将tokens转化为selector字符串形式。
function toSelector( tokens ) {
    var i = 0,
        len = tokens.length,
        selector = "";
    for ( ; i < len; i++ ) {
        selector += tokens[i].value;
    }
    return selector;
}
// !addCombinator
// 增加关系处理函数
// 返回关系函数，主要功能是，遍历种子节点的关系节点。
// 比如li>a,传入无数个种子节点a，a.parentNode，再执行matcher,matcher里再判断这个父亲节点是不是li
function addCombinator( matcher, combinator ) {
    var dir = combinator.dir;
    return combinator.first ?
        function( elem, context ) {
            while( (elem = elem[ dir ]) ){
                if ( elem.nodeType === 1 ) {
                    return matcher( elem, context );
                }
            }
        }:
        function( elem, context ) {
            while ( (elem = elem[ dir ]) ) {
                if ( elem.nodeType === 1 ) {
                    if(matcher( elem, context )) {
                        return true;
                    }
                }
            }
            return false; 
        }
}

// !elementMatcher
// 生成matchers遍历器
// matchers数组存放我要过滤的函数，这个函数遍历所有过滤函数，一个不符合就返回false。
function elementMatcher( matchers ) {
    return function( elem, context ) {
        var i = matchers.length;
        while ( i-- ) {
            if ( !matchers[i]( elem, context ) ) {
                return false;
            }
        }
        return true;
    };
}
// !matcherFromTokens
// 根据tokens,生成过滤一组函数matchers，供elementMatcher使用
// 返回的是一个执行所有过滤函数的函数
function matcherFromTokens( tokens ){
    var matchers = [];
    var matcher;
    var i = 0;
    var len = tokens.length;
    for ( ; i < len; i++ ) {
        if ( (matcher = Expr.relative[ tokens[i].type ]) ) {
            matchers = [ addCombinator(elementMatcher( matchers ), matcher) ];
        } else {
            matcher = Expr.filter[ tokens[i].type ].apply( null, tokens[i].matches );
            matchers.push( matcher );
        }
    }
    return elementMatcher( matchers );
}
// !matcherFromGroupMatchers
// 返回超级匹配器，
function matcherFromGroupMatchers( elementMatchers ){
    // !!最重要superMatcher，也是最核心的函数，其它的函数为它服务。
    // 获取种子元素，遍历所有种子元素。
    // 遍历elementMatchers
    // 符合的推入结果数组
    // 一个选择器（逗号隔开的）生成一个elementMatcher，elementMatchers是存放所有elementMatcher的数组
    var superMatcher = function( seed, context, results) {
        var elems = seed || Expr.find["TAG"]( "*", document );
        var len = elems.length;
        var i = 0;
        for ( ; i !== len && (elem = elems[i]) != null; i++ ) {
            j = 0;
            while ( (matcher = elementMatchers[j++]) ) {
                if ( matcher( elem, context) ) {
                    results.push( elem );
                    break;
                }
            }
        }
    }
    return superMatcher;
}
// compile
// 最初的编译器，存放elementMatchers，缓存超级匹配函数并返回
compile = Sizzle.compile = function( selector, match ) {
    var i;
    var elementMatchers = [];
    var    cached = compilerCache[ selector + " "];
    if ( !cached ) {
        i = match.length;
        while ( i-- ) {
            elementMatchers.push( matcherFromTokens( match[i] ) );
        }
        cached = compilerCache( selector, matcherFromGroupMatchers( elementMatchers ));
    }
    return cached;
}
// select
// 兼容的自写的选择器
select = Sizzle.select = function( selector, context, results){
    var token;
    var seed;
    var tokens;
    var find;
    var match = tokenize( selector )
    if ( match.length === 1 ) {
        // tokens
        var tokens = match[0].slice( 0 );
        // 如果tokens的首项是ID，将其设置为上下文
        if ( (token = tokens[0]).type === 'ID' ){    
            context = document.getElementById(token.matches[0]);
            selector = selector.slice( tokens.shift().value.length );
        }
        // 生成种子seed
        // 如"div ul li"，所谓种子就是所有的li
        // 后面编译函数需要过滤出符合祖先是ul，ul的祖先是div的节点
        i = tokens.length;
        while ( i-- ){
            token = tokens[i];
            if ( Expr.relative[ (type = token.type) ] ) {
                break;
            }
            if((find =  Expr.find[ type ]))
                if( seed = find( token.matches[0],context ) ) {
                    tokens.splice( i, 1 );
                    selector = toSelector( tokens )
                    break;
                }
        } 
    };
    // 根据selector,match生成superMatcher并调用
    compile( selector, match )( seed, context, results );
    return results;
}

// 对外入口
window.MSizzle = Sizzle;

})(window)
// 测试
console.log(MSizzle("ul.topnav > li"))
console.log(MSizzle("ul.topnav   li"))
console.log(MSizzle("ul.topnav + div"))
console.log(MSizzle("ul.topnav ~ div"))

 1.先来整体流程，首先select生成种子seed，然后执行complie编译出超级匹配函数。在complie中，调用matchFromTokens生成每个tokens的匹配函数，如ul>li,div，会生成两个匹配函数，然后存入到elmentMatchers数组。然后，在matchFromTokens，根据tokens，返回匹配函数，elmentMatcher函数，和addCompinator是其辅助函数。然后回到complie中，缓存matcherFromGroupMatchers函数的结果并返回。在matcherFromGroupMatchers的返回superMatcher 函数中，遍历所有种子元素（不存在时的种子元素就是所有节点），利用elmentMatchers数组的匹配函数匹配。符合推入到结果数组中。跳回最初的complie返回的超级匹配函数，传入参数运行。

2.matchFromTokens如何工作。假如我们有tokens,[{type:'CLASS',value:"f"}，{type:'CLASS',value:"box"}]，seed是一群div节点，我们只要根据tokens生成两个函数，一个matchers数组中，一个函数是当当前节点的className是f时返回true，一个函数是当当前节点的className是box时返回true。外包一个函数elmentMatcher，参数是待匹配节点，执行数组matchers的所有的函数，但凡有一个不匹配直接返回false。

再假设tokens[{type:'TAG',value:'ul'},{type:'>',value:' > '}]，seed是一群li节点。这种情况我们需要过滤li的父亲节点是否是ul。这个找到父亲节点的函数就是addCompinator。

3.matcherFromGroupMatchers工作。他是返回一个最终核心匹配函数，这个函数遍历所有节点，每个节点，执行返回elmentMatcher函数，如果返回为true，则存入到结果数组中。由于选择器一般也会包括几个独立的选择器，如ul，div，就是两个elmentMatcher函数存在elmentMatchers，所以还要遍历执行每一个elmentMatcher。