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

定义

保存一个对象的某个状态，以便在适当的时候恢复对象，备忘录模式属于行为型模式。

解决的问题

1. 各种 word 等文本域之类的功能，其中的 撤回 功能；
2. 可以考虑用来优化列表，保存对应的页码的数据，优化页面加载数据。

结构

备忘录模式的主要角色如下。

1. 备忘录（Memento）角色：具体对象的结构；
2. 发起人（Originator）角色：设置当前数据和获取当前数据的对象；
3. 管理者（Caretaker）角色：对备忘录进行管理（一般是通过一个 List结构 保存多个 Memento），提供保存与获取备忘录的功能，但其不能对备忘录的内容进行访问与修改。

实现：

重点是理解备忘录模式的思想，前端实际使用可能并不使用类的形式。

// 1. 先定义好状态的类型

// 保存具体的数据
type IState = string;
// 一个状态类的结构
interface IMemento {
  state: IState;
}

// 2. 具体的状态类： 根据实际情况判断是否需要这个类，最重要的是定义好状态的结构
class Memento {
  // 保存具体数据
  state: string;
  constructor(state: string) {
    this.state = state;
  }
}


//  3. 保存(当前)状态和(当前)获取状态的实际操作者；

class Originator {
  state: IState;
  constructor(state: IState) {
    this.setState(state);
  }
  // 设置获取新的数据
  setState(state: IState): void {
    this.state = state;
  }
  getState(): IState {
    return this.state;
  }

  saveStateToMemento(): IMemento {
    return new Memento(this.state);
  }

  setStateFromMemento(momento: IMemento): void {
    this.state = momento.state;
  }
}

// 4. 缓存对象
class CareTaker {
  mementoList: IMemento[];
  constructor() {
    this.mementoList = [];
  }

  addMemento(momento: IMemento) {
    this.mementoList.push(momento);
  }
  getMemento(index: number): IMemento {
    return this.mementoList[index];
  }
}

// 5. 使用
const originator = new Originator("第一条数据");
const careTaker = new CareTaker();

careTaker.addMemento(originator.saveStateToMemento());
originator.setState('第二条数据');
careTaker.addMemento(originator.saveStateToMemento());
originator.setState('第三条数据');
careTaker.addMemento(originator.saveStateToMemento());

originator.setStateFromMemento(careTaker.mementoList[0]);
console.log(originator.state); // 第一条数据

originator.setStateFromMemento(careTaker.mementoList[2]);
console.log(originator.state); // 第三条数据