JavaScript设计模式(十八)——备忘录模式：状态保存与恢复的艺术

引言：理解备忘录模式的本质

备忘录模式是一种行为型设计模式，它允许在不破坏封装性的前提下捕获对象的内部状态，并在之后恢复该状态。这种模式的核心价值在于实现"时间旅行"功能，让应用能够保存和恢复对象的历史状态，为撤销操作、状态回滚等场景提供强大支持。

备忘录模式的核心组件与结构

备忘录模式通过三个核心组件实现状态保存与恢复：原发器(Originator)、备忘录(Memento)和管理者(Caretaker)。

原发器是需要保存状态的对象，它创建包含当前状态的备忘录，并能够从备忘录中恢复状态。备忘录是一个不透明对象，存储原发器的内部状态，但防止其他对象访问其内容。管理者负责存储备忘录，但不检查或修改其内容。

// 原发器 - 创建和恢复备忘录
class Originator {
  constructor(state) {
    this.state = state;
  }
  
  createMemento() {
    return new Memento(this.state); // 创建备忘录
  }
  
  restoreFromMemento(memento) {
    this.state = memento.getState(); // 从备忘录恢复
  }
}

// 备忘录 - 存储状态的不透明对象
class Memento {
  constructor(state) {
    this.state = state;
  }
  
  getState() {
    return this.state;
  }
}

// 管理者 - 存储备忘录
class Caretaker {
  constructor() {
    this.mementos = [];
  }
  
  saveMemento(memento) {
    this.mementos.push(memento); // 保存备忘录
  }
  
  getMemento(index) {
    return this.mementos[index]; // 获取备忘录
  }
}

这种协作关系将状态管理从业务逻辑中解耦，使得状态保存与恢复更加灵活和安全。

JavaScript中的备忘录模式实现

JavaScript中的备忘录模式实现

基于闭包的实现利用JavaScript的函数作用域特性创建私有状态：

function createOriginator() {
  let state = {};
  
  function setState(newState) {
    state = {...newState};
  }
  
  function saveToMemento() {
    return JSON.parse(JSON.stringify(state));
  }
  
  function restoreFromMemento(memento) {
    state = {...memento};
  }
  
  return { setState, saveToMemento, restoreFromMemento };
}

基于ES6+类的实现更加结构化：

class Memento {
  constructor(state) { this.state = state; }
}

class Originator {
  constructor() { this.state = {}; }
  
  setState(newState) { this.state = {...newState}; }
  
  saveToMemento() { return new Memento({...this.state}); }
  
  restoreFromMemento(memento) { this.state = {...memento.state}; }
}

使用WeakMap可实现内存友好的备忘录存储：

const mementoMap = new WeakMap();

class Originator {
  setState(newState) { this.state = {...newState}; }
  
  saveToMemento() {
    mementoMap.set(this, JSON.parse(JSON.stringify(this.state)));
    return this;
  }
  
  restoreFromMemento() {
    if (mementoMap.has(this)) {
      this.state = {...mementoMap.get(this)};
    }
    return this;
  }
}

WeakMap允许对象被垃圾回收时自动清理对应的备忘录，有效避免内存泄漏。

实战应用场景：备忘录模式的实际应用

备忘录模式在实际开发中有着广泛的应用，特别是在需要保存和恢复状态的场景中。

在编辑器和绘图应用中，撤销/重做功能的核心就是备忘录模式。通过保存对象历史状态，实现操作回退和重做：

// 编辑器备忘录
class EditorState {
  constructor(content) { this.content = content; } // 保存内容
}

class Editor {
  constructor() {
    this.content = '';
    this.history = []; // 状态栈
  }
  
  saveState() { return new EditorState(this.content); } // 创建备忘录
  restoreState(state) { this.content = state.content; } // 恢复状态
}

表单状态保存是提升用户体验的关键。当用户误操作时，可快速恢复之前填写的内容：

class FormState {
  constructor(data) { this.data = {...data}; } // 深拷贝表单数据
}

class Form {
  saveState() { return new FormState(this.data); } // 保存表单状态
  restoreState(state) { this.data = state.data; } // 恢复表单状态
}

游戏开发中，存档/读档功能依赖备忘录模式管理复杂游戏状态：

class GameState {
  constructor(player, inventory, level) { // 游戏关键状态
    this.player = player;
    this.inventory = inventory;
    this.level = level;
  }
}

class Game {
  saveGame() { return new GameState(this.player, this.inventory, this.level); }
  loadGame(state) { // 从备忘录恢复游戏状态
    this.player = state.player;
    this.inventory = state.inventory;
    this.level = state.level;
  }
}

备忘录模式让我们能够优雅地处理状态保存与恢复，提升应用的健壮性和用户体验。

高级技巧与最佳实践

状态快照的增量存储是优化内存的关键技术，可通过只记录状态变化部分而非完整状态来实现。例如：

class IncrementalMemento {
  constructor() {
    this.snapshots = new Map(); // 存储变化的状态快照
  }
  
  save(state, prevState) {
    const changes = {};
    for (let key in state) {
      if (state[key] !== prevState[key]) {
        changes[key] = state[key]; // 只记录变化的部分
      }
    }
    return changes;
  }
}

备忘录模式与命令模式结合可实现高级撤销功能：

class Command {
  execute() { /* ... */ }
  undo() { /* ... */ }
  toMemento() { return this.state; } // 转换为备忘录
  fromMemento(memento) { this.state = memento; } // 从备忘录恢复
}

在React中，使用useReducer结合备忘录模式实现状态回滚：

const useMementoReducer = (reducer, initialState) => {
  const [state, dispatch] = useReducer(reducer, initialState);
  const history = useRef([state]);
  
  const saveState = useCallback(() => {
    history.current = [...history.current, state]; // 保存状态历史
  }, [state]);
  
  const restoreState = useCallback((index) => {
    if (history.current[index]) {
      dispatch({ type: 'RESTORE', state: history.current[index] });
    }
  }, []);
  
  return [state, dispatch, saveState, restoreState];
};

这种模式在复杂表单、游戏状态管理和多步骤表单中尤为实用。

潜在问题与解决方案

备忘录模式虽强大，但实现时需注意几个关键问题。内存管理方面，频繁保存状态会导致内存泄漏，可通过限制历史记录数量或使用WeakMap来优化。

class Caretaker {
  constructor(limit = 5) {
    this.mementos = [];
    this.limit = limit; // 限制保存的备忘录数量
  }
  
  addMemento(memento) {
    this.mementos.push(memento);
    if (this.mementos.length > this.limit) {
      this.mementos.shift(); // 移除最旧的备忘录
    }
  }
}

深度拷贝是另一个挑战。JavaScript的对象引用特性可能导致状态保存不完整，应使用结构化克隆算法或自定义深度拷贝函数。

function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj)); // 简单但有限制的深度拷贝
}

最后，状态恢复后必须与应用逻辑保持一致。可通过实现状态验证机制，确保恢复的状态有效，避免应用出现异常行为。

总结

备忘录模式通过封装对象状态实现了灵活的状态保存与恢复机制，是撤销/重做功能、游戏存档等场景的理想选择。在JavaScript生态中，随着单页应用复杂度提升，状态管理已从简单的数据存储演变为Redux、Vuex等成熟解决方案，备忘录模式的思想在其中仍有重要应用。