jQuery1.11源码分析(4)-----Sizzle工厂函数[原创]
在用前两篇讲述完正则表达式、初始化、特性检测之后，终于到了我们的正餐——Sizzle工厂函数！
Sizzle工厂函数有四个参数，
selector:选择符
context:查找上下文
results:返回的结果数组
seed:待选元素，刚开始是undefined，但有的情况下Sizzle会递归调用，故那个时候会将待选元素层层传递
当我们要使用Sizzle时，使用频率最高的通常是直接指定单个id、class、tag来获取(通常还指定查找上下文来加速这一过程)，而这种情况下Sizzle做了优化，当判断是这三种情况时，直接调用原生API来获取元素。其次，最快的方法莫过于使用querySelectorAll了，也省去了后续的过滤等各种耗性能的操作。若上述手段都不生效，再采用复杂的查找、过滤等流程。
接下来我们看看源代码。
//对工具函数处理完毕，开始正式的Sizzle工厂函数
//这个seed有什么用？
//现在可以回答这个问题了，因为这个Sizzle会递归调用，这里的seed保留的是已经过粗选的待选元素
function Sizzle( selector, context, results, seed ) {
console.log('Sizzle begin');
console.log('arguments(selector, context, results, seed):');
console.log(arguments);
var match, elem, m, nodeType,
// QSA vars
i, groups, old, nid, newContext, newSelector;
//如果(查找范围的所属文档节点或查找范围)不是当前文档节点，则设置一下文档节点各方面的能力
if ( ( context ? context.ownerDocument || context : preferredDoc ) !== document ) {
console.log('Sizzle setDocument');
setDocument( context );
}
context = context || document;
results = results || [];
//如果没有选择符或选择符不是字符串，则直接返回结果。
if ( !selector || typeof selector !== "string" ) {
return results;
}
//这种写法压缩了一行代码，在用的时候再首次初始化。
if ( (nodeType = context.nodeType) !== 1 && nodeType !== 9 ) {
return [];
}
//如果没seed才进入，有seed的话说明肯定不是简单匹配了，最后在return的时候才处理
if ( documentIsHTML && !seed ) {
// Shortcuts
//jQuery用的思想是先用简单的方式来执行简单selector
//这个时候其实应该考虑正则表达式效率。
if ( (match = rquickExpr.exec( selector )) ) {
// Speed-up: Sizzle("#ID")
//match[1]存的是ID
//match[2]存的是TAG
//match[3]存的是CLASS
if ( (m = match[1]) ) {
if ( nodeType === 9 ) {
elem = context.getElementById( m );
// Check parentNode to catch when Blackberry 4.6 returns
// nodes that are no longer in the document (jQuery #6963)
//黑莓4.6会返回不在DOM树里的节点。
if ( elem && elem.parentNode ) {
// Handle the case where IE, Opera, and Webkit return items
// by name instead of ID
//有的时候会根据name来返回而不是ID
if ( elem.id === m ) {
results.push( elem );
return results;
}
} else {
return results;
}
} else {
// Context is not a document
//这一行执行了多种行为，可以学习一下。
//先判断context是否有所属文档节点，有的话则先用文档节点的方法获得指定节点(因为只有document才有getElementById)。
//获得指定节点之后，再检查context是否包含指定节点，最后检查指定节点的id。
//只有文档节点才有getElementById
if ( context.ownerDocument && (elem = context.ownerDocument.getElementById( m )) &&
contains( context, elem ) && elem.id === m ) {
results.push( elem );
return results;
}
}
// Speed-up: Sizzle("TAG")
} else if ( match[2] ) {
push.apply( results, context.getElementsByTagName( selector ) );
return results;
// Speed-up: Sizzle(".CLASS")
//要是浏览器没有getElementsByClassName，Sizzle不做任何处理，而不是模仿一个比较慢的API
} else if ( (m = match[3]) && support.getElementsByClassName && context.getElementsByClassName ) {
push.apply( results, context.getElementsByClassName( m ) );
return results;
}
}
// QSA path
//要是有QSA，且没有带bug的QSA或者选择符不匹配该bugQSA
if ( support.qsa && (!rbuggyQSA || !rbuggyQSA.test( selector )) ) {
nid = old = expando;
newContext = context;
newSelector = nodeType === 9 && selector;
// qSA works strangely on Element-rooted queries
// We can work around this by specifying an extra ID on the root
// and working up from there (Thanks to Andrew Dupont for the technique)
// IE 8 doesn't work on object elements
//??????为什么这样写？
//为什么要给context设置一个id？
//详情参见http://www.cnblogs.com/snandy/archive/2011/03/30/1999388.html
if ( nodeType === 1 && context.nodeName.toLowerCase() !== "object" ) {
//这里是把选择符用词法分析器拆成一个个词元
//其实就是一个数据结构{value:"div",type:"TAG",matches:"div"}
//多个词元组成一个词序列tokens，也是一个group
//以选择器中的逗号为分隔符，多个group组成一个groups数组
console.log('Sizzle tokenize');
groups = tokenize( selector );
console.log('Sizzle tokenize results'+groups);
//如果查找范围有属性ID节点则取出来，没有则将ID设为expando
if ( (old = context.getAttribute("id")) ) {
nid = old.replace( rescape, "\\$&" );
} else {
context.setAttribute( "id", nid );
}
//nid变为[id="expando"]属性选择符，作为后面选择的查找范围标示。
//为什么不用#expando的形式？
nid = "[id='" + nid + "'] ";
i = groups.length;
while ( i-- ) {
groups[i] = nid + toSelector( groups[i] );
}
//如果是要查找兄弟元素，则将查找范围设为原查找范围的父元素
newContext = rsibling.test( selector ) && testContext( context.parentNode ) || context;
newSelector = groups.join(",");
}
/*因为我是用的是chrome浏览器，测试的时候暂时注释掉这个
if ( newSelector ) {
try {
push.apply( results,
newContext.querySelectorAll( newSelector )
);
return results;
} catch(qsaError) {
} finally {
if ( !old ) {
context.removeAttribute("id");
}
}
}*/
}
}
// All others
//如果上述省时省力的方法都不行的话，则使用真正复杂的方法进行查找
return select( selector.replace( rtrim, "$1" ), context, results, seed );
}
中间调用了tokenize这个工具函数，把selector转换成groups数组，每一个group又是一个tokens数组，tokens数组由之前说过的一个个token组成。我们来看一下这个工具函数是怎么切割selector的(其实简单来说就是用正则表达式不断地匹配、切割，用剩下的selector再匹配，再切割)
//以后遇到这种工具函数，先拷到外面看输入输出
//当tokenize第二个参数为true时，仅仅返回处理的结果长度
function tokenize( selector, parseOnly ) {
var matched, match, tokens, type,
soFar, groups, preFilters,
cached = tokenCache[ selector + " " ];
if ( cached ) {
//??????为什么这里要调用一下slice？这里是数组的slice
//如果有缓存，parseOnly为true，为什么不返回长度而是0
return parseOnly ? 0 : cached.slice( 0 );
}
//soFar用来存切割剩下的selector
soFar = selector;
groups = [];
preFilters = Expr.preFilter;
while ( soFar ) {
// Comma and first run
//原本这里的写法是!matched || (match = rcomma.exec( soFar )
//这里的写法应该换一下，换成(match = rcomma.exec( soFar ) || !matched
//否则$(',body',document.documentElement)这样的写法会报错
if ( (match = rcomma.exec( soFar )) || !matched ) {
//第一次循环不进入
if ( match ) {
// Don't consume trailing commas as valid
soFar = soFar.slice( match[0].length ) || soFar;
}
groups.push( (tokens = []) );
}
matched = false;
// Combinators
//先执行看有没有连接符[>+~]
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 );
}
// Filters
for ( type in Expr.filter ) {
//每一次循环都要用过滤器滤一遍
//若有预处理过滤器，则执行预处理过滤器的写法 !preFilters[ type ] || (match = preFilters[ type ]( match )))
if ( (match = matchExpr[ type ].exec( soFar )) && (!preFilters[ type ] ||
(match = preFilters[ type ]( match ))) ) {
matched = match.shift();
tokens.push({
value: matched,
type: type,
matches: match
});
soFar = soFar.slice( matched.length );
}
}
//当matched再也没有捕获到的元素了，则可以跳出
if ( !matched ) {
break;
}
}
// Return the length of the invalid excess
// if we're just parsing
// Otherwise, throw an error or return tokens
return parseOnly ?
soFar.length :
soFar ?
Sizzle.error( selector ) :
// Cache the tokens
tokenCache( selector, groups ).slice( 0 );
}
这里还有一个工具函数，toSelector，和上面的tokenize的作用刚好相反，即将一个个token给再拼成selector，过程很简单，不放代码了，本文最后再看一个select函数，用于调用各个查找函数(find)，来找到待选集seed。
function select( selector, context, results, seed ) {
console.log('select begin');
console.log('arguments:selector, context, results, seed');
console.log(arguments);
console.log('select tokenize');
var i, tokens, token, type, find,
match = tokenize( selector );
console.log('select after tokenize');
console.log(match);
if ( !seed ) {
// Try to minimize operations if there is only one group
//尝试最小化操作？
//如果只有一个group
if ( match.length === 1 ) {
// Take a shortcut and set the context if the root selector is an ID
tokens = match[0] = match[0].slice( 0 );
//如果token的数量大于2，且第一个token的类型是id
if ( tokens.length > 2 && (token = tokens[0]).type === "ID" &&
support.getById && context.nodeType === 9 && documentIsHTML &&
Expr.relative[ tokens[1].type ] ) {
console.log('select find id');
context = ( Expr.find["ID"]( token.matches[0].replace(runescape, funescape), context ) || [] )[0];
if ( !context ) {
return results;
}
//减去已经用掉的长度
selector = selector.slice( tokens.shift().value.length );
}
// Fetch a seed set for right-to-left matching
//先检查一下看selector是否必须要查找上下文，比如上来就使用 >之类的连接符或:nth(1)之类的伪方法
i = matchExpr["needsContext"].test( selector ) ? 0 : tokens.length;
//如果selector不需要查找上下文，则直接进入下面的循环进行查找seed，否则跳过，交给后面的compile去递归获得seed。
while ( i-- ) {
token = tokens[i];
// Abort if we hit a combinator
//?????连接符会怎样？
if ( Expr.relative[ (type = token.type) ] ) {
break;
}
if ( (find = Expr.find[ type ]) ) {
// Search, expanding context for leading sibling combinators
console.log('select after find');
if ( (seed = find(
token.matches[0].replace( runescape, funescape ),
rsibling.test( tokens[0].type ) && testContext( context.parentNode ) || context
)) ) {
console.log('select after find:seed');
console.log(seed);
// If seed is empty or no tokens remain, we can return early
//因为是从右向左匹配的，范围会越缩越小，如果这都获得不了seed，说明再缩小范围也没意义
//删除掉已经使用过的token
tokens.splice( i, 1 );
selector = seed.length && toSelector( tokens );
console.log(selector);
//如果seed.length > 0 且所有token都用完了，则可以直接返回了
if ( !selector ) {
push.apply( results, seed );
return results;
}
//如果找到了seed，还有没用完的token要过滤，则跳出循环，执行下面的compile
break;
}
}
}
}
}
// Compile and execute a filtering function
// Provide `match` to avoid retokenization if we modified the selector above
//编译好的matcher串，参数为seed,context,xml,result,outermostContext
console.log('select compile');
compile( selector, match )(
seed,
context,
!documentIsHTML,
results,
rsibling.test( selector ) && testContext( context.parentNode ) || context
);
console.log('select after compile');
console.log(results);
return results;
}
这里最后调用的compile就是我们用来编译匹配函数matcher的编译函数了，这里的过程是:先进行编译，获得一个matcher，再调用，将种种参数传入
compile的具体内容我们明天再见~
