Sizzle一步步实现所有功能（一）

前提：

1.HTML5自带querySelectAll可以完全替代Sizlle,所以我们下面写的Sizzle，是不考虑QSA的。

2.作者考虑了大量兼容情况，比如黑莓4.6系统这样几乎接触不到的bug。这样学习价值不高却很费时间问题我不去考虑。主要考虑IE8，这也是Sizzle没被淘汰的最主要原因。

3.我喜欢采用var 声明每个变量，而不是一个var 声明好多变量。原因是我在一步步完善模仿的Sizzle，会有大量的修改。

4.Sizzle的原理实际很简单，真的就可以这样一句话遍历页面所有元素，对每个元素进行排除，符合的则插入到结果数组。但功能繁多，层级繁杂，难点是架构。

5.这是一篇超长的文章。

第一步：实现Sizzle('#ID),Sizzle("TAG"),Sizzle(".CLASS")

 1 (function( window ){
 2     
 3 var arr = [];
 4 var select ;
 5 var push = arr.push;
 6 // http://www.w3.org/TR/css3-selectors/#whitespace
 7 // 各种空白待穿正则字符串
 8 var whitespace = "[\x20\t\r\n\f]";
 9 // 带空格选择器正则，记忆无空格选择器
10 var rtrim = new RegExp( "^" + whitespace + "+|((?:^|[^\\])(?:\\.)*)" + whitespace + "+$", "g" );
11 // 快速选择器正则 ID 或者 TAG(包括*) 或者 CLASS 选择器
12 var rquickExpr = /^(?:#([w-]+)|(w+|*)|.([w-]+))$/;
13 
14 // 浏览器代码正则
15 var rnative = /^[^{]+{s*[native w/;30 // 入口
31 function Sizzle( selector ){
32     // 清除空格
33     selector = selector.replace( rtrim, "$1" )
34     var results = [];
35     var match;
36     var matcher;
37     var elem;
38     var m;
39     var context = document;
40     
41     // 是否为最简选择器
42     if( match = rquickExpr.exec( selector )){
43         // Sizzle('#ID)
44         if ( (m = match[1]) ) {
45             elem = context.getElementById( m );
46             if( elem ){
47                 results.push( elem );
48             }
49             return results;
50             
51         // Sizzle("TAG")
52         }else if( (m = match[2]) ){
53             push.apply( results, context.getElementsByTagName( selector ) );
54             return results;
55         
56         // Sizzle(".CLASS")    
57         }else if( (m = match[3]) ){
58             // 支持getElementsByClassName
59             if( support.getElementsByClassName ){
60                 push.apply( results, context.getElementsByClassName( m ) );
61                 return results;
62                 
63             // 不支持getElementsByClassName
64             }else {
65                 // 获取遍历所有元素
66                 // 如果元素类名与我们选择器匹配的类名相同，则插入到结果数组中
67                 var elems = document.getElementsByTagName('*');
68                 var pattern = new RegExp(selector.slice(1));
69                 for(var i = 0; i<elems.length; i++) {
70                     if(pattern.test(elems[i].className)){
71                         results.push(elems[i])
72                     }
73                 }
74             }
75         }
76     }
77     return results;
78 }
79 // 版本支持变量的对外访问入口
80 var support = Sizzle.support = {};
81 
82 // 判断是否支持getElementsByClassName
83 // 支持: IE<9
84 support.getElementsByClassName = rnative.test( document.getElementsByClassName );
85 
86 // 对外入口
87 window.MSizzle = Sizzle;
88 
89 })(window)
90 console.log(MSizzle("#id"))
91 console.log(MSizzle(".class"))
92 console.log(MSizzle("div"))

1.rquickExpr.exec( selector )返回一个数组，exec方法返回一个数组，第0项是匹配的内容，第1项是第一个括号中记忆的内容，第2项是第一个括号中记忆的内容，依次类推。

console.log(/(1)|(2)|(3)/.exec('1')); //[ "1", "1", undefined, undefined ] 
console.log(/(1)|(2)|(3)/.exec('2')); //[ "2", undefined, "2", undefined ] 
console.log(/(1)|(2)|(3)/.exec('3')); //[ "3", undefined, undefined, "3" ]

2.判断浏览器是否支持某段代码的正则rnative = /^[^{]+{s*[native w/