我们知道Sizzle支持的伪类有有很多,为了便于处理被Sizzle分成了两类:单个单词的伪类“PSEUDO”和多个词语使用“-”链接的“CHILD”。我们下面一一分析。
先看"PSEUDO":
a. Sizzle的伪类选择器"PSEUDO"
我们先整体看一下有哪些个伪类
伪类生成匹配器的源码如下:
matcher = Expr.filter[ tokens[i].type ].apply( null, tokens[i].matches );
此时tokens[i].type = “PSEUDO”,所以生成伪类匹配器函数是Expr.filter["PSEUDO"]函数
"PSEUDO": function( pseudo, argument ) {
// 伪类名称大小写不敏感
// 优先Expr.pseudos找到伪类对应的位置伪类函数,不行的话将伪类名称转换成小写形式使用Expr.setFilters
// 记住setFilters继承至Expr.pseudos
var args,
fn = Expr.pseudos[ pseudo ] || Expr.setFilters[ pseudo.toLowerCase() ] ||
Sizzle.error( "unsupported pseudo: " + pseudo );
// 用户也许使用createPseudo来表明参数需要创建过滤函数
// 类似Sizzle的做法
if ( fn[ expando ] ) {
return fn( argument );
}
//但是,保持老的签名支持(兼容老版本)
if ( fn.length > 1 ) {
args = [ pseudo, pseudo, "", argument ];
return Expr.setFilters.hasOwnProperty( pseudo.toLowerCase() ) ?
markFunction(function( seed, matches ) {
var idx,
matched = fn( seed, argument ),
i = matched.length;
while ( i-- ) {
idx = indexOf.call( seed, matched[i] );
seed[ idx ] = !( matches[ idx ] = matched[i] );
}
}) :
function( elem ) {
return fn( elem, 0, args );
};
}
return fn;
}
Sizzle在处理这一系列的伪类过程中将这些处理分为几个组来处理(分组方案使得每组都有相同点能使用共同代码,节约代码量,值得学习)。
第一组,将那些易于判断节点是否匹配的伪类放在一组,这一组包括的伪类有"target"/"root"/"focus"/"enabled"/"disabled"/"checked"/"selected"/"empty"/ "parent"/"header"/"input"/"button"/"text",这类原子匹配器在Expr.filter["PSEUDO"]中的处理简化如下
//pseudo表示伪类选择器,比如"target"
fn = Expr.pseudos[ pseudo ] || Expr.setFilters[ pseudo.toLowerCase() ] || Sizzle.error( "unsupported pseudo: " + pseudo );
...
return fn;
Expr.pseudos[ pseudo ]即是对应的原子匹配器。。
看一个例子“target”,target选择器用于匹配id属性值等于当前文档URI的锚点名称的元素。如果当前文档的URI为http://www.365mini.com/#top
,则:target选择器匹配id="top"的元素。
Expr.pseudos["target"]的源码如下
"target": function( elem ) {
var hash = window.location && window.location.hash;
return hash && hash.slice( 1 ) === elem.id;
}
剔除掉第一组伪类后剩余的伪类如下图
第二组,伪类带有一个参数非位置伪类,这类伪类有"contains"/"has"/"not"/"lang"。比如“:not(.chua)”。这类原子匹配器在Expr.filter["PSEUDO"]中的处理为
fn = Expr.pseudos[ pseudo ] || Expr.setFilters[ pseudo.toLowerCase() ] || Sizzle.error( "unsupported pseudo: " + pseudo );
// 例如Expr.pseudo["not"]使用markFunction将fn[expando]标记为true
// 类似Sizzle的做法
if ( fn[ expando ] ) {
return fn( argument );
}
以"not"为例,Expr.pseudo["not"]源码如下
pseudos: {
// Potentially complex pseudos
"not": markFunction(function( selector ) {
// selector参数需要去除前后的空白,避免被识别为关系选择器
// 先生成selector的匹配器放在matcher中
var input = [],
results = [],
matcher = compile( selector.replace( rtrim, "$1" ) );
return matcher[ expando ] ?
//如果selector中有伪类,返回的函数是伪类分割器方式返回的匹配器,
//其中matches对应着results
markFunction(function( seed, matches, context, xml ) {
//先把种子seed中能匹配matcher的元素存在unmatched备用
var elem,
unmatched = matcher( seed, null, xml, [] ),
i = seed.length;
// 将unmatched里面的元素取出来存在matches并同步seed
while ( i-- ) {
if ( (elem = unmatched[i]) ) {
seed[i] = !(matches[i] = elem);
}
}
}) :
//selector中没有伪类
function( elem, context, xml ) {
input[0] = elem;
matcher( input, null, xml, results );
return !results.pop();
};
})
":not(selector)"处理比正常的情况复杂一些,多了一种当selector中包含伪类的特殊处理(当selector没有伪类的时候返回的匹配器和正常情况没有太多区别)。在selector有伪类的时候按照伪类的方式来处理,返回的匹配器有四个参数是function( seed, results, context, xml ) ,匹配结果保存在第二个参数results中。
继续剔除掉第二组伪类后剩余的伪类如下图
第三组,位置伪类,这一组包括"first"/"last"/"eq"/"even"/"odd"/"lt"/"gt",其中:eq(index)、:gt(index)、:lt(index)这三个伪类需要一个index参数。
这类原子匹配器在Expr.filter["PSEUDO"]中的处理为
"PSEUDO": function( pseudo, argument ) {
...
fn = Expr.pseudos[ pseudo ] || Expr.setFilters[ pseudo.toLowerCase() ] || Sizzle.error( "unsupported pseudo: " + pseudo );
// 例如Expr.pseudo["not"]使用markFunction将fn[expando]标记为true // 类似Sizzle的做法 if ( fn[ expando ] ) { return fn( argument ); }
...
}
根据伪类匹配器生成的方法(在matcherFromTokens函数中)
matcher = Expr.filter[ tokens[i].type ].apply( null, tokens[i].matches )
Expr.filter["PSEUDO"]的参数( pseudo, argument )和tokens[i].matches对应。
我们看一下Expr.pseudo["eq"]的方法源码:
pseudos: {
"eq": createPositionalPseudo(function( matchIndexes, length, argument ) {
return [ argument < 0 ? argument + length : argument ];
})
...
}
// 返回一个函数给位置伪类使用
function createPositionalPseudo( fn ) {
return markFunction(function( argument ) {
argument = +argument;
//标记匹配器为类似伪类分隔器生成的匹配器(这类匹配器都有四个参数( seed, results, context, xml )) return markFunction(function( seed, matches ) {
var j,
matchIndexes = fn( [], seed.length, argument ),
i = matchIndexes.length;
// 匹配指定下标的元素
while ( i-- ) {
if ( seed[ (j = matchIndexes[i]) ] ) {
seed[j] = !(matches[j] = seed[j]);
}
}
});
});
}
以“eq(0)”为例,Expr.filter["PSEUDO"]的参数( pseudo = "eq", argument = 0 )【tokens[i].matches = ["eq","0"]】。那么对应着Expr.pseudo["eq"]的参数为(argument = 0),即createPositionalPseudo中argument = 0。最终使用markFunction将匹配器标记为类似伪类分隔器生成的匹配器(这类匹配器都有四个参数( seed, results, context, xml ))。
继续剔除第三组后剩下的伪类如下图
剩下的所有的为第四组伪类,他们针对input标签做匹配。他们是有以下的代码生成的
// Add button/input type pseudos
for ( i in { radio: true, checkbox: true, file: true, password: true, image: true } ) {
Expr.pseudos[ i ] = createInputPseudo( i );
}
for ( i in { submit: true, reset: true } ) {
Expr.pseudos[ i ] = createButtonPseudo( i );
}
// Returns a function to use in pseudos for input types
function createInputPseudo( type ) {
return function( elem ) {
var name = elem.nodeName.toLowerCase();
return name === "input" && elem.type === type;
};
}
// Returns a function to use in pseudos for buttons
function createButtonPseudo( type ) {
return function( elem ) {
var name = elem.nodeName.toLowerCase();
return (name === "input" || name === "button") && elem.type === type;
};
}
这些个伪类比较简单,不再详解。当然应为Sizzle被jQuery内置,jQuery本身还拓展了部分这样的伪类,比如:visible/hidden/animated
b. Sizzle伪类选择器中的子伪类选择器“CHILD”
在词法分析的时候就提到过有三种比较特别的词语ATTR/CHILD/PSEUDO,他们在词法分析完成以后还需要做一下额外的工作修饰他们的matches字段。这里主要讲CHILD。
以":nth-of-type(2)"为例,词法分析中先通过正则使用exec方法得到的结果如下
RegExpObj.exec(":nth-of-type(2)"): [":nth-of-type(2)", "nth", "of-type", "2", "", undefined, undefined, "", "2"]
使用preFilters修正后结果为
match = preFilters["CHILD"]( match ): [":nth-of-type(2)", "nth", "of-type", "2", 0, 2, undefined, "", "2"]
最终这个CSS选择器词法分析完成后结果为
//CSS选择器":nth-of-type(2)"词法解析结果tokens
tokens = [{
matches: ["nth","of-type","2",0,2,undefined,"","2"],
type: "CHILD",
value: ":nth-of-type(2)"
}]
同先前的只有一个单词的伪类选择器一样,“CHILD”方式获取匹配器的方法如下(在matcherFromTokens函数中)
matcher = Expr.filter[ tokens[i].type ].apply( null, tokens[i].matches )
Expr.filter["CHILD"]的参数(type, what, argument, first, last)和tokens[i].matches对应。以":nth-of-type(2)"为例,则为(type ="nth", what = "of-type", argument = "2", first = 0, last = 2)
好了,有这个认识就行。在讲解源码之前我们来看一下"CHILD"伪类对应的都有哪些
-
:first-child
-
:last-child
-
:only-child
-
:first-of-type
-
:last-of-type
- :only-of-type
- :nth-child(n)
- :nth-last-child(n)
-
:nth-of-type(n)
-
:nth-last-of-type(n)
前面几个没有参数n为简单子伪类选择器,后面几个为复杂子伪类选择器。所以处理的时候也是分成两组来处理的。
在编译生成匹配器的阶段,子匹配器(“CHILD”)对几个重要的状态进行了初始化,以备执行匹配的时候使用
var simple = type.slice( 0, 3 ) !== "nth",//简单子选择器(以非nth开头的6个选择器)?
forward = type.slice( -4 ) !== "last",//向前查找(以非last开头的选择器都是循环查找nextSibling来处理的,唯有以last开头的选择器是使用previousSibling来处理?
ofType = what === "of-type";//*-of-type?
选择器 | simple | forward | ofType |
first-child【type为"first",what为"child"】 | true | true | false |
last-child【type为"last",what为"child"】 | true | false | false |
only-child【type为"only",what为"child"】 | true | true | false |
first-of-type【type为"first",what为"of-type"】 | true | true | false |
last-of-type【type为"last",what为"of-type"】 | true | false | true |
only-of-type【type为"only",what为"of-type"】 | true | true | true |
nth-child(n)【type为"nth",what为"child"】 | false | true | false |
nth-last-child(n)【type为"nth-last",what为"child"】 | false | false | false |
nth-of-type(n)【type为"nth",what为"of-type"】 | false | true | true |
nth-last-of-type(n)【type为"nth-last",what为"of-type"】 | false | false | true |
在执行阶段,简单子伪类选择器比较简单,比如first-child,dir(dir = simple !== forward ? "nextSibling" : "previousSibling")为"previousSibling",只要不断比较node = node[ dir ]判断node是否还有"previousSibling"节点,是表示该节点并不是first-child,返回false;否表示该节点就是first-child,返回true。需要特别处理的是only-chlid需要双向比较。源码
// :(first|last|only)-(child|of-type)
if ( simple ) {
while ( dir ) {
node = elem;
while ( (node = node[ dir ]) ) {
if ( ofType ? node.nodeName.toLowerCase() === name : node.nodeType === 1 ) {
return false;
}
}
// Reverse direction for :only-* (if we haven't yet done so)
start = dir = type === "only" && !start && "nextSibling";
}
return true;
}
复杂子伪类选择器的处理分成几个分支来处理,结构如下
start = [ forward ? parent.firstChild : parent.lastChild ];
// non-xml :nth-child(...) 保存缓存数据到其父节点
if ( forward && useCache ) {
...// 使用以前缓存元素索引(如果可用的话)
} else if ( useCache && (cache = (elem[ expando ] || (elem[ expando ] = {}))[ type ]) && cache[0] === dirruns ) {
diff = cache[1];
// xml :nth-child(...) 或 :nth-last-child(...) 或 :nth(-last)?-of-type(...)
} else {
...
}
// Incorporate the offset, then check against cycle size
diff -= last;
return diff === first || ( diff % first === 0 && diff / first >= 0 );
具体代码分析了,肚子饿了,回家。。。
如果觉得本文不错,请点击右下方【推荐】!