wu的小博客

Vue.js 3设计与实现（6）支持动态的副作用函数

Fri, 29 Aug 2025 00:00:00 +0000

  // 上面的副作用函数时写死的，如何动态添加副作用函数
  {
    let data = { text: '文字块' }

    let activeEffect
    const effect = (fn) => {
      activeEffect = fn
      fn()
    }
    const bucket = new Set()

    const obj = new Proxy(data, {
      get(target, key) {
        activeEffect && bucket.add(activeEffect)
        return target[key]
      },
      set(target, key, val) {
        target[key] = val
        bucket.forEach(c => c())
        return true
      }
    })


    effect(() => {
      let a = document.createElement('li')
      a.innerText = obj.text
      a.style.cssText = 'background:green;border-radius:4px;margin:3px'
      document.body.appendChild(a)
    })

    setTimeout(() => {
      obj.text = '文字块2'
      obj.noExist = '111'    // 也触发了重新执行，原对象中没有这个属性
    }, 1000)

  }

  console.log('问题： 添加对象设置别的key也会触发响应');
  log('-----------------------------------------重新设计桶模型');

  // target -- key -- effectFn
  {
    const bucket = new WeakMap()

    const data = { text: 'bucket 2.0' }
    const obj = new Proxy(data, {
      get(target, key, val) {
        if (!activeEffect) {
          return target[key]
        }
        if (!bucket.get(target)) {
          bucket.set(target, new Map())
        }
        let depsMap = bucket.get(target)
        if (!depsMap.get(key)) {
          depsMap.set(key, new Set())
        }
        let deps = depsMap.get(key)
        deps.add(activeEffect)
        return target[key]
      },
      set(target, key, val) {
        target[key] = val
        const depsMap = bucket.get(target)
        if (!depsMap) return;
        const effects = depsMap.get(key)
        effects && effects.forEach(v => v())
        return true
      }
    })
    let activeEffect;
    const effect = (fn) => {
      activeEffect = fn
      fn()
    }
    effect(() => {
      let a = document.createElement('li')
      a.innerText = obj.text
      a.style.cssText = 'background:green;border-radius:4px;margin:3px'
      document.body.appendChild(a)
    })
    setTimeout(() => {

      obj.text = 'bucket 2.0--'
      obj.noExist = '111' // 不会再触发，因为depsMap中找不到noExist对应的副作用集合
    }, 1000)

  }

  log('---------------------------------------函数封装、分支切换和cleanup');

  {
    let activeEffect
    const bucket = new WeakMap
    const effect = (fn) => {
      const effectFn = () => {
        cleanup(effectFn)
        activeEffect = effectFn
        fn()
      }
      effectFn.deps = []
      effectFn()
    }
    const track = (target, key) => {
      if (!activeEffect) {
        return target[key]
      }

      let depsMap = bucket.get(target)
      if (!depsMap) {
        bucket.set(target, (depsMap = new Map()))
      }
      let deps = depsMap.get(key)
      if (!deps) {
        depsMap.set(key, (deps = new Set()))
      }
      deps.add(activeEffect)
      activeEffect.deps.push(deps)
    }

    const trigger = (target, key, val) => {
      const depsMap = bucket.get(target)
      if (!depsMap) return;
      const effects = depsMap.get(key)
      /*
        此处如果遍历effects，会导致死循环
        let s = new Set([1])
        s.forEach(()=>{
          // cleanup操作
          s.delete(1)    
          // 触发getter 后的 track操作
          s.add(1)
          为避免这个情况，可基于原数据单独定义新Set，遍历这个Set
        })
      
      */

      const effectsToRun = new Set(effects)
      effectsToRun.forEach(v => v())
    }
    let data = { text: 'cleanup', ok: 1, foo: 1, bar: 1 }
    const obj = new Proxy(data, {
      get(target, key, val) {
        track(target, key)
        return target[key]
      },
      set(target, key, val) {
        target[key] = val
        trigger(target, key, val)
        return true
      }
    })

    const cleanup = (effectFn) => {
      for (let deps of effectFn.deps) {
        deps.delete(effectFn)
      }
      effectFn.deps.length = 0
    }

    effect(() => {
      let a = document.createElement('li')
      a.innerText = obj.ok ? obj.text : 'not'
      a.style.cssText = 'background:green;border-radius:4px;margin:3px'
      document.body.appendChild(a)
    })
    /*
    {
        {ok:true,text:'cleanup'}: {
          ok: [effectFn],
          text:[]
        }
    }
    */

    obj.ok = false
    setTimeout(() => {
      obj.text = 'cleanup2'
    }, 1000)
    let tmp;



  }


  log('---------------------------------------嵌套的effect与effect栈');
  /*
  在Vue内部，组件的渲染函数就是在一个effect中执行的
  那么，当一个组件渲染了另外一个组件，例如
  const Bar = {
    render(){}
  }
  const Foo = {
    render(){
      return <Bar />
    }
  }
  对应的effect函数调用是
  effect(() => {
    Foo().render()
    effect(() => {
      Bar().render()
    }
  })

  effect(() => {
    console.log('effect1执行');
    effect(() => {
      console.log('effect2执行');
      obj.bar
    })
    obj.foo
  })
  无论修改obj.foo还是obj.bar  打印的都是 effect2执行
  这是因为我们的activeEffect 全局变量只有一个，而嵌套函数，最内层函数最后执行，那么activeEffect永远指向的
  都是内层的副作用函数。最终形成的 对应关系如下
        bar --》  [内层effect]
  obj 
        foo --》  [内层effect]

  因为effect是嵌套的，自然我们想到了用栈来记录，每一级的副作用函数
  
  */
  {
    let activeEffect;
    const effectStack = []

    const bucket = new WeakMap()
    const effect = (fn) => {
      const effectFn = () => {
        cleanup(effectFn)
        activeEffect = effectFn
        effectStack.push(effectFn)
        fn()
        effectStack.pop()
        activeEffect = effectStack[effectStack.length - 1]
      }
      // 初始化deps是空数组，依赖这个副作用的所有变量的deps
      effectFn.deps = []
      effectFn()
    }

    const track = (target, key) => {
      if (!activeEffect) {
        return target[key]
      }

      let depsMap = bucket.get(target)
      if (!depsMap) {
        bucket.set(target, (depsMap = new Map()))
      }
      let deps = depsMap.get(key)
      if (!deps) {
        depsMap.set(key, (deps = new Set()))
      }
      deps.add(activeEffect)
      activeEffect.deps.push(deps)
    }

    const trigger = (target, key, val) => {
      const depsMap = bucket.get(target)
      if (!depsMap) return;
      const effects = depsMap.get(key)
      const effectsToRun = new Set()
      effects && effects.forEach(effectFn => {
        if (effectFn !== activeEffect) {
          effectsToRun.add(effectFn)
        }
      })
      effectsToRun.forEach(v => v())
    }
    let data = { text: 'cleanup', ok: 1, foo: 1, bar: 1 }
    const obj = new Proxy(data, {
      get(target, key, val) {
        track(target, key)
        return target[key]
      },
      set(target, key, val) {
        target[key] = val
        trigger(target, key, val)
        return true
      }
    })

    // 在当前effectFn依赖的 副作用Set列表中，移除当前的effectFn
    const cleanup = (effectFn) => {
      for (let deps of effectFn.deps) {
        deps.delete(effectFn)
      }
      effectFn.deps.length = 0
    }

    // effect(() => {
    //   console.log('2--effect1执行');
    //   effect(() => {
    //     console.log('2--effect2执行');
    //     obj.bar
    //   })
    //   obj.foo
    // })
    // obj.foo = 3

    // obj.bar = 3
    console.log(bucket);

    effect(() => {
      console.log(123);

      obj.bar++
      /**
      相当于 obj.bar = obj.bar + 1，初始化时 在effectFn中fn读取bar触发track方法后，触发trigger，因为当前副作用函数
      还在执行，又再次触发了 副作用的执行，导致effectFn递归调用自己，产生栈溢出

      添加判断，如果当前
      */

    })

    obj.bar = 6
  }

  log('---------------------------------------调度执行');
  log('---------------------------------------computed与watch的实现');


