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")

(function( window ){
    
var arr = [];
var select ;
var push = arr.push;
// http://www.w3.org/TR/css3-selectors/#whitespace
// 各种空白待穿正则字符串
var whitespace = "[\x20\t\r\n\f]";
// 带空格选择器正则，记忆无空格选择器
var rtrim = new RegExp( "^" + whitespace + "+|((?:^|[^\\])(?:\\.)*)" + whitespace + "+$", "g" );
// 快速选择器正则 ID 或者 TAG(包括*) 或者 CLASS 选择器
var rquickExpr = /^(?:#([w-]+)|(w+|*)|.([w-]+))$/;

// 浏览器代码正则
var rnative = /^[^{]+{s*[native w/;30 // 入口
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;
                
            // 不支持getElementsByClassName
            }else {
                // 获取遍历所有元素
                // 如果元素类名与我们选择器匹配的类名相同，则插入到结果数组中
                var elems = document.getElementsByTagName('*');
                var pattern = new RegExp(selector.slice(1));
                for(var i = 0; i<elems.length; i++) {
                    if(pattern.test(elems[i].className)){
                        results.push(elems[i])
                    }
                }
            }
        }
    }
    return results;
}
// 版本支持变量的对外访问入口
var support = Sizzle.support = {};

// 判断是否支持getElementsByClassName
// 支持: IE<9
support.getElementsByClassName = rnative.test( document.getElementsByClassName );

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

})(window)
console.log(MSizzle("#id"))
console.log(MSizzle(".class"))
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/