前端快照实现方案

简介

snapshot 翻译为快照，用于直观获取页面在某个运行时的状态，将执行操作前后的快照进行存储，可以轻松实现页面状态的重做、撤销功能。

本文主要介绍 snapshot 工具实现的原理，以及其在项目中的使用。

设计

要实现页面状态的历史记录、重做、撤销，需要支持以下几个属性和方法

属性

• 历史记录：存储历史的页面状态，包含页面初始化的状态 到 上一个页面状态
• 撤销记录：存储重做的每一个操作记录，用于撤销后恢复
• 当前记录：临时存储当前页面状态，主要用于下一次操作后，需要将其存储到历史记录
• 上次插入数据时间：插入时间间隔太小时，需要额外处理

 // 历史记录
 recordList: string[] = []
 ​
 // 撤销记录，用于重做
 redoList: string[] = []
 ​
 // 当前记录用 currentRecord 变量暂时存储，当用户修改时，再存放到 recordList
 currentRecord = ''
 ​
 // 上次插入数据时间
 time = 0

方法

存储历史记录 push

当用户操作后，更新历史记录。需要考虑以下几点。

• 当前操作时间距离上次插入时间小于 100 ms 时，则替换当前记录并取消执行添加
• 如果当前记录有值，则说明上一次操作是手动插入，将之前缓存的当前记录推入 recordList，并且需要清空重做记录
• 将当前状态存储到当前记录
• 设置最大历史记录容量，当超过时，将最先插入的数据删除

 push(record: PageData) {
   const nowTime = Date.now()
   // 防止添加重复的时间，当添加间隔小于 100ms 时，则替换当前记录并取消执行添加
   if (this.time + 100 > nowTime) {
     try {
       // 将 json 转成字符串存储
       this.currentRecord = JSON.stringify(record)
     } catch (error) {
       return false
     }
 ​
     return false
   }
 ​
   this.time = nowTime
 ​
   // 判断之前是否已经存在currentRecord记录，有则存储到recordList
   if (this.currentRecord) {
     this.recordList.push(this.currentRecord)
     // 增加记录后则应该清空重做记录
     this.redoList.splice(0, this.redoList.length)
   }
 ​
   // 存储当前记录
   this.currentRecord = JSON.stringify(record)
 ​
   // 最多存储 30 条记录，超过则删除之前的记录
   if (this.recordList.length > 30) {
     this.recordList.unshift()
   }
   return true
 }

撤销操作 undo

当用户操作后，依赖 push 时存储的历史记录列表，将页面状态回退到上一次的状态，需要注意以下几点：

• 当历史记录没有时，直接返回
• 从历史记录中取出最后一次存储数据
• 若当前记录存在，需要将其存放到重做记录列表
• 需要清空当前记录，防止重复添加，因为撤销后，也会执行 push 存储历史记录方法

 undo() {
   // 没有记录时,返回 false
   if (this.recordList.length === 0) {
     return null
   }
 ​
   const record = this.recordList.pop()
 ​
   // 将当前记录添加到重做记录里面
   if (this.currentRecord) {
     this.redoList.push(this.currentRecord)
   }
 ​
   // 丢弃当前记录，防止重复添加
   this.currentRecord = ''
   return JSON.parse(record as string) as PageData
 }

重做操作 redo

当用户操作后，依赖 redoList 列表，将页面状态回退到撤销前的状态，需要注意以下几点：

• 当重做记录没有时，直接返回
• 从重做记录里取出最后一次存储数据
• 如果当前记录有值，需要将其放到历史记录列表
• 需要清空当前记录，防止重复添加，因为重做后，也会执行 push 存储历史记录方法

 redo() {
   // 没有重做记录时,返回 false
   if (this.redoList.length === 0) {
     return null
   }
 ​
   const record = this.redoList.pop()
   // 添加到重做记录里面
   if (this.currentRecord) {
     this.recordList.push(this.currentRecord)
   }
 ​
   // 丢弃当前记录，防止重复添加
   this.currentRecord = ''
   return JSON.parse(record as string) as PageData
 }

