Xinxing_Li
Xinxing_Li

HTMLParser 的实现和使用

1. 概览

HTMLParser 在很多地方都有它施展拳脚的地方, 例如在 Vue 中, Vue 把 template 模板字符串编译成 render 函数的过程就用到了 HTMLParser.
要注意的一点是, HTMLParser 做的工作是解析字符串并把参数传递给回调函数, 后续要执行什么操作全部依赖于传入的options中的start end comment chars等钩子函数

1.1 一般的简单 parser 逻辑

  • 初始时若发现第一个 tagName 是 script 或 style, 则先做特殊处理. 原则上这种情况不应该出现
  • while(html) 循环判断当前处理的字符串是否为空
    • 若当前字符串以< !--开头, 则进入注释处理逻辑, 调用 comment 钩子
    • 若当前字符以< /开头, 则进入endTag处理逻辑, 进入内部的 parseEndTag 函数
      1. 检查 stack && 关闭那些特殊闭合方式的 tagName , 例如 和
      2. 若 tagName 不是自闭和节点则入栈
      3. 把 attrs 即id="app"的字符串replace 为{ name:'id', value:'app', escaped }的数据
      4. 调用 start(tagName, attrs, unary) 钩子
    • 若当前字符以<开头, 则进入startTag处理逻辑, 进入内部的 parseStartTag 函数
      parseStartTag 实际上做的工作就是: 找到合适的 tagName 出栈, 调用 end 钩子
    • 其它情况则调用 chars 钩子
  • 收尾工作再次调用 parseEndTag() 来检查标签是否闭合

1.2 Vue 额外增加的内容

  • 大量的正确性检查&&验证
    • 根节点只能有一个
    • 根节点不能是