</script>

Vue.js 3设计与实现（5）简单的响应系统

Fri, 29 Aug 2025 00:00:00 +0000

副作用函数：相对于纯函数而言，函数执行后对其他地方产生了影响

  // 副作用函数effect中，读取了一个变量，在这个变量改变时，需要重新执行副作用函数
  const data = { text: 'hello' }
  const bucket = new Set()
  const obj2 = new Proxy(data, {
    get(target, key) {
      bucket.add(effect)
      return target[key]
    },
    set(target, key, val) {
      target[key] = val
      bucket.forEach(c => c())
      return true
    }
  })
  function effect() {
    document.body.appendChild(document.createTextNode(obj2.text))
  }
  effect()
  setTimeout(() => {
    obj2.text = 'changed text'
  }, 1000)
  console.log('问题： 副作用函数写死，不灵活');

Vue.js 3设计与实现（4）什么是组件？简单的渲染器

Fri, 29 Aug 2025 00:00:00 +0000

组件就是一组DOM元素的封装，这组DOM元素就是组件要渲染的内容

无论是使用模板还是直接手写渲染函数，对于一个组件来说，它要渲染的内容都是通过渲染函数产生的，然后渲染器再把渲染函数返回的虚拟DOM渲染成真实DOM

渲染器的功能 vnode –> 真实DOM

  const vnode = {
    tag: 'div',
    props: {
      onClick() {
        alert('click')
      }
    },
    children: 'click me'
  }

  const renderer = (vnode, root) => {
    const { tag, props, children } = vnode
    let d = document.createElement(tag)
    for (let key in props) {
      let event = key.slice(2).toLowerCase()
      if (key.startsWith('on')) {
        d.addEventListener(event, props[key])
      }
    }
    if (typeof children === 'string') {
      d.appendChild(document.createTextNode(children))
    } else if (Array.isArray(children)) {
      for (let child of children) {

        renderer(child, d)
      }
    }
    root.appendChild(d)
  }
  renderer(vnode, document.querySelector('#app2'))

