美文网首页
sizzle引擎

sizzle引擎

作者: 我_巨可爱 | 来源:发表于2017-11-21 15:54 被阅读0次

词法解析

  1. 简单的标签选择器,ID选择器等在内部使用getElementById等方式,但是getElementsByClassName不兼容老式浏览器,需要使用 sizzle 引擎。sizzle中有大量的正则规则匹配字符
  2. js的预解析会通过词法分析器和语法分期器,其中词法分析器就是将字符串解析为背后对应的规则
  3. css解析器其实是从右向左解析的,重要原因是为了“这个 selector不匹配当前元素”
  4. token形式
Token:{  
   value:'匹配到的字符串', 
   type:'对应的Token类型', 
   matches:'正则匹配到的一个结构'
}

解析原理

  1. 涉及知识
  • css位置关系
  • css各种接口
  • css从右向左解析
  1. 当遇到选择器字符串,从右向左解析成Token。然后依旧从右向左使用Exp.find找到应该使用的API,如果找不到会跳过这个Token。接着匹配到的集合为seed集合,其中存储着可能符合结果的序列。最后,如果seed中有元素,selector还有条件,需要继续筛选。
Expr.find = {
      'ID'    : context.getElementById,
      'CLASS' : context.getElementsByClassName,
      'TAG'   : context.getElementsByTagName
}

编译函数

  1. matcher为当前词素前的“终极匹配器”,combinator为位置词素
  2. 当一个选择器有位置词素,那么需要判断其父元素和兄弟元素是否符合规范

好难哪!!

相关文章

网友评论

      本文标题:sizzle引擎

      本文链接:https://www.haomeiwen.com/subject/bpbjvxtx.html