Sizzle是怎样工作的
作为闻名遐迩的选择器，Sizzle并不是人们所说的从右到左选择那么简单的。本文将揭开其神秘的内幕，让大家看看其令人惊叹的优化。
在此之前，大家必需有一些概念，否则无法勾勒其轮廓。这些概念我在做类似的事，一点点总结出来的。总的来说，有如下几个：种子选择器，候选集，映射集，迭代器，过滤器，切割器，查询次数……
由于CSS选择器的种类是如此繁多，加上jQuery的自定义伪类就更多，因此它们组成的表达式一定要加以拆分，才能工作。我们就拿一个简单的CSS表达式着手吧。
div div.aaa就是我们的小白鼠，大抵它可以拆分为四个部分，标签选择器，后代选择器，标签选择器与类选择器。但Sizzle一开始并没有这样做，请见下面Sizzle的切割器部分
parts = [],
soFar = selector;
//chunker 的正则会用不在双引号单引号之内的后代亲子相邻兄长并联（' ','>','+','~',','）作为切割符，
//从左到右切割表达式，并在第一个并联选择器之时结束。
//比如"li[name=ee]>span.aaa, div span" 会变成parts = ["li[name=ee]",">","span.aaa"], extra = "div span"
do {
chunker.exec( "" );
m = chunker.exec( soFar );
if ( m ) {
soFar = m[3];
parts.push( m[1] );
if ( m[2] ) {//如果是并联选择器,中断
extra = m[3];
break;
}
}
} while ( m );
单从这点，这种切割方法就注定其不可能是单纯的从右到左选择，它可能是从中间到左进行。
接下来有许多分支，分别是对ID与位置伪类进行优化的，我们暂时跳过它们。看其另外几个重要概念，种子选择器与候选集，候选集你也可以称之为种子集，因为sizzle中就有这么一个单词seed。为了获取候选集，我们需要调一个种子选择器Sizzle.find。重要的参数是并联选择器前面的那个子选择器模块，若根据上面的例子，它就是那个"span.aaa"。"span.aaa"的组成部分在标准浏览器下都可以用原生API来获取。除去后来的那两个querySelector,querySelectorAll，HTML文档一共有这么四个API：
- getElementById，上下文只能是HTML文档。
- getElementsByName，上下文只能是HTML文档。
- getElementsByTagName，上下文可以是HTML文档，XML文档及元素节点。
- getElementsByClassName，上下文可以是HTML文档及元素节点。IE8还没有支持。
那我们是先取span还是.aaa，就要视原生API获取元素节点的数量而定，更直白地说，数量越少，后面过滤起来越轻松，John Resig不是傻瓜，肯定在这里做点优化。这个原生选择器的调用顺序被放到一个叫Sizzle.selectors.order的数组中，对于旧一点的浏览器，其顺序为ID,NAME,TAG,对于支持getElementsByClassName的浏览器，其顺序为ID,CLASS,NAME,TAG。种子选择器Sizzle.find会调用相应的正则去切割它，并进行进一步的处理放进原生API中去获取节点。当然不如意的情况还有许多，如碰到选择器群组是"[href='aaa']:target"的情况，我们唯有把文档的所有节点充当获选集了。
Sizzle.find = function( expr, context, isXML ) {
var set;
if ( !expr ) {
return [];
}
for ( var i = 0, l = Expr.order.length; i < l; i++ ) {
var match,type = Expr.order[i];
if ( (match = Expr.leftMatch[ type ].exec( expr )) ) {
var left = match[1];
match.splice( 1, 1 );
if ( left.substr( left.length - 1 ) !== "\\" ) {
match[1] = (match[1] || "").replace(/\\/g, "");
set = Expr.find[ type ]( match, context, isXML );
if ( set != null ) {
expr = expr.replace( Expr.match[ type ], "" );
break;
}
}
}
}
if ( !set ) {
set = context.getElementsByTagName( "*" );
}
return { set: set, expr: expr };
};
经过种子选择器后，原选择器群组可能还留下一点小尾巴，如上面的例子，在FF会留下"span"。这时轮到五大迭代器出场了。在我的体系中，我分别把它们取名为border,borders,father,fathers,current，在Sizzle里具体对应Sizzle.selectors.relative["+"]，Sizzle.selectors.relative["~"]，Sizzle.selectors.relative[">"]，Sizzle.selectors.relative[""]及Sizzle.filter。Sizzle.filter在father与fathers还充当过滤器。我们还是先看current迭代器吧。current迭代器的意思应该很易懂，只对于当前集合的元素进行或过滤或置换处理。
Sizzle.filter = function( expr, set, inplace, not ) {
//set必须是数组，inplace为true时用于其他迭代器，not只用于最简单的反选选择器
var match, anyFound,
old = expr,
result = [],
curLoop = set,
isXMLFilter = set && set[0] && Sizzle.isXML( set[0] );
while ( expr && set.length ) {
for ( var type in Expr.filter ) {
//这里是除关系选择器与并联选择器的其他选择器类型，其中还把位置伪类从伪类中独立出来
//CLASS,ID,TAG,CHILD,ATTR,PSEUDO,POS
if ( (match = Expr.leftMatch[ type ].exec( expr )) != null && match[2] ) {//取得过滤参数
var found, item,
filter = Expr.filter[ type ],//取得过滤函数
left = match[1];
anyFound = false;
match.splice(1,1);
if ( left.substr( left.length - 1 ) === "\\" ) {
continue;
}
if ( curLoop === result ) {
result = [];//这里用于缩小候选集时
}
if ( Expr.preFilter[ type ] ) {
//Expr.preFilter里面的函数都用于进一步加工过滤参数，对于类选择器，出于优化需要，直接进行过滤（它返回false）
match = Expr.preFilter[ type ]( match, curLoop, inplace, result, not, isXMLFilter );
if ( !match ) {//处理CLASS
anyFound = found = true;
} else if ( match === true ) {//处理POS
continue;
}
}
if ( match ) {//处理CLASS、POS之外的类型
for ( var i = 0; (item = curLoop[i]) != null; i++ ) {
if ( item ) {//如果item不为false
found = filter( item, match, i, curLoop );//此值为布尔
var pass = not ^ !!found;//此值为布尔
if ( inplace && found != null ) {
if ( pass ) {
anyFound = true;
} else {
curLoop[i] = false;
}
} else if ( pass ) {
result.push( item );//这里用于构建一下循环的数组
anyFound = true;
}
}
}
}
if ( found !== undefined ) {
if ( !inplace ) {
curLoop = result;
}
expr = expr.replace( Expr.match[ type ], "" );//削减CSS表达式直到变为空字符串
if ( !anyFound ) {
return [];
}
break;
}
}
}
// Improper expression
if ( expr === old ) {//如果到最后正则也不能动CSS表达式一条毫毛，说明此CSS表达式有问题
if ( anyFound == null ) {
Sizzle.error( expr );
} else {
break;
}
}
old = expr;
}
return curLoop;//这里用于其他迭代器
};
嘛，简单来说，此迭代器有两种形态。一是当inplace为undefined时，它会不断缩减集合的数量。如[ [object HTMLDivElement], [object HTMLDivElement], [object HTMLDivElement], [object HTMLDivElement] ]缩减成[ [object HTMLDivElement] ]一个，被操作的集合为候选集本身。另一种是inplace为true时，它不会缩减集合的数量，但会将不符合的节点置换为false，若在fathers迭代器中，符合条件的节点还会变成其某一个祖先，borders则变成其某一个previousSiblingElement，border与father相仿，总之会面目全非。这种情况是应用于映射集，映射集与候选集的数量总是相等。在Sizzle，映射集的变量名为checkSet。
好了，总之到下面这一段代码，span选择器已被搞掉了。
set = ret.expr ?Sizzle.filter( ret.expr, ret.set ) :ret.set;
这时候候选集的数量已少到不能最少，我们需要设置一个映射集：
checkSet = makeArray( set );
现在我们就来处理其他子选择器群集，它们都是以关系选择器间隔开的。
while ( parts.length ) {
cur = parts.pop();//取得关系选择器
pop = cur;
if ( !Expr.relative[ cur ] ) {
cur = "";//如果不是则默认为后代选择器
} else {
pop = parts.pop();//取得后代选择器前面的子选择器群集
}
if ( pop == null ) {
pop = context;
}
Expr.relative[ cur ]( checkSet, pop, contextXML );//根据其他四种迭代器改变映射集里面的元素
//得到诸如[ [object HTMLDivElement] ,false, false, [object HTMLSpanElement] ]的集合
}
最后一步就是根据映射集甄选候选集。
for ( i = 0; checkSet[i] != null; i++ ) {
if ( checkSet[i] && checkSet[i].nodeType === 1 ) {
results.push( set[i] );
}
}
如果存在并联选择器，那就再调用Sizzle主函数，把得到的两个结果合并去重就是。
嘛，以上就是Sizzle的基本流程了，其他迭代器，过滤器的解读应该没有难度，有空再说。下再重新把大纲罗列一下结文：
- 将CSS表达式切割到第一个并联选择器为止，得到的数组是按子选择器群集，关系选择器，子选择器群组，关系选择器.....的顺序排列。
- 将最后一个选择器放进种子选择器(Sizzle.find)，得到最佳的候选集。
- 如果刚才的子选择器群组还残留什么，就放到current迭代器，把候选集的元素个数缩小（减少过滤基数）。
- 然后根据候选集克隆一个映射集，用于放进其他迭代器的过滤函数中进行筛选，不符合者将置换为false，符合者置换其兄长祖先。
- 最后根据映射集甄选候选集，如果存在并联选择器，重复刚才的事，两者合并排序去重返回。