当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jquery 选择器引擎sizzle浅析

jquery 选择器引擎sizzle浅析

2018年11月05日  | 移动技术网IT编程  | 我要评论

$(selector)其内部选择器的流程走向完全不清晰！于是看了jquery的，jquery用的选择器的引擎是sizzle，是jquery的作者另一开源项目，在github上面有，号称最快的dom选择器！不到2000行代码。

上面说了不是很精彩的开场白，我么来个 for example: $('.test') 在jquery的流程是怎么走的呢？
1.首先会做如下的判断

. 代码如下:


/**
*关于 queryselectorall函数
*返回当前文档中匹配一个特定选择器的所有的元素
*var nodelist = element.queryselectorall("p.test");
*支持 ie8+,chrome,firefox(3.5)
* 如果你不清楚可以google 一下
*/
if ( document.queryselectorall ) {
(function(){
var oldsizzle = sizzle,
p = document.createelement("p"),
id = "__sizzle__";
p.innerhtml = "<p class='test'></p>";
// safari can't handle uppercase or unicode characters when
// in quirks mode.
if ( p.queryselectorall && p.queryselectorall(".test").length === 0 ) {
return;
}
sizzle = function( query, context, extra, seed ) {
//使用queryselectorall 来查询
}
}


如果你的浏览器是ie8+ 或者 谷歌，直接通过内置的queryselectorall(".test")返回dom结构。 如果你使用是ie6，那么下面事情发生了
2. 不支持queryselectorall 就会启动内部 sizzle。下面是流程

. 代码如下:


/**
.sizzle 通过
chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g
这个正则进行匹配，
.把我们传来的参数'.test'，匹配成'.test' 放到数组
.检测浏览器是否支持getelementsbyclassname 如果支持，则通过此函数返回dom，如果不支持此函数则 context.getelementsbytagname( "*" ) ,通过上下文把所有的元素选出来，在通过循环，选择classname = 'test' 的元素，放入数组返回dom。
*/


ok，以上是$('.test')的流程，如果你很迷惑，你可以看看源码，调试一下。
关于sizzle的选择器
个人认为，sizzle选择器是增强版的queryselectorall 函数， 因为queryselectorall 不支持 'p.test :eq(1)' 这样的selector 和css3选择！
当你的selector里面不出现nth|eq|gt|lt|first|last|even|odd 这样的字符时候， 从右向左，所谓的从右向左，比如 $('p img') 首先会把所有的img 选出来，通过parent 是p 进行过滤 。 这样很高效的原因是只进行一次dom的查询！
当你selector 出现了'eq(1)' 这样的字符的时候，就变正常了，从左向右！这是因为要对结果集进行过滤。
思考
$('p img:eq(0)') 与 $('p img').first() 哪个效率高？ 个人认为 后一个高一些，因为 第一从左向右效率低下！没有测试过！理论推导！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网