5. Vue 【进阶】- AST 抽象语法树

Vue 【进阶】- AST 抽象语法树

1. AST 简介

在开发Vue的时候编译器会将模板语法编译成正常的HTML语法，而直接编译的时候是非常困难的，因此此时会借助AST抽象语法树进行周转，进而变为正常的HTML语法，使编译工作变得更加简单。

抽象语法树的本质上是一个JS对象，Vue在审视所有HTML结构时是以字符串的新式进行的，最终将其解析为JS对象。AST抽象语法树服务于模板编译，将一种语法翻译为另一种语法。在Vue中将模板语法编译为HTML语法，自己作为中转站。

2. 抽象语法树和虚拟节点的关系

AST 只会在 编译阶段 出现，用来描述 template 模板
虚拟DOM 只在运行时出现，用来描述 dom, render 的时候产生新的 虚拟dom

首次渲染是很消耗性能的，所以，用运行时版本，使用webpack -> vue-loader 可以将我们的 vue 文件在打包编译时就转成了一个个 render 函数

为什么 AST 不可以直接当 virtual DOM 呢？为什么我们要写 render 函数，而不是直接写虚拟 DOM？
vue 的响应式机制是数据改变时重新执行 render 函数，生成新的虚拟 dom，然后 diff 比对、渲染。如果直接编译成虚拟 dom，数据改变时如何更新虚拟 dom？AST 重新生成虚拟 dom？做不到呀，因为代码没变。

其实 AST 和 virtual DOM 的样子都差不多

AST的样子

虚拟dom的样子

3. 手撸解析为 AST 的过程

[https://www.cnblogs.com/caijinghong/p/16918948.html]建议先看这篇栈相关处理得算法

index.js

import parse from './parse'
 
var template = `
  <div>
    <h3>你好</h3>
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
  </div>
`
 
console.log(parse(template))

parse.js

// parse, 主函数
export default function(template) {
  template = template.replace(/\s*/g,'')
  // console.log(template)
  // 指针
  let index = 0,
  // 剩余
  tail = template,
  // 栈
  stack = [], 
  // 匹配头标签<div>
  RegExp1 = /^\<(\w+)\>/,
  // 匹配尾部 content</div>和前面内容
  RegExp2 = /(.*?)(\<\/\w+\>)/;
 
  while(index < template.length) {
    if(RegExp1.test(tail)) {
      stack.push({
        tag: RegExp.$1,
        type: 1,
        children: [] 
      })
 
      index += RegExp.$1.length + 2
      tail = template.substring(index)
    } else if(RegExp2.test(tail) && !RegExp1.test(tail)){
      let endstack = stack[stack.length - 1]
 
      if(RegExp.$1) {
        endstack.children.push({
          text: RegExp.$1,
          type: 3
        })
      }
 
      let child = stack.pop()
      // 最后的返回值
      if(!stack.length) return child
 
      stack[stack.length - 1].children.push(child)
 
      index += (RegExp.$1.length + RegExp.$2.length)
      tail = template.substring(index)
    }
  }
}

最后得 AST 树

加入属性版

var template = `
  <div>
    <h3 class="test" name="666" style="color:red">你好</h3>
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
  </div>
`

parse.js

import handleAttr from './handleAttr'
 
// parse, 主函数
export default function(template) {
  // 去掉首尾
  template = template.replace(/(^\s*|\s*$)/g,'')
  // 指针
  let index = 0,
  // 剩余
  tail = template,
  // 栈
  stack = [], 
  // 匹配头标签<div>,还能匹配属性props
  RegExp1 = /^\<(\w+)(\s*.*?)\>/,
  // 匹配尾部 content</div>和前面内容
  RegExp2 = /(.*?)(\<\/\w+\>)/;
 
  while(index < template.length) {
    if(RegExp1.test(tail)) {
      let obj = { tag: RegExp.$1, type: 1, children: [] }
      // 有 attrs
      if(RegExp.$2) {
        obj.attrs = [handleAttr(RegExp.$2)]
      }
      stack.push(obj)
 
      // 加上'<>'的长度
      index += (RegExp.$1.length + 2 + RegExp.$2.length)
      // 并且清掉剩下的头部的空格
      tail = template.substring(index).replace(/(^\s*)/g,'') 
      // 加上空格的长度
      index += RegExp.$1.length
    } else if(RegExp2.test(tail) && !RegExp1.test(tail)){
      let endstack = stack[stack.length - 1]
 
      if(RegExp.$1) {
        endstack.children.push({
          text: RegExp.$1,
          type: 3
        })
      }
 
      let child = stack.pop()
      // 最后的返回值
      if(!stack.length) return child
 
      stack[stack.length - 1].children.push(child)
 
      index += (RegExp.$1.length + RegExp.$2.length)
      tail = template.substring(index).replace(/(^\s*)/g,'')
      index += RegExp.$1.length
    }
  }
}

handleAttr.js 处理属性对象

export default function(attrs) {
  let obj = {}
  let attrsToArr = attrs.split(' ')
 
  attrsToArr
    .filter(item => item)
    .forEach(item => {
      let arrData =item.split('=')
      obj[arrData[0]] = arrData[1]
    })
 
  return obj
}

最后处理得如下

属性的写法改进

原来的写法 split 通过空格来处理得数组有个缺陷， <h3 class="test name" name="666" style="color:red">你好</h3>，这样处理得数组就不对，所以进行改进

方法一(指针法)

一个变量作为保存结果的作用，每次成功匹配变回覆盖
遍历到等号前的字符串去前空格后(/(^\s*)/g)，便可变量作为对象的key，清空变量
匹配到'"'则开始保存值value在此遇到'"'结束

方法2️⃣（正则）
handleAttr.js

export default function(attrs) {
  let obj = {}
  let attrsToArr = attrs.match(/(\w+\=\"[\w|\s|\:]+\")+/g)
 
  console.log(attrs, attrsToArr)
 
 
  attrsToArr
    .forEach(item => {
      let arrData =item.split('=')
      obj[arrData[0]] = arrData[1]
    })
 
  return obj
}

大功告成！！！