自定义组件渲染

使用tag用来区分原生HTML标签，function组件和类组件

<div id="app3"></div>

// 函数式组件
const MyComponent = () => {
    return {
      tag: 'div',
      props: {
        onClick() {
          alert('click my component')
        }
      },
      children: 'click my component'
    }
  }
// 类组件
  const MyStateComponent = {
    render() {
      return {
        tag: 'div',
        props: {
          onClick() {
            alert('click my MyStateComponent')
          }
        },
        children: 'click my MyStateComponent'
      }
    }
  }
// renderer渲染器
  const renderer2 = (vnode, container) => {
    if (typeof vnode.tag === 'object') {
      mountStateComponent(vnode, container)
    } else if (typeof vnode.tag === 'function') {
      mountComponent(vnode, container)
    } else if (typeof vnode.tag === 'string') {
      mountElement(vnode, container)
    }
  }
// 挂载节点
  const mountElement = (vnode, container) => {
    const { tag, props, children } = vnode
    let dom = document.createElement(tag)
    for (let key in props) {
      if (key.startsWith('on')) {
        const event = key.slice(2).toLowerCase()
        dom.addEventListener(event, props[key])
      }
    }
    if (typeof children == 'string') {
      dom.appendChild(document.createTextNode(children))
    } else if (Array.isArray(children)) {
      for (let child of children) {
        renderer2(child, dom)
      }
    }
    container.appendChild(dom)
  }
// 挂载函数式组件
  const mountComponent = (vnode, dom) => {
    const subtree = vnode.tag()
    renderer2(subtree, dom)
  }
// 挂载类组件
  const mountStateComponent = (vnode, dom) => {
    const subtree = vnode.tag.render()
    renderer2(subtree, dom)
  }

  const vnode2 = {
    tag: 'div',
    children: [
      { tag: MyComponent },
      { tag: MyStateComponent },
    ]
  }
  renderer2(vnode2, document.querySelector('#app3'))

Vue.js 3设计与实现（3）运行时还是编译时，tree Shaking如何优化？

Thu, 14 Aug 2025 00:00:00 +0000

框架还需要考虑的是做成运行时、编译时还是运行时+编译时，前者对应React和Svelte。

编译时，对应的是用户可以写模板，提供和HTML类型的写法；纯运行时，用户只能写渲染函数，提供灵活性（React创造了JSX，也可以写模板）

Vue.js最终选择了后者。优点在于：因为有模板编译的步骤，框架可以根据用户的模板加入动态标记，给后面的更新提供优化。

