(资料图片)

备忘录模式（Memento Pattern）：是一种行为型设计模式，在不破坏封装性的前提下，捕获一个对象的内部状态，并在该对象之外保存这个状态。在JavaScript中，可以使用闭包来实现备忘录模式。

备忘录模式通常用于处理用户界面的状态。当用户与应用程序交互时，应用程序会根据用户的输入更改其状态。它可以使您保存和还原应用程序状态的快照，以便用户可以随时返回以前的状态。

以下是备忘录模式的几个关键组件：

1. Originator（发起人）：负责创建要保存状态的对象，并在需要时将其状态存储到 Memento 中。1. Memento（备忘录）：存储发起人对象的状态。1. Caretaker（管理者）：负责存储和管理 Memento 对象。Caretaker 对象不会直接访问 Memento 对象，而是通过发起人对象来获取它。

在前端中，备忘录模式的一个实际应用是浏览器历史记录。当用户在浏览器中导航时，浏览器将当前页面的状态存储到历史记录中。用户可以随时返回以前的状态，并恢复页面的先前状态。

下面是一个简单的备忘录模式实现示例：

// Originatorclass Editor {  constructor() {    this.content = "";  }  type(words) {    this.content += words;  }  save() {    return new EditorMemento(this.content);  }  restore(memento) {    this.content = memento.getContent();  }}// Mementoclass EditorMemento {  constructor(content) {    this.content = content;  }  getContent() {    return this.content;  }}// Caretakerclass History {  constructor() {    this.states = [];  }  push(state) {    this.states.push(state);  }  pop() {    return this.states.pop();  }}// Usageconst editor = new Editor();const history = new History();// 编辑器输入内容editor.type("Hello, ");editor.type("World!");// 将当前状态保存到备忘录中，并将备忘录添加到历史记录中history.push(editor.save());// 继续编辑器输入内容editor.type(" How are you today?");// 输出当前编辑器内容console.log(editor.content); // "Hello, World! How are you today?"// 从历史记录中恢复上一个状态editor.restore(history.pop());// 输出恢复的编辑器内容console.log(editor.content); // "Hello, World!"

在这个例子中，`Editor` 类是发起人，它具有保存和恢复状态的方法。`EditorMemento` 类是备忘录，它存储发起人对象的状态。`History` 类是管理者，它存储和管理备忘录对象。

在使用备忘录模式时，我们首先创建一个编辑器对象 `editor`，并将其状态保存到历史记录中。然后我们继续输入一些内容，并再次将状态保存到历史记录中。接着，我们从历史记录中恢复先前的状态，并输出恢复的编辑器内容。

需要注意的是，在 JavaScript 中，我们可以直接访问对象的属性，而不需要使用 getter 和 setter 方法，因此在上面的示例中，我们可以直接使用 `editor.content` 来访问编辑器的内容。