Web 应用中的撤销与重做

Web 应用中的撤销与重做

 

撤销（Undo）与重做（Redo）是绝大部分应用中都有的功能，它给用户提供了后悔药，这样用户即便误操作也能使损失达到最小，或者没有损失，给用户提供更好的使用体验。本文介绍 Web 应用中常用的两种撤销与重做实现思路，并提供一个在线案例。

Web 应用中的撤销与重做，很容易想到富文本编辑器，但本文不特指富文本编辑器，而是更具有普遍意义的 Web 交互应用。只要有用户操作发生的地方，就有可能出错，需要提供挽救的方法。在富文本编辑器里，用户的操作就是编辑文本内容，document.execCommand 能实现最基本的撤销重做，不过受限制也非常多，真正用起来也是捉襟见肘。

在其他类型的交互应用中，用户的操作多种多样，可以是移动一个组件的位置，也可以从小组中删除一个成员等等。面对这些丰富的场景，我们需要抽象出一些实现撤销重做的基本思路。

不管什么类型的交互应用，终究是用户对某个对象进行操作，每一步操作都会对操作对象产生副作用，使其状态发生改变。如下图中，系统初始化后，操作对象的初始状态是 S1，用户进行 A、B、C 等操作后，现在操作对象的状态是 S4。 如果没有撤销重做功能，这条操作链只会一直往前延伸，我们无法回到以前的状态。

用户操作路径

 

首先需要对撤销重做功能做出功能定义：

 

a. 能记录用户的一系列操作过程，并能根据记录恢复到当时的状态；

b. 用户在进行某个操作过后，能通过撤销（Undo）回到操作之前的状态；

撤销

c. 用户在撤销之后，也能通过重做（Redo）恢复前一次撤销的操作；

重做

d. 用户在任意状态下，如果有新的