第二步：实现Sizzle("el,el,el..."),Sizzle("el > el"),Sizzle("el el"),Sizzle("el + el"),Sizzle("el ~ el")
(function( window ){
var arr = [];
var select ;
var Expr;
var push = arr.push;
// http://www.w3.org/TR/css3-selectors/#whitespace
// 各种空白待穿正则字符串
var whitespace = "[\\x20\\t\\r\\n\\f]";
// 带空格选择器正则，记忆无空格选择器
// http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier
var identifier = "(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+";
// 属性选择器: http://www.w3.org/TR/selectors/#attribute-selectors
var attributes = "\\[" + whitespace + "*(" + identifier + ")(?:" + whitespace +
// Operator (capture 2)
"*([*^$|!~]?=)" + whitespace +
// "Attribute values must be CSS identifiers [capture 5] or strings [capture 3 or capture 4]"
"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|(" + identifier + "))|)" + whitespace +
"*\\]";
var rtrim = new RegExp( "^" + whitespace + "+|((?:^|[^\\\\])(?:\\\\.)*)" + whitespace + "+$", "g" );
// 快速选择器正则 ID 或者 TAG(包括*) 或者 CLASS 选择器
var rquickExpr = /^(?:#([\w-]+)|(\w+|\*)|\.([\w-]+))$/;
// 连接符号
var rcomma = new RegExp( "^" + whitespace + "*," + whitespace + "*" );
// 层级符号正则'>',' ','+','~'
var rcombinators = new RegExp( "^" + whitespace + "*([>+~]|" + whitespace + ")" + whitespace + "*" );
var matchExpr = {
"ID": new RegExp( "^#(" + identifier + ")" ),
"CLASS": new RegExp( "^\\.(" + identifier + ")" ),
"TAG": new RegExp( "^(" + identifier + "|[*])" ),
};
// 浏览器代码正则
var rnative = /^[^{]+\{\s*\[native \w/;
// token缓存
var tokenCache = createCache();
// 编译缓存
var compilerCache = createCache();
// 入口
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;
}
}
}
// 复杂选择调到select
return select( selector, context, results);
}
// 创建缓存函数
function createCache() {
var keys = [];
function cache( key, value ) {
// Use (key + " ") to avoid collision with native prototype properties (see Issue #157)
if ( keys.push( key + " " ) > 10 ) {
// Only keep the most recent entries
delete cache[ keys.shift() ];
}
return (cache[ key + " " ] = value);
}
return cache;
}
// 错误函数
Sizzle.error = function( msg ) {
throw new Error( "Syntax error, unrecognized expression: " + msg );
};
// 版本支持变量的对外访问入口
var support = Sizzle.support = {};
// 判断是否支持getElementsByClassName
// 支持: IE<9
support.getElementsByClassName = rnative.test( document.getElementsByClassName );
// 表达式对象
// 存放各类相对位置，各种查询函数，各种过滤函数等。
Expr = {
relative: {
">": { dir: "parentNode", first: true },
" ": { dir: "parentNode" },
"+": { dir: "previousSibling", first: true },
"~": { dir: "previousSibling" }
},
filter: {
"TAG": function( nodeNameSelector ) {
var nodeName = nodeNameSelector.toLowerCase();
return nodeNameSelector === "*" ?
function() { return true; } :
function( elem ) {
return elem.nodeName.toLowerCase() === nodeName;
};
},
"CLASS": function( className ) {
var className = className.toLowerCase();
return function( elem ) {
return elem.className.toLowerCase() === className;
};
}
},
find: {
"TAG": function( tag, context ) {
return context.getElementsByTagName( tag );
},
"CLASS": support.getElementsByClassName&&function( tag, context ) {
return context.getElementsByClassName( tag );
},
},
}
// tokenize函数
// 将选择器字符串转化为方便使用的数组对象形式
tokenize = Sizzle.tokenize = function( selector, parseOnly ) {
var cached = tokenCache[ selector + " " ];
// cached.slice生成新的数组，对其修改不会修改其引用缓存
if ( cached ) {
return cached.slice( 0 );
}
// 循环条件
var soFar = selector;
// 结果数组
var groups = [];
// 匹配参数
var matched;
// 一个独立的tokens
var tokens;
// 辅助变量
var match;
while ( soFar ) {
//首次默认创建一个tokens
//之后每碰到一个逗号新增一个新的tokens
if ( !matched || (match = rcomma.exec( soFar )) ) {
if ( match ) {
// Don't consume trailing commas as valid
soFar = soFar.slice( match[0].length ) || soFar;
}
groups.push( (tokens = []) );
}
matched = false;
// 关系token
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 );
}
// TAG，CLASS，ID token
for ( type in Expr.filter ) {
if ( match = matchExpr[ type ].exec( soFar ) ) {
matched = match.shift();
tokens.push({
value: matched,
type: type,
matches: match
});
soFar = soFar.slice( matched.length );
}
}
// 一次循环到这里三个条件都不符合没有匹配结果时，跳出。
if ( !matched ) {
break;
}
}
// 意外跳出，soFar存在，报错。
return soFar ?
Sizzle.error( selector ) :
// 缓存后转成新数组返回（预防修改缓存内容）
tokenCache( selector, groups ).slice( 0 );
};
// 将tokens转化为selector字符串形式。
function toSelector( tokens ) {
var i = 0,
len = tokens.length,
selector = "";
for ( ; i < len; i++ ) {
selector += tokens[i].value;
}
return selector;
}
// !addCombinator
// 增加关系处理函数
// 返回关系函数，主要功能是，遍历种子节点的关系节点。
// 比如li>a,传入无数个种子节点a，a.parentNode，再执行matcher,matcher里再判断这个父亲节点是不是li
function addCombinator( matcher, combinator ) {
var dir = combinator.dir;
return combinator.first ?
function( elem, context ) {
while( (elem = elem[ dir ]) ){
if ( elem.nodeType === 1 ) {
return matcher( elem, context );
}
}
}:
function( elem, context ) {
while ( (elem = elem[ dir ]) ) {
if ( elem.nodeType === 1 ) {
if(matcher( elem, context )) {
return true;
}
}
}
return false;
}
}
// !elementMatcher
// 生成matchers遍历器
// matchers数组存放我要过滤的函数，这个函数遍历所有过滤函数，一个不符合就返回false。
function elementMatcher( matchers ) {
return function( elem, context ) {
var i = matchers.length;
while ( i-- ) {
if ( !matchers[i]( elem, context ) ) {
return false;
}
}
return true;
};
}
// !matcherFromTokens
// 根据tokens,生成过滤一组函数matchers，供elementMatcher使用
// 返回的是一个执行所有过滤函数的函数
function matcherFromTokens( tokens ){
var matchers = [];
var matcher;
var i = 0;
var len = tokens.length;
for ( ; i < len; i++ ) {
if ( (matcher = Expr.relative[ tokens[i].type ]) ) {
matchers = [ addCombinator(elementMatcher( matchers ), matcher) ];
} else {
matcher = Expr.filter[ tokens[i].type ].apply( null, tokens[i].matches );
matchers.push( matcher );
}
}
return elementMatcher( matchers );
}
// !matcherFromGroupMatchers
// 返回超级匹配器，
function matcherFromGroupMatchers( elementMatchers ){
// !!最重要superMatcher，也是最核心的函数，其它的函数为它服务。
// 获取种子元素，遍历所有种子元素。
// 遍历elementMatchers
// 符合的推入结果数组
// 一个选择器（逗号隔开的）生成一个elementMatcher，elementMatchers是存放所有elementMatcher的数组
var superMatcher = function( seed, context, results) {
var elems = seed || Expr.find["TAG"]( "*", document );
var len = elems.length;
var i = 0;
for ( ; i !== len && (elem = elems[i]) != null; i++ ) {
j = 0;
while ( (matcher = elementMatchers[j++]) ) {
if ( matcher( elem, context) ) {
results.push( elem );
break;
}
}
}
}
return superMatcher;
}
// compile
// 最初的编译器，存放elementMatchers，缓存超级匹配函数并返回
compile = Sizzle.compile = function( selector, match ) {
var i;
var elementMatchers = [];
var cached = compilerCache[ selector + " "];
if ( !cached ) {
i = match.length;
while ( i-- ) {
elementMatchers.push( matcherFromTokens( match[i] ) );
}
cached = compilerCache( selector, matcherFromGroupMatchers( elementMatchers ));
}
return cached;
}
// select
// 兼容的自写的选择器
select = Sizzle.select = function( selector, context, results){
var token;
var seed;
var tokens;
var find;
var match = tokenize( selector )
if ( match.length === 1 ) {
// tokens
var tokens = match[0].slice( 0 );
// 如果tokens的首项是ID，将其设置为上下文
if ( (token = tokens[0]).type === 'ID' ){
context = document.getElementById(token.matches[0]);
selector = selector.slice( tokens.shift().value.length );
}
// 生成种子seed
// 如"div ul li"，所谓种子就是所有的li
// 后面编译函数需要过滤出符合祖先是ul，ul的祖先是div的节点
i = tokens.length;
while ( i-- ){
token = tokens[i];
if ( Expr.relative[ (type = token.type) ] ) {
break;
}
if((find = Expr.find[ type ]))
if( seed = find( token.matches[0],context ) ) {
tokens.splice( i, 1 );
selector = toSelector( tokens )
break;
}
}
};
// 根据selector,match生成superMatcher并调用
compile( selector, match )( seed, context, results );
return results;
}
// 对外入口
window.MSizzle = Sizzle;
})(window)
// 测试
console.log(MSizzle("ul.topnav > li"))
console.log(MSizzle("ul.topnav li"))
console.log(MSizzle("ul.topnav + div"))
console.log(MSizzle("ul.topnav ~ div"))1.先来整体流程，首先select生成种子seed，然后执行complie编译出超级匹配函数。在complie中，调用matchFromTokens生成每个tokens的匹配函数，如ul>li,div，会生成两个匹配函数，然后存入到elmentMatchers数组。然后，在matchFromTokens，根据tokens，返回匹配函数，elmentMatcher函数，和addCompinator是其辅助函数。然后回到complie中，缓存matcherFromGroupMatchers函数的结果并返回。在matcherFromGroupMatchers的返回superMatcher 函数中，遍历所有种子元素（不存在时的种子元素就是所有节点），利用elmentMatchers数组的匹配函数匹配。符合推入到结果数组中。跳回最初的complie返回的超级匹配函数，传入参数运行。
2.matchFromTokens如何工作。假如我们有tokens,[{type:'CLASS',value:"f"}，{type:'CLASS',value:"box"}]，seed是一群div节点，我们只要根据tokens生成两个函数，一个matchers数组中，一个函数是当当前节点的className是f时返回true，一个函数是当当前节点的className是box时返回true。外包一个函数elmentMatcher，参数是待匹配节点，执行数组matchers的所有的函数，但凡有一个不匹配直接返回false。
再假设tokens[{type:'TAG',value:'ul'},{type:'>',value:' > '}]，seed是一群li节点。这种情况我们需要过滤li的父亲节点是否是ul。这个找到父亲节点的函数就是addCompinator。
3.matcherFromGroupMatchers工作。他是返回一个最终核心匹配函数，这个函数遍历所有节点，每个节点，执行返回elmentMatcher函数，如果返回为true，则存入到结果数组中。由于选择器一般也会包括几个独立的选择器，如ul，div，就是两个elmentMatcher函数存在elmentMatchers，所以还要遍历执行每一个elmentMatcher。