当前位置：首页 > news >正文

【前端设计模式】之备忘录模式

news 2025/6/27 4:40:03

备忘录模式是一种行为设计模式，它允许在不破坏封装性的前提下捕获和恢复对象的内部状态。在前端开发中，备忘录模式可以用于保存和恢复用户界面的状态，以及实现撤销和重做功能。

备忘录模式特性：

封装了对象的状态：备忘录对象可以保存原始对象的内部状态，并且只有原始对象可以访问该状态。
可以恢复对象的状态：备忘录对象可以将保存的状态重新应用到原始对象上，使其恢复到之前的状态。
不破坏封装性：备忘录模式通过将状态保存在备忘录对象中，避免了直接暴露原始对象的内部状态。

应用示例

1. 保存表单数据：

// 备忘录
class FormMemento {constructor(state) {this.state = state;}
}// 原始对象
class Form {constructor() {this.state = {};}save() {return new FormMemento(this.state);}restore(memento) {this.state = memento.state;}
}// 使用示例
const form = new Form();
form.state = { name: 'John', age: 25 };const memento = form.save();form.state = { name: 'Alice', age: 30 };form.restore(memento);
console.log(form.state); // { name: 'John', age: 25 }

上述代码中，Form类表示一个表单对象，FormMemento类表示表单的备忘录对象。通过调用save方法可以保存表单的状态，调用restore方法可以恢复表单到之前的状态。

FormMemento类：这是一个简单的类，它只有一个属性，即state。这个类的作用是保存表单（Form）对象的状态。
Form类：这个类具有一个state属性，它是一个对象，用于存储表单的状态。这个类有两个方法：
- save()方法：此方法创建并返回一个FormMemento对象，该对象包含当前Form对象的状态。
- restore(memento)方法：此方法接受一个FormMemento对象，并将其状态复制到当前Form对象中。
使用示例：首先，创建一个新的Form对象。然后，设置其状态，调用save()方法保存当前状态，更改状态，最后使用restore()方法恢复到之前保存的状态。

2. 撤销和重做功能

// 备忘录
class EditorMemento {constructor(content) {this.content = content;}
}// 原始对象
class Editor {constructor() {this.content = '';this.history = [];this.currentIndex = -1;}type(text) {this.content += text;}save() {const memento = new EditorMemento(this.content);this.history.push(memento);this.currentIndex++;}undo() {if (this.currentIndex > 0) {this.currentIndex--;this.content = this.history[this.currentIndex].content;}}redo() {if (this.currentIndex < this.history.length - 1) {this.currentIndex++;this.content = this.history[this.currentIndex].content;}}
}// 使用示例
const editor = new Editor();
editor.type('Hello');
editor.save();
console.log(editor.content); // 'Hello'editor.type(' World');
editor.save();
console.log(editor.content); // 'Hello World'editor.undo();
console.log(editor.content); // 'Hello'editor.redo();
console.log(editor.content); // 'Hello World'

上述代码中，首先定义了一个EditorMemento类，表示编辑器的备忘录。备忘录对象保存了编辑器在某个状态下的内容。

接下来定义了一个Editor类，表示编辑器对象。编辑器对象包含一个内容属性content，一个历史记录属性history，以及一个当前索引属性currentIndex。

编辑器对象提供了几个方法：