过程演示

假设数据列表为 [1, 2, 3, 4]，当前属性值分别为：

 recordList = [1, 2, 3]
 redoList = []
 currentRecord = 4

1、手动添加 5，则会执行 push 方法，执行后属性值分别为

 recordList = [1, 2, 3, 4]
 redoList = []
 currentRecord = 5

2、执行1次撤销，则先会执行 undo，执行后属性值分别为

 recordList = [1, 2, 3]
 redoList = [5]
 currentRecord = ''

然后执行 push，将 4 push 进去，执行后属性值分别为

 recordList = [1, 2, 3]
 redoList = [5]
 currentRecord = 4

3、执行第2次撤销，则先会执行 undo，执行后属性值分别为

 recordList = [1, 2]
 redoList = [5, 4]
 currentRecord = ''

然后执行 push，将 3 push 进去，执行后属性值分别为

 recordList = [1, 2]
 redoList = [5, 4]
 currentRecord = 3

4、执行1次重做，则先会执行 redo，执行后属性值分别为

 recordList = [1, 2, 3]
 redoList = [5]
 currentRecord = ''

然后执行 push，将 4 push 进去，执行后属性值分别为

 recordList = [1, 2, 3]
 redoList = [5]
 currentRecord = 4

5、手动添加 6，则会执行 push 方法，执行后属性值分别为

 recordList = [1, 2, 3, 4]
 redoList = []
 currentRecord = 6

完整代码

 export default class Snapshot {
     // 历史记录
     recordList: string[] = []
 ​
     // 撤销记录，用于重做
     redoList: string[] = []
 ​
     // 当前记录用 currentRecord 变量暂时存储，当用户修改时，再存放到 recordList
     currentRecord = ''
 ​
     // 上次插入数据时间
     time = 0
 ​
     push(record: PageData) {
         const nowTime = Date.now()
         // 防止添加重复的时间，当添加间隔小于 100ms 时，则替换当前记录并取消执行添加
         if (this.time + 100 > nowTime) {
             try {
                 // 将 json 转成字符串存储
                 this.currentRecord = JSON.stringify(record)
             } catch (error) {
                 return false
             }
 ​
             return false
         }
 ​
         this.time = nowTime
 ​
         // 判断之前是否已经存在currentRecord记录，有则存储到recordList
         if (this.currentRecord) {
             this.recordList.push(this.currentRecord)
             // 增加记录后则应该清空重做记录
             this.redoList.splice(0, this.redoList.length)
         }
 ​
         try {
             // 将 json 转成字符串存储
             this.currentRecord = JSON.stringify(record)
         } catch (error) {
             return
         }
 ​
         // 最多存储 30 条记录，超过则删除之前的记录
         if (this.recordList.length > 30) {
             this.recordList.unshift()
         }
         return true
     }
 ​
     undo() {
         // 没有记录时,返回 false
         if (this.recordList.length === 0) {
             return null
         }
 ​
         const record = this.recordList.pop()
 ​
         // 将当前记录添加到重做记录里面
         if (this.currentRecord) {
             this.redoList.push(this.currentRecord)
         }
 ​
         // 丢弃当前记录，防止重复添加
         this.currentRecord = ''
         return JSON.parse(record as string) as PageData
     }
 ​
     redo() {
         // 没有重做记录时,返回 false
         if (this.redoList.length === 0) {
             return null
         }
 ​
         const record = this.redoList.pop()
         // 添加到重做记录里面
         if (this.currentRecord) {
             this.recordList.push(this.currentRecord)
         }
 ​
         // 丢弃当前记录，防止重复添加
         this.currentRecord = ''
         return JSON.parse(record as string) as PageData
     }
 }

在线演示

codepen.io/belle-peng/...