运行时渲染的示例

const obj = {
    tag: 'div',
    children: [{ tag: 'span', children: 'hello ' }]
  };
  const Render = (obj, root) => {
    const { tag, children } = obj;
    let dom = document.createElement(tag);
    if (Array.isArray(children)) {
      for (let child of children) {
        Render(child, dom);
      }
    } else if (typeof children === 'string') {
      dom.textContent = children;
    }
    root.appendChild(dom);
  };
  const app1 = document.querySelector('#app1');
  Render(obj, app1);
  obj.tag = 'h2';
  Render(obj, app1);

Tree-Shaking

使用ESM管理模块时，才会有效

  //
  // // input.js
  // import { foo } from "./util";
   // 标记foo函数没有副作用，是纯函数，可以正常进行Tree-Shaking，没有其他的依赖就可以视为Dead Code移除了
  // /*#__PURE__*/ foo()

  // // util.js
  // export function foo(obj){
  //     obj && obj.foo
  // }
  // export function bar(obj){
  //     obj && obj.bar
  // }

  // vite@4.x  或以下
  // npx vite build
  // 打包结果内容为空

Vue的ESM类型的产物的使用场景

  // vue.esm-boundler.js    给打包工具用
  // vue.esm-broswer.js    <script type="module"

Vue.js 3设计与实现（2）js计算和DOM计算的性能比较

Wed, 13 Aug 2025 00:00:00 +0000

Vue.js 3 设计与实现（2）js 计算和 DOM 计算的性能比较

console.time('js计算')
const app = []
for (let i = 0; i < 10000; i++) {
  const div = { tag: 'div' }
  app.push(div)
}
console.timeEnd('js计算')

console.time('DOM计算')
const apps = []
for (let i = 0; i < 10000; i++) {
  apps.push(document.createElement('div'))
}
console.timeEnd('DOM计算')

可以看到 JS 计算耗时和 DOM 计算耗时不在一个量级，所以用 JS 的性能损耗来换取声明式的书写是值得的

Vue.js 3设计与实现（1）框架设计概览

Tue, 12 Aug 2025 00:00:00 +0000

Vue.js 3设计与实现（1）框架设计概览

作为学习者，在学习框架时，应该从全局角度对框架的设计有清晰的认知，否则很容易被细节困住，看不清全貌

从范式上看，视图层框架分为命令式和声明式，命令式关注过程、性能最好，但不好维护；声明式关注结果，性能也不错，好维护

声明式代码：更新性能 = diff性能 + 命令式更新性能

三种更新页面方式，按三个维度对比： innerHTML模板 < 虚拟DOM < 原生JavaScript 心智负担中等心智负担小心智负担大可维护性中等性能不错可维护性差性能差性能不错性能高

innerHTML通过拼接HTML实现，但是拼接字符串有一定的心智负担虚拟DOM提供给用户声明式操作，不需要关心更新过程，没有心智负担原生JavaScript需要手动创建、删除、修改大量DOM元素，操作过程的维护带来巨大的心智负担

控制框架体积–构建工具提供的预定义变量提供完善的警告信息意味着需要写更多的代码，生产环境需要控制代码体积，解决方式是添加构建工具中预定义变量，例如__DEV__ 在构建生产环境代码时，工具会将__DEV__置为false，这段代码会变为dead code，后续会被移除掉

Tree-Shaking – 使用ESM模块、副作用(调用函数时，对外部产生影响)

Leetcode 面试题 05.04. 下一个数

Sat, 12 Apr 2025 00:00:00 +0000

面试题 05.04. 下一个数

提示

中等

一份Canvas实现的贪吃蛇小游戏

Sat, 12 Apr 2025 00:00:00 +0000

预览地址

