持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第29天，点击查看活动详情
备忘录设计模式是指当我们执行某些操作的时候，能够将我们执行的操作保存在内存中，这样我们能够随时通过某些特定操作来查看以及恢复之前的操作，通俗的讲，它就是通过某种方式捕获到我们操作并保存起来，然后再我们之后想恢复即可使用某一方式进行恢复
备忘录设计模式在生活中十分常见，比如我们和小伙伴们一块下五子棋，通过向对方请求可以完成撤销回退棋子的操作和我们手机里面的计算器通过计算得到的结果，我们也可以通过查看计算器历史计算结果并恢复计算数据，在打游戏中我们对游戏的某一个时间进行存档，存档会把我们当前的游戏数据全部保存下来,这样等到下次玩游戏点击指定的存档数据，就可以恢复当初存档的游戏数据
备忘录设计模式在业务中常用于对文本的回滚和前进操作以及利用该设计模式对分页请求数据进行缓存优化，减少页面请求，不过该优化方案不能够获取到最新的分页数据
我们来使用备忘录设计模式来实现一下文本的操作以及回退
页面结构，我们需要一个文本域和俩个按钮分别控制文本的操作和回滚的操作
<textarea type="text" id="app" > </textarea >
<button type="button" id="prev">前进</button>
<button type="button" id="next">后退</button>
先获取文本域和前进以及后退按钮，在定义一个数据池，便于我们存储文本域的文本修改操作，在增添一个标记用于获取数据池的数据，给文本域设置一个失去焦点事件，当焦点失去的时候就把当前文本域的value值存储到数据池中以便后面结合标记获取，前进按钮绑定一个点击事件，判断现在是否是最新操作，如果是最新操作则提示用户，如果不是则把当前数据池结合标记获取的值赋值给文本域，后退按钮操作同前进按钮一样
// 获取文本框
const app = document.getElementById('app');
// 前进
const prev = document.getElementById('prev');
// 后退
const next = document.getElementById('next');
// 数据池
let data = [];
// 恢复标记
let recoveryIndex = 0;
// 文本框失去焦点后把数据存到数据池中
app.onblur = function (e) {
data.push({ value: e.target.value })
recoveryIndex = data.length - 1;
}
// 前进按钮
prev.onclick = function () {
recoveryIndex++;
if (data[recoveryIndex]) {
app.value = data[recoveryIndex].value
} else {
recoveryIndex--;
alert('现在已是最新操作');
}
}
// 后退按钮
next.onclick = function () {
recoveryIndex--;
if (data[recoveryIndex]) {
app.value = data[recoveryIndex].value
} else {
recoveryIndex++;
alert('前面已无操作');
}
}
备忘录设计模式的我们可以利用它来做一些在业务中需要回滚操作的功能，提供了很好的恢复机制，方便用户进行查看或操作恢复历史状态，但是内存消耗比较大，因为存储历史操作比较多的情况下，会十分占用内存
坚持努力，无惧未来！
