对AST树的理解

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第19天，点击查看活动详情

已经把工程的配置做好了,可以再了解一下模板转html过程，咱们是拿到template模版-->..编译-->形成真实dom.

编译就是这次我们要做的重要的内容，我们拿到template然后需要转化问AST语法树，这里咱们重点讲一点AST语法树，咱们首先了下什么是AST,AST是三个单词的缩写，A是Abstract抽象的意思,S是Syntax语法的意思，T是tree树的意思，连起来就是抽象语法树，它是源代码的抽象语法的树状描述(其实所有的语法都是可以形成树状结构)，为啥要转化为树状结构，因为比我们直接操作源代码更加方便，更加简洁，变成树状结构是方便我们去优化我们的树状结构，树状结构是由规则的，有规则就可以修改优化，完成之后，在转化为我们的源代码， 咱们可以看一个例子，一个函数是如何用AST语法树描述的

function fn( a,b) {}
// AST对函数fn的描述
{
   "type": "FunctionDeclaration"
   "id": {
       "type": "Identifier", // 指示器
       "name: "fn" // 指示的名称
   },
   "params": [
     {
        "type": "Identifier",
        "name: "a"
     },
     {
        "type": "Identifier",
        "name: "b"
     }

   ],
   "body": {
      "type": "BlockStatement", // 块级描述
       "body": [],
   },
   "generator": false, // 是否是生成器
   "expression": false, // 是否是表达式
   "async": false // 是否是异步
}

我们是可以对这个描述进行修改，完成之后，我们是可以对其在编译成源码的我们可以看一下模版的AST树会更加直观

html模版AST的解析示例
{
  tag: 'div',
  type: 1,
  attrs: [
     {   name: 'id',value:'app' },
     {  name: 'style',value: {  color: blue; font-size: 20p} }
  ],
  children: [
     {
        type: 3,
        text: 'hello',
     },
     {
        type: 1,
        tag: 'h1',
        attrs: null,
     }
  ],
}

上面只是AST的树形结果不是虚拟节点，AST属性结构方便我们处理一些自定义标签，如v-if,v-for等一些自定义指令，甚至优化标签，

咱们再说一下后面步骤，

1 转化为AST树之后-〉render()(使用render函数 _c() _v() _s())

2 render()->虚拟Dom

3 设置patch-> 打补丁到真实dom