sizzle源码分析 （4）sizzle 技术总结及值得我们学习的地方
分析sizzle源码并不是为了去钻牛角尖，而是去了解它的思想，学习下期中一些技术的运用。
1，sizzle中的正则表达式
jquery源码中充斥着各种正则表达式，能否看懂其源码的关键之一就是对正则表达式的理解。
RegExp对象的exec方法：返回一个数组，第一个是匹配项，后边依次是分组匹配项，如果分组匹配不成功，则为undefined。而且还返回属性index(匹配项起始index),input(要验证的字符串)
比如：
var r=/^(\d{1})\s((\w?)|(\d{1}))$/.exec("2 ") r=["2 ", "2", "", "", undefined]; r.index=0 r.input="2 "
了解了这个方法后，来具体分析下期中的正则表达式。
匹配空白 水平制表符 回车 换行 换页
whitespace = "[\\x20\\t\\r\\n\\f]"
说明：对于字符串需要双重转义\。\x20是空白符，\t水平制表符，\r回车,\n换行，\f换页
characterEncoding = "(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+"
说明：?: 非捕获性分组,不会创建反向引用的分组，即不会放在exec结果集中。\\.匹配\加任意字符；[\w-]匹配[a-zA-Z0-9_]或-；[^\\x00-\\xa0]表示ISO 10646 characters 161 and higher
attributes = "\\[" + whitespace + "*(" + characterEncoding + ")" + whitespace +"*(?:([*^$|!~]?=)" + whitespace + "*(?:(['\"])((?:\\\\.|[^\\\\])*?)\\3|(" + identifier + ")|)|)" + whitespace + "*\\]"
说明:\3反向引用第三个匹配项。此正则用来匹配属性 例如：[a="b"] [a=b] [a|='er']
rtrim=/^[\x20\t\r\n\f]+|((?:^|[^\\])(?:\\.)*)[\x20\t\r\n\f]+$/g
说明：匹配首位字符串
rcomma=/^[\x20\t\r\n\f]*,[\x20\t\r\n\f]*/
说明：匹配是否为逗号分隔
rcombinators=/^[\x20\t\r\n\f]*([>+~]|[\x20\t\r\n\f])[\x20\t\r\n\f]*/
说明：匹配是否是关系符
rsibling=/[\x20\t\r\n\f]*[+~]/
说明：兄弟节点标示符
rattributeQuotes=/=[\x20\t\r\n\f]*([^\]'"]*)[\x20\t\r\n\f]*\]/g
说明：属性的value
rpseudo=/:((?:\\.|[\w-]|[^\x00-\xa0])+)(?:\(((['"])((?:\\.|[^\\])*?)\3|((?:\\.|[^\\()[\]]|\[[\x20\t\r\n\f]*((?:\\.|[\w-]|[^\x00-\xa0])+)[\x20\t\r\n\f]*(?:([*^$|!~]?=)[\x20\t\r\n\f]*(?:(['"])((?:\\.|[^\\])*?)\8|((?:\\.|[\w#-]|[^\x00-\xa0])+)|)|)[\x20\t\r\n\f]*\])*)|.*)\)|)/
说明:伪类选择器
matchExpr={ ATTR: /^\[[\x20\t\r\n\f]*((?:\\.|[\w-]|[^\x00-\xa0])+)[\x20\t\r\n\f]*(?:([*^$|!~]?=)[\x20\t\r\n\f]*(?:(['"])((?:\\.|[^\\])*?)\3|((?:\\.|[\w#-]|[^\x00-\xa0])+)|)|)[\x20\t\r\n\f]*\]/, CHILD: /^:(only|first|last|nth|nth-last)-(child|of-type)(?:\([\x20\t\r\n\f]*(even|odd|(([+-]|)(\d*)n|)[\x20\t\r\n\f]*(?:([+-]|)[\x20\t\r\n\f]*(\d+)|))[\x20\t\r\n\f]*\)|)/i, CLASS: /^\.((?:\\.|[\w-]|[^\x00-\xa0])+)/, ID: /^#((?:\\.|[\w-]|[^\x00-\xa0])+)/, PSEUDO: /^:((?:\\.|[\w-]|[^\x00-\xa0])+)(?:\(((['"])((?:\\.|[^\\])*?)\3|((?:\\.|[^\\()[\]]|\[[\x20\t\r\n\f]*((?:\\.|[\w-]|[^\x00-\xa0])+)[\x20\t\r\n\f]*(?:([*^$|!~]?=)[\x20\t\r\n\f]*(?:(['"])((?:\\.|[^\\])*?)\8|((?:\\.|[\w#-]|[^\x00-\xa0])+)|)|)[\x20\t\r\n\f]*\])*)|.*)\)|)/, TAG: /^((?:\\.|[\w*-]|[^\x00-\xa0])+)/, bool: /^(?:checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped)$/i, needsContext: /^[\x20\t\r\n\f]*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\([\x20\t\r\n\f]*((?:-\d)?\d*)[\x20\t\r\n\f]*\)|)(?=[^-]|$)/i }
说明：matchExpr是各种正则的集合对象
rnative=/^[^{]+\{\s*\[native \w/
说明：用来判断是否是浏览器本地对象方法或属性
runescape=/\\([\da-f]{1,6}[\x20\t\r\n\f]?|([\x20\t\r\n\f])|.)/gi
说明：匹配16进制字符
funescape = function( _, escaped, escapedWhitespace ) {//_代表整个匹配项，escaped代表第一个匹配项，escapedWhitespace代表第二个分组匹配项，即空白匹配项 var high = "0x" + escaped - 0x10000; // NaN means non-codepoint // Support: Firefox // Workaround erroneous numeric interpretation of +"0x" return high !== high || escapedWhitespace ? escaped : // BMP codepoint high < 0 ? String.fromCharCode( high + 0x10000 ) : // Supplemental Plane codepoint (surrogate pair) String.fromCharCode( high >> 10 | 0xD800, high & 0x3FF | 0xDC00 ); };
说明:解码函数，与runescape联合使用
2，sizzle中的几个函数也值得我们学习，它们给我们了一种运用思路
function assert( fn ) { var div = document.createElement("div"); try { return !!fn( div ); } catch (e) { return false; } finally { // Remove from its parent by default if ( div.parentNode ) { div.parentNode.removeChild( div ); } // release memory in IE div = null; } }
说明：断言函数，用来判断某些条件是否成立，比如有没有某个属性，方法，比如：
support.attributes = assert(function( div ) { div.className = "i"; return !div.getAttribute("className"); });
用来判断是否支持getAttribute方法。
再看elementMatcher函数：
//将之前的匹配函数综合成一个匹配函数 function elementMatcher( matchers ) { return matchers.length > 1 ? function( elem, context, xml ) { var i = matchers.length; while ( i-- ) { if ( !matchers[i]( elem, context, xml ) ) { return false; } } return true; } : matchers[0]; }
matchers是一个函数数组，此方法可以把数组的多个函数合并成一个函数。
再来看看matcherFromGroupMatchers函数：
function matcherFromGroupMatchers( elementMatchers, setMatchers ) { var matcherCachedRuns = 0, bySet = setMatchers.length > 0, byElement = elementMatchers.length > 0, //最终运行的匹配函数: superMatcher = function( seed, context, xml, results, expandContext ) { var elem, j, matcher, setMatched = [], matchedCount = 0, i = "0", unmatched = seed && [], outermost = expandContext != null, contextBackup = outermostContext, // We must always have either seed elements or context elems = seed || byElement && Expr.find["TAG"]( "*", expandContext && context.parentNode || context ), // Use integer dirruns iff this is the outermost matcher dirrunsUnique = (dirruns += contextBackup == null ? 1 : Math.random() || 0.1); if ( outermost ) { outermostContext = context !== document && context; cachedruns = matcherCachedRuns; } // Add elements passing elementMatchers directly to results // Keep `i` a string if there are no elements so `matchedCount` will be "00" below for ( ; (elem = elems[i]) != null; i++ ) { if ( byElement && elem ) { j = 0; while ( (matcher = elementMatchers[j++]) ) { if ( matcher( elem, context, xml ) ) { results.push( elem ); break; } } if ( outermost ) { dirruns = dirrunsUnique; cachedruns = ++matcherCachedRuns; } } // Track unmatched elements for set filters if ( bySet ) { // They will have gone through all possible matchers if ( (elem = !matcher && elem) ) { matchedCount--; } // Lengthen the array for every element, matched or not if ( seed ) { unmatched.push( elem ); } } } // Apply set filters to unmatched elements matchedCount += i; if ( bySet && i !== matchedCount ) { j = 0; while ( (matcher = setMatchers[j++]) ) { matcher( unmatched, setMatched, context, xml );//这里开始调用matcher 即： } if ( seed ) { // Reintegrate element matches to eliminate the need for sorting if ( matchedCount > 0 ) { while ( i-- ) { if ( !(unmatched[i] || setMatched[i]) ) { setMatched[i] = pop.call( results ); } } } // Discard index placeholder values to get only actual matches setMatched = condense( setMatched ); } // Add matches to results push.apply( results, setMatched ); // Seedless set matches succeeding multiple successful matchers stipulate sorting if ( outermost && !seed && setMatched.length > 0 && ( matchedCount + setMatchers.length ) > 1 ) { Sizzle.uniqueSort( results ); } } // Override manipulation of globals by nested matchers if ( outermost ) { dirruns = dirrunsUnique; outermostContext = contextBackup; } return unmatched; }; return bySet ? markFunction( superMatcher ) : superMatcher; }
此函数通过闭包原理，返回终极匹配器superMatcher
在sizzle中，闭包的运用还有setMatcher
//第1个参数，preFilter，前置过滤器，相当于“div”过滤器 //第2个参数，selector，前置过滤器的字符串格式，相当于“div”input:checked + p //第3个参数，matcher，当前位置伪类“:first”的匹配器/过滤器 //第4个参数，postFilter，后置过滤器，相当于“ ” //第5个参数，postFinder，后置搜索器，相当于在前边过滤出来的集合里边再搜索剩下的规则的一个搜索器 //第6个参数，postSelector，后置搜索器对应的选择器字符串，相当于“input:checked + p” //伪类选择器时会执行这个函数 function setMatcher( preFilter, selector, matcher, postFilter, postFinder, postSelector ) { if ( postFilter && !postFilter[ expando ] ) { postFilter = setMatcher( postFilter ); } if ( postFinder && !postFinder[ expando ] ) { postFinder = setMatcher( postFinder, postSelector ); } return markFunction(function( seed, results, context, xml ) { var temp, i, elem, preMap = [], postMap = [], preexisting = results.length, // Get initial elements from seed or context /* 如果执行$("ul.list>li span:eq(1)")时:则会调用multipleContexts来递归sizzle 递归后就得到elems为两个span啦 */ elems = seed || multipleContexts( selector || "*", context.nodeType ? [ context ] : context, [] ), // Prefilter to get matcher input, preserving a map for seed-results synchronization /*这里matcherIn就是两个span啦*/ matcherIn = preFilter && ( seed || !selector ) ? condense( elems, preMap, preFilter, context, xml ) : elems, matcherOut = matcher ? // If we have a postFinder, or filtered seed, or non-seed postFilter or preexisting results, postFinder || ( seed ? preFilter : preexisting || postFilter ) ? // ...intermediate processing is necessary [] : // ...otherwise use results directly results : matcherIn; // Find primary matches if ( matcher ) { matcher( matcherIn, matcherOut, context, xml ); } // Apply postFilter if ( postFilter ) { temp = condense( matcherOut, postMap ); postFilter( temp, [], context, xml ); // Un-match failing elements by moving them back to matcherIn i = temp.length; while ( i-- ) { if ( (elem = temp[i]) ) { matcherOut[ postMap[i] ] = !(matcherIn[ postMap[i] ] = elem); } } } if ( seed ) { if ( postFinder || preFilter ) { if ( postFinder ) { // Get the final matcherOut by condensing this intermediate into postFinder contexts temp = []; i = matcherOut.length; while ( i-- ) { if ( (elem = matcherOut[i]) ) { // Restore matcherIn since elem is not yet a final match temp.push( (matcherIn[i] = elem) ); } } postFinder( null, (matcherOut = []), temp, xml ); } // Move matched elements from seed to results to keep them synchronized i = matcherOut.length; while ( i-- ) { if ( (elem = matcherOut[i]) && (temp = postFinder ? indexOf.call( seed, elem ) : preMap[i]) > -1 ) { seed[temp] = !(results[temp] = elem); } } } // Add elements to results, through postFinder if defined } else { matcherOut = condense( matcherOut === results ? matcherOut.splice( preexisting, matcherOut.length ) : matcherOut ); if ( postFinder ) { postFinder( null, results, matcherOut, xml ); } else { push.apply( results, matcherOut ); } } }); }
这样做的好处是保证了每个匹配词的处理函数的当前执行上下文，以便后边调用。
