深入浅出vue.js 第九章 解析器

解析器的作用

解析器要实现的功能是将模板解析成AST

例如：

<div>
	<p>{{ name }}</p>
</div>

它转换成AST后

    {
      tag:'div'
      type:1,
      staticRoot:false,
      static:false,
      plain:true,
      parent:undefined,
      attrsList:[],
      attrsMap:{},
      children:[
        {
          tag:"p",
          type:1,
          staticRoot:false,
          static:false,
          plain:true,
          parent:{tag:'div',...},
          attrsList:[],
          attrsMap:{},
          children:[{
            type:2,
            text:"{{name}}",
            static:false,
            expression:"_s(name)"
          }]
        }
      ]
    }

其实AST并不是什么神奇的东西，它只是用JavaScript中的对象来描述一个节点，一个对象表示一个节点，对象中的属性用来保存节点所需要的各种数据。当很多个独立的节点通过parent属性和children属性连在一起时，就变成了一个数，而这样一个用对象描述的节点树其实就是AST

总结

解析器的作用就是通过模板得到AST（抽象语法树）

生成AST的过程需要借助HTML解析器，当HTML解析器触发不同的钩子函数时，我们以构建出不同的节点，

随后，我们通过栈来得到当前正在构建的节点的父节点，然后将构建出的节点添加到父节点的下面，最终，当HTML解析器运行完毕后，我们就可以得到一个完整的带DOM层级关系的AST。