词法解析
- 简单的标签选择器,ID选择器等在内部使用
getElementById
等方式,但是getElementsByClassName
不兼容老式浏览器,需要使用 sizzle 引擎。sizzle中有大量的正则规则匹配字符 - js的预解析会通过词法分析器和语法分期器,其中词法分析器就是将字符串解析为背后对应的规则
- css解析器其实是从右向左解析的,重要原因是为了“这个 selector不匹配当前元素”
- token形式
Token:{
value:'匹配到的字符串',
type:'对应的Token类型',
matches:'正则匹配到的一个结构'
}
解析原理
- 涉及知识
- css位置关系
- css各种接口
- css从右向左解析
- 当遇到选择器字符串,从右向左解析成Token。然后依旧从右向左使用
Exp.find
找到应该使用的API,如果找不到会跳过这个Token。接着匹配到的集合为seed集合,其中存储着可能符合结果的序列。最后,如果seed中有元素,selector
还有条件,需要继续筛选。
Expr.find = {
'ID' : context.getElementById,
'CLASS' : context.getElementsByClassName,
'TAG' : context.getElementsByTagName
}
编译函数
- matcher为当前词素前的“终极匹配器”,combinator为位置词素
- 当一个选择器有位置词素,那么需要判断其父元素和兄弟元素是否符合规范
好难哪!!
网友评论