<!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>Document</title>
    <style>
      #canvas {
        background-color: grey;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      // 定义游戏的尺寸
      const width = 400
      const height = 400
      const cellSize = 20

      // 定义贪吃蛇的方向
      const directions = {
        LEFT: { x: -1, y: 0 },
        RIGHT: { x: 1, y: 0 },
        UP: { x: 0, y: -1 },
        DOWN: { x: 0, y: 1 }
      }

      // 初始化 canvas 元素
      const canvas =
        document.getElementById('canvas')
      canvas.width = width
      canvas.height = height
      const ctx = canvas.getContext('2d')

      // 定义贪吃蛇的初始位置和方向
      let snake = [{ x: 0, y: 0 }]
      let direction = directions.RIGHT

      // 定义游戏的状态
      let isPlaying = false
      let score = 0

      // 定义食物的位置
      let food = { x: 0, y: 0 }

      // 在指定位置绘制一个正方形
      function drawCell(x, y) {
        ctx.beginPath()
        ctx.rect(
          x * cellSize,
          y * cellSize,
          cellSize,
          cellSize
        )
        ctx.fill()
      }

      // 绘制贪吃蛇
      function drawSnake() {
        snake.forEach((cell) =>
          drawCell(cell.x, cell.y)
        )
      }

      // 绘制食物
      function drawFood() {
        drawCell(food.x, food.y)
      }

      // 随机生成一个食物
      function generateFood() {
        food.x = Math.floor(
          Math.random() * (width / cellSize)
        )
        food.y = Math.floor(
          Math.random() * (height / cellSize)
        )
      }

      // 检查贪吃蛇是否吃到食物
      function checkFood() {
        if (
          snake[0].x === food.x &&
          snake[0].y === food.y
        ) {
          score++
          snake.push({
            ...snake[snake.length - 1]
          })
          generateFood()
        }
      }
      // 更新贪吃蛇的位置
      function updateSnake() {
        const head = { ...snake[0] }

        head.x += direction.x
        head.y += direction.y

        // 检查贪吃蛇是否碰到了边界
        if (
          head.x < 0 ||
          head.y < 0 ||
          head.x >= width / cellSize ||
          head.y >= height / cellSize
        ) {
          // 如果碰到了边界，游戏结束
          isPlaying = false
          return
        }

        // 检查贪吃蛇是否碰到了自己
        if (
          snake
            .slice(1)
            .some(
              (cell) =>
                cell.x === head.x &&
                cell.y === head.y
            )
        ) {
          // 如果碰到了自己，游戏结束
          isPlaying = false
          return
        }

        // 更新贪吃蛇的位置
        snake.unshift(head)
        snake.pop()
      }

      // 绘制游戏画面
      function draw() {
        // 清空画布
        ctx.clearRect(0, 0, width, height)

        // 绘制贪吃蛇
        drawSnake()

        // 绘制食物
        drawFood()
      }

      // 游戏的主循环
      function tick() {
        if (isPlaying) {
          updateSnake()
          checkFood()
          console.log(12)
          draw()
        } else {
          alert('game over')
          return
        }
        //   requestAnimationFrame(tick);
        setTimeout(tick, 500)
      }

      // 初始化游戏
      function init() {
        generateFood()
        isPlaying = true
        tick()
      }

      // 监听键盘事件，更新贪吃蛇的方向
      document.addEventListener(
        'keydown',
        (event) => {
          console.log(event.key)
          switch (event.key) {
            case 'ArrowUp':
            case 'w':
              direction = directions.UP
              break
            case 'ArrowDown':
            case 's':
              direction = directions.DOWN
              break
            case 'ArrowLeft':
            case 'a':
              direction = directions.LEFT
              break
            case 'ArrowRight':
            case 'd':
              direction = directions.RIGHT
              break
          }
        }
      )

      // 开始游戏
      init()
    </script>
  </body>
</html>

Leetcode 795. 区间子数组个数

Sat, 12 Apr 2025 00:00:00 +0000

795. 区间子数组个数

给你一个整数数组 nums 和两个整数：left 及 right 。找出 nums 中连续、非空且其中最大元素在范围 [left, right] 内的子数组，并返回满足条件的子数组的个数。

生成的测试用例保证结果符合 32-bit 整数范围。

示例 1：

输入：nums = [2,1,4,3], left = 2, right = 3 输出：3 解释：满足条件的三个子数组：[2], [2, 1], [3]

// 单调栈
/**
 * @param {number[]} nums
 * @param {number} left
 * @param {number} right
 * @return {number}
 */
