Sizzle之tokenize
在Sizzle里,大体思路,当为复合选择器时,判断是否支持querySeletorAll,如果不支持则调用自写方法select。
select的功能十分冗长,下面先分析tokenize
在tokenize函数的作用是将形如'ul.topnav > li,div'的选择器解析为
[
[{value:'ul',type:"TAG",matches:['ul']},{value:'.topnav',type:"CLASS",matches:['topnav']},{value:' > ',type:">"},{value:'li',type:"TAG",matches:['li']}],
[{value:'div',type:"TAG",matches:['div']}]
]
每个逗号解析为一个数组,表示一个独立选择器项,每个独立选择器项的选择关系按照CLASS,TAG,ID和关系解析成如上格式。
这种解析的类型是下面进行查找元素的固定格式,先不考虑后面,我们先分析tokenize的实现。
//缓存函数创建函数
var createCache = function(){
//缓存函数共用数组
var keys = [];
return function cache(name,value){
// 当长度大于某常数时,清除老元素,插入新元素
if( keys.push( name ) > 1){
delete cache[ keys.shift() ]
};
return cache[name] = value;
};
}
//缓存函数对象
//这是一个方法,通过这个方法可以将缓存数据保存在这个函数(也是对象)里。
var tokenCache = createCache();
//简易正则过滤对象
var filter = {
TAG: /^(\w+)/,
ID: /^#(\w+)/,
CLASS: /^\.(\w+)/
}
//关系匹配正则
var relation = /^\s*([\>\+\~]|^\s)\s*/;
//逗号正则
var comma = /^\,/;
function tokenize(selector){
var cached = tokenCache[selector];
//缓存中有结果,直接返回
if(cached){
return cached;
}
// 循环条件
var sofar = selector,
// 结果数组
groups = [],
// 匹配参数
matched,
// 一个独立选择器项
token = [],
//辅助参数正则匹配结果
match;
//循环解析选择器
while(sofar){
//首次默认创建一个单独选择器项
//之后通过判断逗号创建
if(!matched || (match = comma.exec(sofar)) ){
if(match){
//保存未解析的选择器
sofar = sofar.slice(match[0].length);
}
groups.push(token = []);
}
//每次循环设置辅助匹配参数为false,如果之后仍无匹配不存在通过break跳出循环
matched = false;
//匹配关系>等
//解析保存结果
if(match = relation.exec(sofar)){
matched = match.shift();
token.push({
value: matched,
type: match[0].replace( /\s+/g, " " )
})
sofar = sofar.slice(matched.length)
}
//匹配选择器CLASS,TAG,ID
//解析保存结果
for(var type in filter){
if(match = filter[type].exec(sofar)){
matched = match.shift();
token.push({
value: matched,
type: type,
matches: match
})
sofar = sofar.slice(matched.length)
}
}
//没有跳出循环。
if ( !matched ) {
break;
} }
//缓存结果并返回
return (tokenCache(selector,groups));
}
console.log(tokenize('ul.topnav > li,div'))
console.log(tokenize('a li'))
这是我模拟输入输出结果写出的函数,jQuery源码中在实现主要功能的基础上进行了大量兼容处理。
缓存在jQuery里面非常常用,在这里重新说一遍基本思路是,将函数输入值key,和输出值保存于缓存对象中,等到下次调用函数,如果缓存对象中有值,则直接读取。
本例的缓存略微复杂,它是利用函数将缓存数据保存于同名对象中。又,作者希望几种缓存共用长度,在这里用了创建缓存函数的函数。
Sizzle之tokenize的更多相关文章
- sizzle分析记录:词法分析器(tokenize)
词法分析器(tokenize)? 词法分析器又称扫描器.词法分析是指将我们编写的文本代码流解析为一个一个的记号,分析得到的记号以供后续语法分析使用. sizzle引入了tokenize这个概念,意义? ...
- jQuery-1.9.1源码分析系列(三) Sizzle选择器引擎——编译原理
这一节要分析的东东比较复杂,篇幅会比较大,也不知道我描述后能不能让人看明白.这部分的源码我第一次看的时候也比较吃力,现在重头看一遍,再分析一遍,看能否查缺补漏. 看这一部分的源码需要有一个完整的概念后 ...
- JQuery Sizzle引擎源代码分析
最近在拜读艾伦在慕课网上写的JQuery课程,感觉在国内对JQuery代码分析透彻的人没几个能比得过艾伦.有没有吹牛?是不是我说大话了? 什么是Sizzle引擎? 我们经常使用JQuery的选择器查询 ...
- jQuery 2.0.3 源码分析Sizzle引擎 - 词法解析
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 浏览器从下载文档到显示页面的过程是个复杂的过程,这里包含了重绘和重排.各家浏览器引擎的工作原理略有差别,但也有一定规则. 简 ...
- jQuery 2.0.3 源码分析Sizzle引擎 - 解析原理
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 先来回答博友的提问: 如何解析 div > p + div.aaron input[type="checkb ...
- jQuery 2.0.3 源码分析Sizzle引擎 - 编译函数(大篇幅)
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 从Sizzle1.8开始,这是Sizzle的分界线了,引入了编译函数机制 网上基本没有资料细说这个东东的,sizzle引入这 ...
- jQuery 2.0.3 源码分析Sizzle引擎 - 超级匹配
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 通过Expr.find[ type ]我们找出选择器最右边的最终seed种子合集 通过Sizzle.compile函数编译器 ...
- 解密jQuery内核 Sizzle引擎筛选器 - 位置伪类(一)
本章开始分析过滤器,根据API的顺序来 主要涉及的知识点 jQuery的组成 pushStack方法的作用 sizzle伪类选择器 首页我们知道jQuery对象是一个数组对象 内部结构 jQuery的 ...
- jQuery 2.0.3 源码分析Sizzle引擎 - 高效查询
为什么Sizzle很高效? 首先,从处理流程上理解,它总是先使用最高效的原生方法来做处理 HTML文档一共有这么四个API: getElementById 上下文只能是HTML文档 浏览器支持情况:I ...
随机推荐
- poj 1088 滑雪_记忆化搜索
题意:略 直接用记忆化搜索就行了 #include<cstdio> #include<iostream> using namespace std; int n,m; int m ...
- xml中,button改变背景颜色方法
在画几个设置界面,用到了button控件,对于button空间的背景色在不同状态下的颜色改变方法,做了一下尝试,发现了两种背景颜色改变的方法,就总结了下. 方法一尝试了好多遍才好,要点在于,在sele ...
- HttpContext详解【转】
HttpContext 类:封装有关个别 HTTP 请求的所有 HTTP 特定的信息. 在处理请求执行链的各个阶段中,会有一个对象在各个对象之间进行传递,也即会保存请求的上下文信息,这个对象就是Htt ...
- 依赖注入及AOP简述(二)——工厂和ServiceLocator .
2.2. 工厂模式 基于手工构建组件的诸多弱点,1995年“大师4人组”(GoF)在其经典著作<DesignPatterns>一书中提出了“工厂模式”,这种模式在一定程度上有效的解决 ...
- <!--转换office时需要此配置 --> <identity impersonate="true" />
1.需要对Office 进行操作时 ,添加权限 <!--转换office时需要此配置 --> <identity impersonate="true" /> ...
- 解决水晶报表在IIS7下的权限问题。
http://52live.blog.sohu.com/69025059.html 解决水晶报表在IIS7下的权限问题. 有些事情真是“踏破铁鞋无觅处,得来全不费功夫”!困扰了我一段时间的水晶报表在I ...
- bash基础知识
站在用户登录的角度来说,SHELL的类型:登录式shell: 正常通常某终端登录 su - USERNAME su -l USERNAME 非登录式shell: su USERNAME 图形终端下打开 ...
- EC读书笔记系列之18:条款47、48
条款47 请使用traits classes表现类型信息 记住: ★Traits classes使得“类型相关信息”在编译期可用.它们以templates和“templates特化”完成实现 ★整合重 ...
- 南阳师范学院ACM集训队博客使用方法
南阳师范学院ACM集训队博客使用方法 为方便大家交流,我们使用的是同一个用户名和密码,所以请不要随意修改用户名和密码,不然大家都登不上了,谢谢! 首先进入主页:http://www.cnblogs.c ...
- BZOJ 3503: [Cqoi2014]和谐矩阵( 高斯消元 )
偶数个相邻, 以n*m个点为变量, 建立异或方程组然后高斯消元... O((n*m)^3)复杂度看起来好像有点大...但是压一下位的话就是O((n*m)^3 / 64), 常数小, 实际也跑得很快. ...