Vue2.x-AST抽象语法树（笔记）

最新推荐文章于 2023-04-21 18:01:21 发布

我是真的狗

最新推荐文章于 2023-04-21 18:01:21 发布

阅读量596

点赞数 1

分类专栏： Vue2进阶文章标签： js vue.js es6 javascript 前端

本文链接：https://blog.csdn.net/wanghuan1020/article/details/113755870

版权

本文详细探讨了Vue2.x中的AST抽象语法树，包括其概念、相关算法如指针思想、递归及栈的应用，并通过实例介绍了如何手写AST，包括构建开发环境、使用栈来形成AST以及识别attrs。

摘要由CSDN通过智能技术生成

源码链接

https://github.com/wanghuan19961020/Vue2.x-Study-Notes

Vue2.x-AST抽象语法树（笔记）

抽象语法树是什么

Abstract Syntax Tree - 抽象语法树，简称 AST
抽象语法树本质上就是一个 JS 对象
抽象语法树和虚拟节点的关系

相关算法储备

指针思想

题目：试寻找字符串中，连续重复次数最多的字符
```
  'aaaabbbbbcccccccccccccdddddd'
```

指针就是下标，不是C语言中的指针，C语言中的指针可以操作内存。JS中的指针就是一个下标位置。

  i: 0
  j: 1

如果 i 和 j 指向的字一样，那么 i 不动，j 后移
如果 i 和 j 指向的字不一样，此时说明它们之间的字都是连续相同的，让 i 追上 j， j 后移

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>指针思想</title>
</head>
<body>
  <script>
    var str = 'aaaabbbbbcccccccccccccdddddd'
    // 指针
    var i = 0, j = 1
    // 当前重复最多的次数
    var maxRepeatCount = 0
    // 重复次数最多的字符串
    var maxRepeatChar = ''
    // 当 i 还在范围内的时候，应该继续寻找
    while (i <= str.length - 1) {
      
      // 看 i 指向的字符和 j 指向的字符 是不是不相同
      if (str[i] !== str[j]) {
      
        // 和当前重复次数最多的进行比较
        if (maxRepeatCount < j - i) {
      
          // 如果当前文字重复次数 j-i 超过了此时的最大值
          // 就让它称为最大值
          maxRepeatCount = j - i
          // 将 i 指针指向的字符存为 maxRepeatChar
          maxRepeatChar = str[i]
        }
        // 让指针 i 追上指针 j 
        i = j
      }
      // 不管相不相同，j 永远要后移
      j++
    }
    console.log(maxRepeatChar + '重复了' + maxRepeatCount + '次,' + '是连续重复次数最多的字符');
  </script>
</body>
</html>

递归深入

递归题目1

试输出斐波那契数列的前10项，即1、1、2、3、5、8、13、21、34、55试输出斐波那契数列的前10项，即1、1、2、3、5、8、13、21、34、55。然后请思考，代码是否有大量重复的计算？应该如何解决重复计算的问题？
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>递归深入1</title>
</head>
<body>
  <script>
    //  试输出斐波那契数列的前10项，即1、1、2、3、5、8、13、21、34、55
    // 创建一个函数，功能是返回下标为n的这项的数字
    function fib(n) {
      
      // 看下标 n 是不是 0 或者是不是 1，如果是，就返回常数1
      // 如果不是 就递归
      return n === 0 || n === 1 ? 1 : fib(n - 1) + fib(n - 2)
    }
    for (let i = 0; i < 10; i++) {
      
      console.log(fib(i))
    }
  </script>
</body>
</html>

cache 思想

  {
     
    '0': 1,
    '1': 1,
    '2': 2,
    '3': 3,
    '4': 5
  }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>递归深入1</title>
</head>
<body>
  <script>
    //  试输出斐波那契数列的前10项，即1、1、2、3、5、8、13、21、34、55
    // 缓存对象
    var cache = {
      }
    // 创建一个函数，功能是返回下标为n的这项的数字