首页 > 代码库 > Sizzle之tokenize
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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。