可视化搭建平台，如何实现撤销(undo)、重做(redo)功能撤销、重做功能，大家应该都很熟悉。 今天分享一下我们业务中

撤销、重做功能，大家应该都很熟悉。思考一下这个场景：用户选择了一个图片组件，然后配置这个组件上传了一张图片，但是用户觉得这张图片不好看，又重新上传了一张，结果发现更不好看了，不如之前哪一张。这时候如果我们没有提供撤销的功能的话，用户就得重新上传一次图片...所以说可视化搭建平台实现这个撤销、重做功能还是很有必要的，今天分享一下我在可视化搭建平台中实现撤销、重做所使用的技术方案。

技术方案的确定

想到要做这个功能，我的第一反应是使用快照。因为客户在搭建页面的过程中，其实本质上就是在操作一堆数据结构，它大概长这个样子：

{
  id: 'pageId',
  type: 'page',
  title: 'title1',
  props: {
    backgroundColor: '#FFF'
  }  
  children: [
    {
      id: 'compoment1Id'
      type: 'component',
      title: 'title2',
      props: {
        name: '111111'
      }
    },
      {
      id: 'compoment2Id'
      type: 'component',
      title: 'title2',
      props: {
        name: '22222'
      }
    }
  ]
}

只要客户每操作一次(增加一个节点、删除一个节点、或是修改节点的 props)，我就把当前的快照存储下来，然后记录一个索引，当点击撤销或者回退的时候，我获取当前的索引然后把快照取出来然后更新掉数据结构不就行了么？这样做确实是可以，也简单，但仔细想想会有其他问题：如果当前页面的节点比较多数据量比较大的情况下，用户可能仅仅只是使用 input 框给某个节点的一个 props 增加了一个字，就要把整个数据结构全部存储下来，这样做让我觉得有点浪费且不够优雅。我只需要关注变化的那部分啊...比如当前新增了一个节点，撤销的操作其实就相当于将这个节点删除掉，重做的操作其实就是将这个节点在插进去。

实现指令

想到这里我的思路打开了，其实我只需要将用户能做的操作都封装成一个指令，这些指令去实现undo、redo，然后把这些指令存储起来，在执行撤销、重做的时候把这些指令取出来，执行其 undo、redo 不就可以了吗。接下来以实现一个插入节点的指令为例子：

export class CommandHistoryBase {
  status: 'redo' | 'undo'

  constructor() {
    this.status = 'redo'
  }

  redoFn() {
    // 在子类中实现
  }

  undoFn() {
    // 在子类中实现
  }

  redo() {
    if (this.status === 'redo') return null
    this.status = 'redo'
    this.redoFn()
  }

  undo() {
    if (this.status === 'undo') return null
    this.status = 'undo'
    this.undoFn()
  }
}

import { CommandHistoryBase } from '../../commandHistory/commandHistoryBase'
import { Node } from '../node'
import { IPublicTypeNodeSchema } from '../../interface'

export class InsertNodeCommand extends CommandHistoryBase {
  node: Node

  constructor(node: IPublicTypeNodeSchema | Node, parent: Node) {
    super()
    // 将节点插入到父节点
    this.node = parent.insert(node)

    // 实现 redo 操作，既将节点插入到父节点
    super.redoFn = this.insert.bind(this, this.node, parent)
    // 实现 undo 操作，既将节点从父节点删除
    super.undoFn = this.delete.bind(this, this.node, parent)
  }

  insert(options: Node, parent: Node) {
    return parent.insert(options)
  }

  delete(node: Node, parent: Node) {
    parent.delete(node)
  }
}

这个 Node怎么如何实现就不在这边过多赘述了，所有的不管是0代码平台、还是低代码平台其实这块都是大同小异，看官们可以根据自己业务中的实现酌情修改。

记录指令、实现 history 类

接下来，就需要实现 history 去将用户操作的指令保存下来。

export class Stack {
  commands: CommandHistoryBase[]
  constructor() {
    this.commands = []
  }

  push(command: CommandHistoryBase) {
    this.commands.push(command)
  }

  undo() {
    this.commands.forEach((item) => {
      item.undo()
    })
  }

  redo() {
    this.commands.forEach((item) => {
      item.redo()
    })
  }
}

class CommandHistory {
  index: number = -1 // 没有任何历史记录的时候是 -1
  stackList: Stack[]

  back() {}

  goAhead() {}

  push(command: Command) {
    
  }
}

