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。