js实现撤销重做功能的思路

数据结构

我们需要3个变量来保存当前数据、历史数据、未来数据。

• present: 保存当前数据
• past: (undo-stack)-历史数据列表，数组模拟的栈结构
• future: (redo-stack)-未来数据列表，数组模拟的栈结构

思路

我们来模拟一个Input输入框的撤销重做过程。 初始数据如下：

presebt = ""
past = []
future = []

输入字符a

presebt = "a"
past = ["a"]
future = []

输入字符b

presebt = "ab"
past = ["a","ab"]
future = []

输入字符c

presebt = "abc"
past = ["a","ab","abc"]
future = []

撤销

1. past 出栈(数组pop，删除数组最后一项，并将其返回);
2. future 入栈(数组push,插入到数组末尾);
3. present 重新赋值

presebt = "ab"
past = ["a","ab"]
future = ["abc"]

再撤销 步骤和上面一样

presebt = "a"
past = ["a"]
future = ["abc","ab"]

重做

1. future 出栈
2. past 入栈
3. present 重新赋值

present = "ab"
past = ["a","ab"]
future = ["abc"]

继续输入 d

1. past 入栈
2. future 清空

present = "abd"
past = ["a","ab","abd"]
future = []