先介绍一下这个 Stack 是啥，这其实就是一个指令急，其存储多个指令。为啥要批量的存储指令呢？你想想哈，你在用 VS code 快速输入了一段文字之后，Ctrl Z 是不是一段文字都删掉了，而不是一个一个字的删？这其实就是为了做优化，比如用户在连续两次的指令中时间间隔在 50ms 以下，我就将其存储到一个指令集中。然后是这个 CommandHistory，stackList就是用来存储指令集，index 是当前历史记录的索引。比如，当前 push进来了一个指令，新建了一个指令集，然后存储到 stackList了，当前 index 为 0，然后又 push进来一个指令，新建了一个指令集，当前 index 就为 1 了。当执行 back 操作的时候，取出当前历史记录索引对应的指令集，执行 undo 操作，然后索引减一，当执行 goAhead 的时候，索引先加一，然后取出对应的指令集执行 redo 操作。

抛弃历史记录

比如当前一个用户，做了 7 次操作此时 History 里就有 7 条记录。然后用户又做三次撤销操作，此时 history 索引指向了图中3这个节点处:

然后用户在这个时候重新操作了三次：

这个时候，当前 History Index 之后的历史记录都需要抛弃掉了。

History 完整代码

import { CommandHistoryBase } from './commandHistoryBase'

export class Stack {
  commands: CommandHistoryBase[]
  constructor() {
    this.commands = []
  }

  // 指令集插入指令
  push(command: CommandHistoryBase) {
    this.commands.push(command)
  }

  // 批量执行指令集中的 undo 操作
  undo() {
    this.commands.forEach((item) => {
      item.undo()
    })
  }

  // 批量执行指令集汇总的 redo 操作
  redo() {
    this.commands.forEach((item) => {
      item.redo()
    })
  }
}

export class CommandHistory {
  // 当前处于的历史记录索引
  index: number = -1 
  // 如果两次操作的间隔在 200ms 以内，就将指令插入到同一个指令集
  debounceTime: number = 200
  // 记录上一次指令插入的时间
  prevPushTime: number
  // 指令集列表，也就是历史记录存储
  stackList: Stack[] = []

  constructor(options?: { debounceTime?: number }) {
    if (typeof options?.debounceTime !== 'undefined') {
      this.debounceTime = options.debounceTime
    }
  }

  // 回退历史
  back() {
    if (this.index <= 0) return
    const stack = this.stackList[this.index]
    stack.undo()
    this.index -= 1
  }

  // 前进
  goAhead() {
    if (this.index >= this.stackList.length - 1) return
    this.index += 1
    const stack = this.stackList[this.index]
    stack.redo()
  }

  // 插入指令
  push(command: CommandHistoryBase) {
    const currentTime = new Date().getTime()

    let currentStack: Stack

    if (this.index < this.stackList.length - 1) {
      // 在当前 index 右边的 stack 都要丢弃掉
      this.stackList = this.stackList.slice(0, this.index + 1)

      currentStack = new Stack()
      this.stackList.push(currentStack)
      this.index += 1
    } else if (currentTime - this.prevPushTime >= this.debounceTime) {
      // 新增一个 Stack
      currentStack = new Stack()
      this.stackList.push(currentStack)
      this.index += 1
    } else if (!this.stackList.length) {
      currentStack = new Stack()
      this.stackList.push(currentStack)
      this.index += 1
    } else {
      currentStack = this.stackList[this.stackList.length - 1]
    }
    this.pushCommand(command, currentStack)
    this.prevPushTime = currentTime
  }

  pushCommand(command: CommandHistoryBase, stack: Stack) {
    stack.push(command)
  }
}

完结

做之前觉得这个功能可能比较难实现，但是发现做的时候把技术方案捋清楚了、数据流动捋清楚了发现实现起来挺简单的.... 真正在历史记录这一块核心代码量其实并不多。对于我们的业务而言，真正繁琐的是其他地方的改造：比如，我要去实现所有操作的 Command 指令以及其 redo 和 undo 操作；二是，对于多个开发者的情况，要去避免他们在开发的时候，不通过 指令加 History 的形式去执行用户的操作。开发者是能拿到 Node 节点的，以插入节点为例子，他直接使用 node.insert也能实现插入节点的功能，这种东西，靠嘴是说不住的。我想到的办法是将 node 的 insert 方法使用 Symbol隐藏，这个 Symble 只暴露给指令，这样他们就只能调我暴露给他们的方法去实现 insert 操作了