章节
问答
笔记
评论
占位
占位

Sizzle词法解析(上)

什么是词法分析器(tokenize)?

词法分析器又称扫描器,词法分析是指将我们编写的文本代码流解析为一个一个的记号,分析得到的记号以供后续语法分析使用

'div > div.aaron input[name=ttt]'是一个相对复杂的选择器,这样的结构在不支持高级API的浏览器中是无法直接通过获取的,那么所有选择器的库就必须要干的一件事,把复杂选择器按照一样的设计规则,分解成浏览器原始API能够识别的结构,然后通过其他的方法找个这个结构。所以这里就要引入一个切割的算法了,也有点类似编译原理的词法分析。

所以引擎在遇到无法直接处理的复杂选择器时,就需要按照内部的规则进行分组了。

Sizzle的tokenize格式如下 :

{
   value:'匹配到的字符串', 
   type:'对应的Token类型',
   matches:'正则匹配到的一个结构'
}

tokenize需要解析的几种情况:

多重选择器,逗号分组

selector = 'div,input'

在出现逗号分隔符的时候,就说明选择所有指定的选择器的组合结果,所以需要分割成各自的处理模块,这种事情当然交给正则来做是最合适的

A: 常规的思路先是通过split(,)先把选择器劈成二部分,然后依次处理各自的模块

B:sizzle的思路则是循环一个一个分组出来的

我们假设一个复杂的选择器

div.aaron > input[name=ttt] , div p > span

这里涉及了3大块

1、分组逗号

2、层级关系

3、每种元素处理

具体我们参考下我写的代码区域

$("#test2").click(function() {
   //sizzle解析区域
}

其中分3大块的处理,其实很明了,因为这个案例的问题,我们没有层级关系的具体代码,下章会详细讲解,我们先理解这个思路。

sizzle对于分组过滤处理都用正则,其中都有一个特点,就是都是元字符^开头,限制匹配的初始,所以tokenize也是从左边开始一层一层的剥离。

其中会用到的正则:

//分组
var rcomma = /^[\x20\t\r\n\f]*,[\x20\t\r\n\f]*/;
//关系符
var rcombinators = /^[\x20\t\r\n\f]*([>+~]|[\x20\t\r\n\f])[\x20\t\r\n\f]*/;
//空白
var whitespace = "[\\x20\\t\\r\\n\\f]";

所以最终的结构:

groups: [
  tokens: {
    matches: ? type : ? value : ?
  },
  tokens: {
    matches: ? type : ? value : ?
  }
]

当然为什么是这样的结构,这是sizzle内部的一个解析规则罢了。后面就用这个规则去做匹配与筛选。

任务

?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?