第二章 HTML解析器

  本来是想写一篇超详细，跟着一步一步做就能搞出一个简单框架的笔记的。但写了一半变化检测才发现太难了，因为一个程序总是在一步一步解决问题的过程写出来的，想要每步按顺序写出来并加以解释太累了。只能是摘要说明了。

  为了将DOM和数据绑定在一起，我们需要将HTML模板解析成AST，然后再根据AST生成渲染函数。最后通过渲染函数渲染出整个页面。本章讲的就是将模板解析成AST的过程。即将：

<div>
  <span>{{message}}</span>
</div>

编译成类似以下对象

{
    type: 1,
    tag: "div",
    attrsList: [],
    attrsMap: {},
    children: [
        {
            type: 1,
            tag: "span",
            attrsList: [],
            attrsMap: {},
            parent: {tag:"div"...},
            children: [],
            text: "{{message}}",
            expression: "_s(message)",
            hasBindings: false
        }
    ],
    text: "\n        ",
    expression: null,
    hasBindings: false
}

  Vue的解析是采用正则进行匹配的方式，但因为正则表达式实在太反人类了，我即写不出也理解不了，所以我选择用逐个字符读出来的方式来实现解析。通过遍历模板字符串，当遇到关键的字符则交给对应的函数进行处理，类似状态机的形式：

image.png

TO BE CONTINUED

转载于:https://www.jianshu.com/p/65a3f3cb4c24