var numSubarrayBoundedMax = function (nums, left, right) {
    let n = nums.length;
    let st = []
    let l = Array(n).fill(-1), r = Array(n).fill(n)
    for (let i = 0; i < n; i++) {
        while (st.length && nums[st[st.length - 1]] <= nums[i]) st.pop();
        if (st.length) l[i] = st[st.length - 1];
        st.push(i);
    }
    while (st.length) st.pop();
    for (let i = 0; i < n; i++) {
        while (st.length && nums[st[st.length - 1]] <= nums[i]) {
            r[st[st.length - 1]] = i
            st.pop()
        };
        st.push(i);
    }
    let res = 0;
    for (let i = 0; i < n; i++) {
        if (nums[i] <= right && nums[i] >= left) {
            res += (r[i] - i) * (i - l[i]);
        }
    }
    return res;
};
// 枚举 
var numSubarrayBoundedMax = function (nums, left, right) {

    const cnt = max => {
    // 如何计算最大值小于等于max的子数组个数?
    // 枚举以每个数字结尾的子数组
    //                                  最大值              满足的子数组个数
    // 以2结尾的子数组    2                  1                     1        
    // 以1结尾的子数组    2 21               2                     1+2
    // 以4结尾的子数组    4 14 214           4
    // 以3结尾的子数组    3 43 143 2143      4  
        let cur = 0, res = 0
        for (let x of nums) {
            if (x <= max) {
                res += ++cur
            } else cur = 0
        }
        return res
    }
    return cnt(right) - cnt(left - 1)
};

Leetcode 640. 求解方程

Sat, 12 Apr 2025 00:00:00 +0000

今天我们来做一下今天的leetcode上一道中等题

题目链接在这里640. 求解方程

题意

这道题的意思比较简单，就是给了我们一个字符串方程，让我们编写一个算法来解这个方程。

初看这道题，估计会感觉很复杂（我第一次看到就是😂），因为即使我们自己去求解方程，也要费点功夫的。

但是，仔细看一下题目给定条件，可以发现这是一个一元一次的方程，而且其中只有 + -两种运算，也没有括号，这么一看好像简单点了。

接下来，我们就来分析下这道题的思路。

思路

首先，如果这道题让我们自己来做的话，相信我们第一步要做的就是化简方程了，也就是化简成kx + b = 0的形式。
然后，我们根据x的系数k和 b的大小就可以判断这个方程是否有解了。具体怎样判断呢？
- 因为最终的答案是-b/k，那么如果k==0就不能求出唯一的答案了。
- 然后，再看余下的数b，如果b==0，那么x无论取多少的数，0==0方程都成立，也就是有无限个解
- 如果b!=0，也就是 2==0这种，这个等式恒不成立，而且和x的取值无关，所以原方程无解。
剩下的一种情况，就是得出化简的系数和余数，将两者求商，然后取负就可以了。
- 那么，最后的一个问题就变成了，如何求原方程的系数和余数？
- 因为方程字符串中只有数字、-、+、=、x这五种字符，我们只需要逐个进行处理即可。
- 定义一个指针i从第一位向后扫描
- 用op记录当前表达式,也就是kx 或 b，他们前面的符号情况
- 如果当前字符是+或- 将op置为1或-1,指针向后移动一位一位i++
- 如果当前字符是=,则表示等号左边的式子已经处理好了，需要移动到右边合并，所以将k和b都乘以-1(因为移动到右边要改变符号嘛😄)，将op置为初始值1，指针向后移动一位i++
- 否则，当前字符就有两种情况了，一种是一位或者多位数字的第一位，另一种是一位或多位系数的第一位
- 这时，因为数字存在多位的情况，我们额外增加一个指针j从i向后扫描，直到j指向一个运算符，也就是-+=。
- 处理完j之后，我们直到j此时指向的是下一个需要处理的运算符了，那么i~j-1就是表达式的内容了。然后，根据表达式最后一位j-1是否是x，可以直到当前 kx 这种，还是一个余数。如果是kx这种，也就是i~j-1是x的系数，然后将i~j-2这段的数字字符转成数字即可，如果是数字将i~j-1这段的数字字符转成数字即可.
- 然后，将指针i指向下一个需要处理的位置，也就是j
- 最终，如果上面的步骤运行正常的话，我们就可以得出k和b的值了。

代码实现

了解了上面的思路之后，代码实现其实就非常简单了😎。

结束语

如果有更好的分析思路，欢迎大家在评论区发表看法！⛄