记录一个对象的变化，可以恢复之前的某个状态；
适用场景：
- 撤销操作：保存/恢复 数据 的相关业务场景；
- 状态恢复：在 “后悔” 的时候，将对象 恢复到之前的状态；
优点：
- 存档信息：封装 存档信息；
- 恢复机制：为 用户 提供一种 可恢复 机制；
缺点：资源占用，会额外占用 磁盘/内存 等资源；
类图
代码
<body>
<input type="text" id="content">
<button id="save-btn">保存</button>
<button id="prev-btn">上一步</button>
<button id="next-btn">下一步</button>
</body>
<script>
let content = document.getElementById('content');
let saveBtn = document.getElementById('save-btn');
let prevBtn = document.getElementById('prev-btn');
let nextBtn = document.getElementById('next-btn');
class Memo {
constructor(content) {
this.content = content;
}
}
class Memos {
constructor() {
this.index = 0;
this.list = [new Memo('')];
}
add(content) {
this.list[++this.index] = new Memo(content);
}
get() {
return this.list[this.index];
}
prev() {
if (this.index == 0) return alert('没有上一步');
return this.list[--this.index];
}
next() {
if (this.index == this.list.length - 1) return alert('没有下一步');
return this.list[++this.index];
}
}
let memos = new Memos();
saveBtn.addEventListener('click', function () {
memos.add(content.value);
});
prevBtn.addEventListener('click', function () {
let memo = memos.prev();
content.value = memo.content;
});
nextBtn.addEventListener('click', function () {
let memo = memos.next();
content.value = memo.content;
});
</script>
打赏作者
您的打赏是我前进的动力
微信
支付宝
职责链模式
上一篇
评论
