基于 Immutable.js 实现撤销重做功能

本文作者 @肥超，浙江大学计算机研究生在读，喜欢前端/Node.js，Github 账号 https://github.com/shinima，欢迎勾搭。

浏览器的功能越来越强大，许多原来由其他客户端提供的功能渐渐转移到了前端，前端应用也越来越复杂。许多前端应用，尤其是一些在线编辑软件，运行时需要不断处理用户的交互，提供了撤消重做功能来保证交互的流畅性。不过为一个应用实现撤销重做功能并不是一件容易的事情。Redux官方文档中 介绍了如何在 redux 应用中实现撤销重做功能。基于 redux 的撤销功能是一个自顶向下的方案：引入 redux-undo 之后所有的操作都变为了「可撤销的」，然后我们不断修改其配置使得撤销功能变得越来越好用（这也是 redux-undo 有那么多配置项 的原因)。

本文将采用自底向上的思路，以一个简易的在线画图工具为例子，使用 TypeScript、Immutable.js 实现一个实用的「撤消重做」功能。大致效果如下图所示：

上图看不清的话，可以看这里。

第一步：确定哪些状态需要历史记录，创建自定义的 State 类

并非所有的状态都需要历史记录。许多状态是非常琐碎的，尤其是一些与鼠标或者键盘交互相关的状态，例如在画图工具中拖拽一个图形时我们需要设置一个「正在进行拖拽」的标记，页面会根据该标记显示对应的拖拽提示，显然该拖拽标记不应该出现在历史记录中；而另一些状态无法被撤销或是不需要被撤销，例如网页窗口大小，向后台发送过的请求列表等。

排除那些不需要历史记录的状态，我们将剩下的状态用 Immutable Record 封装起来，并定义 State 类：

这里我们的例子是一个简易的在线画图工具，所以上面的 State 类中包含了三个字段，items 用来记录已经绘制的图形，transform 用来记录画板的平移和缩放状态，selection 则表示目前选中的图形的 ID。而画图工具中的其他状态，例如图形绘制预览，自动对齐配置，操作提示文本等，则没有放在 State 类中。

第二步：定义 Action 基类，并为每种不同的操作创建对应的 Action 子类

与 redux-undo 不同的是，我们仍然采用命令模式：定义基类 Action，所有对 State 的操作都被封装为一个 Action 的实例；定义若干 Action 的子类，对应于不同类型的操作。

在 TypeScript 中，Action 基类用 Abstract Class 来定义比较方便。

Action 对象的 next 方法用来计算「下一个状态」，prev 方法用来计算「上一个状态」。getMessage 方法用来获取 Action 对象的简短描述。通过 getMessage 方法，我们可以将用户的操作记录显示在页面上，让用户更方便地了解最近发生了什么。prepare 方法用来在 Action 第一次被应用之前，使其「准备好」，AppHistory 的定义在本文后面会给出。

Action 子类举例

下面的 AddItemAction 是一个典型的 Action 子类，用于表达「添加一个新的图形」。

运行时行为

应用运行时，用户交互产生一个 Action 流，每次产生 Action 对象时，我们调用该对象的 next 方法来计算后一个状态，然后将该 action 保存到一个列表中以备后用；用户进行撤销操作时，我们从 action 列表中取出最近一个 Action 并调用其 prev 方法。应用运行时，next/prev 方法被调用的情况大致如下：

Applied-Action

为了方便后面的说明，我们对 Applied-Action 进行一个简单的定义：Applied-Action 是指那些操作结果已经反映在当前应用状态中的 action；当 action 的 next 方法执行时，该 action 变为 applied；当 prev 方法被执行时，该 action 变为 unapplied。

第三步：创建历史记录容器 AppHistory

前面的 State 类用于表示某个时刻应用的状态，接下来我们定义 AppHistory 类用来表示应用的历史记录。同样的，我们仍然使用 Immutable Record 来定义历史记录。其中 state 字段用来表达当前的应用状态，list 字段用来存放所有的 action，而 index 字段用来记录最近的 applied-action 的下标。应用的历史状态可以通过 undo/redo 方法计算得到。apply 方法用来向 AppHistory 中添加并执行具体的 Action。具体代码如下：

第四步：添加「撤销重做」功能

假设应用中的其他代码已经将网页上的交互转换为了一系列的 Action 对象，那么给应用添上「撤销重做」功能的大致代码如下：

第五步：合并 Action，完善用户交互体验

通过上面这四个步骤，画图工具拥有了撤消重做功能，但是该功能用户体验并不好。在画图工具中拖动一个图形时，MoveItemAction 的产生频率和 mousemove 事件的发生频率相同，如果我们不对该情况进行处理，MoveItemAction 马上会污染整个历史记录。我们需要合并那些频率过高的 action，使得每个被记录下来的 action 有合理的撤销粒度。

每个 Action 在被应用之前，其 prepare 方法都会被调用，我们可以在 prepare 方法中对历史记录进行修改。例如，对于 MoveItemAction，我们判断上一个 action 是否和当前 action 属于同一次移动操作，然后来决定在应用当前 action 之前是否移除上一个 action。代码如下：

从上面的代码中可以看到，prepare 方法除了使 action 自身准备好之外，它还可以让历史记录准备好。不同的 Action 类型有不同的合并规则，为每种 Action 实现合理的 prepare 函数之后，撤消重做功能的用户体验能够大大提升。

一些其他需要注意的地方

撤销重做功能是非常依赖于不可变性的，一个 Action 对象在放入 AppHistory.list 之后，其所引用的对象都应该是不可变的。如果 action 所引用的对象发生了变化，那么在后续撤销时可能发生错误。本方案中，为了方便记录操作发生时的一些必要信息，Action 对象的 prepare 方法中允许出现原地修改操作，但是 prepare 方法只会在 action 被放入历史记录之前调用一次，action 一旦进入纪录列表就是不可变的了。

总结

以上就是实现一个实用的撤销重做功能的所有步骤了。不同的前端项目有不同的需求和技术方案，有可能上面的代码在你的项目中一行也用不上；不过撤销重做的思路应该是相同的，希望本文能够给你带来一些启发。