提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jquery选择器引擎sizzle浅析

jQuery引擎 浅析 选择器
2023-06-13 09:14:45 时间
I"msorry!我用jquery的大概有一年了，只知道$(selector)，其内部选择器的流程走向完全不清晰！于是看了jquery的源码，jquery用的选择器的引擎是sizzle，是jquery的作者另一开源项目，在github上面有，号称最快的dom选择器！不到2000行代码。

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

/**
*关于querySelectorAll函数
*返回当前文档中匹配一个特定选择器的所有的元素
*varnodelist=element.querySelectorAll("div.test");
*支持浏览器ie8+,Chrome,Firefox(3.5)
*如果你不清楚可以google一下
*/
if(document.querySelectorAll){
(function(){
varoldSizzle=Sizzle,
div=document.createElement("div"),
id="__sizzle__";
div.innerHTML="<pclass="TEST"></p>";
//Safarican"thandleuppercaseorunicodecharacterswhen
//inquirksmode.
if(div.querySelectorAll&&div.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不支持"div.test:eq(1)"这样的selector和css3选择！
当你的selector里面不出现nth|eq|gt|lt|first|last|even|odd这样的字符时候，从右向左，所谓的从右向左，比如$("divimg")首先会把所有的img选出来，通过parent是div进行过滤。这样很高效的原因是只进行一次dom的查询！
当你selector出现了"eq(1)"这样的字符的时候，就变正常了，从左向右！这是因为要对结果集进行过滤。
思考
$("divimg:eq(0)")与$("divimg").first()哪个效率高？个人认为后一个高一些，因为第一从左向右效率低下！没有测试过！理论推导！

今天大致看了下流程，具体的代码没怎么细研究！这里面好的思想值得学习和吸收
欢迎拍砖

相关文章