TypeScript 设计模式之【备忘录模式】

bobostudio1995

于 2024-09-27 09:00:00 发布

阅读量638

点赞数 13

分类专栏： TypeScript 设计模式文章标签： typescript 设计模式备忘录模式前端 javascript

本文链接：https://blog.csdn.net/bobostudio1995/article/details/142561431

版权

TypeScript 设计模式专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文章目录

备忘录模式：时光机器的魔法
备忘录模式的奥秘

在这里插入图片描述

备忘录模式：时光机器的魔法

想象一下，如果你能拥有一台时光机器，可以随时回到过去的某个时，那该有多么神奇？在软件开发中，我们经常需要保存对象的历史状态，以便在需要时恢复。备忘录模式就像这台时光机器，它允许我们捕获对象的内部状态，并在之后将对象恢复到这个状态。

在复杂的应用程序中，我们经常需要实现撤销、回滚或者保存历史记录的功能。备忘录模式提供了一种优雅的方式来实现这些功能，而不会破坏对象的封装性，让我们一起探索这个神奇的"时光机器"吧!

备忘录模式的奥秘

备忘录模式就像一个"状态快照系统"，它提供了一种方法，可以在不破坏封装的前提下捕获一个对象的内部状态，并在之后将对象恢复到这个状态。通过这个状态快照系统，你可以轻松实现撤销、恢复等功能，使得系统更加灵活和强大。

备忘录模式有什么利与弊?

备忘录模式的优点是可以保存和恢复对象的状态，而不破坏封装性。它遵循单一职责原则，将状态管理的责任从原发器对象中分离出来。缺点是会消耗大量的内存，特别是在需要存储大量历史状态的情况下。

如何使用备忘录模式来优化你的系统

备忘录涉及角色

发起人(Originator): 创建并在需要时使用备忘录来恢复自身状态
备忘录(Memento): 存储发起人对象的内部状态
管理者(Caretaker): 负责保存备忘录，但不能操作或检查备忘录的内容

备忘录步骤

创建发起人类，包含需要保存的状态
创建备忘录类，用于存储发起人的状态
在发起人类中实现创建备忘录和从备忘录恢复状态的方法
创建管理者类，负责存储和管理备忘录对象
在客户端代码中使用管理者来保存和恢复发起人的状态

选择合适的备忘录模式，你就能轻松地实现状态的保存和恢复，让系统变得更加灵活和强大!

代码实现案例

// 备忘录类
class Memento {
  private state: string;
  constructor(state: string) {
    this.state = state;
  }
  // 获取状态
  getState(): string {
    return this.state;
  }
}

// 文本编辑器
class TextEditor {
  private content: string = "";
  // 设置内容
  setContent(content: string): void {
    this.content = content;
  }
  // 获取内容
  getContent(): string {
    return this.content;
  }
  // 创建备忘录
  createMemento(): Memento {
    return new Memento(this.content);
  }
  // 从备忘录恢复状态
  restoreFromMemento(memento: Memento): void {
    this.content = memento.getState();
  }
}

// 历史管理者类
class History {
  private mementos: Memento[] = [];
  // 添加备忘录
  addMemento(memento: Memento): void {
    this.mementos.push(memento);
  }
    
  getMemento(index: number): Memento {
    return this.mementos[index];
  }
}

// 客户端代码
const editor = new TextEditor();
const history = new History();

editor.setContent("这是第一行文本。");
history.addMemento(editor.createMemento());

editor.setContent("这是第二行文本。");
history.addMemento(editor.createMemento());

editor.setContent("这是第三行文本。");
console.log("当前内容:", editor.getContent());

// 撤销到第二个状态
editor.restoreFromMemento(history.getMemento(1));
console.log("撤销后内容:", editor.getContent());

// 撤销到第一个状态
editor.restoreFromMemento(history.getMemento(0));
console.log("再次撤销后内容:", editor.getContent());

// 输出
// 当前内容: 这是第三行文本。
// 撤销后内容: 这是第二行文本。
// 再次撤销后内容: 这是第一行文本。