Vue2剥丝抽茧-模版编译之生成AST

AST​ 即抽象语法树，在 虚拟dom、eslint、babel​ 都有接触过了，简单来说就是一种描述 dom​ 的数据结构。通过 AST​ 可以还原 dom​ ，也可以把 dom​ 转为 AST 。,因为是树的结构，所以肯定有一个 children​ 字段来保存子节点，同时有 parent​ 来保存父节点。其他的话还有 tag​ 名，节点类型，type = 1​ 代表普通节点类型，type=3​ 表示普通文本类型，type=2 代表有插值的的文本类型。,提供一个函数 createASTElement​ 来生成 dom 节点，后续会用到。,因为 dom 是一对一对出现的，一对中可能又包含多对，因此和括号匹配一样，这里就缺少不了栈了。,遇到开始标签就入栈，遇到结束标签就出栈，这样就可以保证栈顶元素始终是后续节点的父节点。,举个例子，对于 <div><span>3<5吗</span><span>?</span></div> 。,添加 stack​ 变量、添加 currentParent​ 保存当前的父节点、添加 root 保存根节点。,接下来完善 模版编译之分词​ 中遗留的 start​ 、end、chars 三个回调函数。,start 函数,先调用 createASTElement​ 生成一个 AST​ 节点，如果当前是第一个开始节点，就将 root 赋值，接下来判断是否是出一元节点。,如果是一元节点直接调用 closeElement ，将当前节点加入到父节点中。,end 函数,出栈，更新当前父节点，并且将出栈的元素加入到父节点中。,chars 函数,这里只考虑了 type​ 为 3 的普通文本节点。,结合 模版编译之分词 中实现的分词，整体代码如下：,输入 <div><span>3<5吗</span><span>?</span></div> 。,最终生成的 AST 结构如下：,,这篇文章实现了最简单情况的 AST​ 生成，了解了整个的结构，下一篇文章会通过 AST​ 生成 render 函数。