拯救老项目-表单暂存与还原

背景

最近接到一个需求，公司内部的 OA 系统（后端人员基于 jQuery 开发），需要给所有的表单增加暂存与还原功能。具体来说就是对于系统内的任何表单，都增加一个暂存按钮，用户填写到一半，点击暂存可以保存起来。下次再打开时，点击还原，可以恢复到之前编辑的样子，继续编辑。

听完这个需求，眉头不由的一锁，心想这能实现吗？不过好在 PM 说这个不紧急，可以调研下，于是对这个需求进行了些许分析。

可行性分析

如果是 React 或 Vue 的项目，基于数据驱动视图，那么还是比较好实现的，只需保存好当前状态下的数据就行。但对于这种传统老项目，非数据驱动模式，存在通用的解决办法么。。

分场景考虑

既然咋一看没啥思路，那么就对最简单和最复杂的场景分别分析了下

1. 最简单场景页面都是静态表单情况。这种情况一想便知可以实现，只需保存好当前表单的所有数据，恢复时再赋值给对应的表单元素即可。

2. 最复杂的场景想象一下，对于表单来说，最复杂的情况无非是包含下列几种场景

• 表单数据之间存在联动关系，最常见的 Select 多级联动

• 表单可以被动态增加，比如提交一个报销单，可以添加多条报销明细

• 表单数据会影响页面的信息展示，比如某个银行卡的输入框，输入完后，页面其他部分会展示一个格式化后的银行卡号

这么一分析后觉得，这肯定实现不了。就说表单动态添加这一项，怎么样能做到 100%还原呢？
去网上搜索了一些开源方案，比如 https://github.com/simsalabim/sisyphus/，发现都是针对上述简单场景的还原，看来对于复杂的场景，确实没有通用的方法。

解决特定场景问题

静下来思考了下，虽然对于最复杂的场景没有好办法，但目前 OA 系统中遇到的场景复杂度，是略低于最复杂场景的。那么能不能做到尽可能覆盖更多的场景，对于实在无法暂存还原的，进行单独处理呢？

方案思考

首先对问题进行了抽象，复杂场景和简单场景最大的区别就是DOM 结构产生了变化，那么如果能还原出 DOM 结构，再把数据进行赋值，那不就可以了。

方案目标

基于上述思考，重新理了下方案的目标

1. 还原所有表单的 HTML，包括动态加载部分

2. 还原数据

3. 还原非表单部分的展示性 HTML

实现思路

方案的难点在于如何还原表单的 HTML，思索一番产生一个想法，能否通过还原用户行为来还原表单
这个办法理论上是可行的，同样的用户行为，在同一个系统的不同的时刻执行一遍，执行的结果大概率是一样的。并且暂存与还原的操作之间，并不会相隔太久