前端設計模式——備忘錄模式

備忘錄模式（Memento Pattern）：是一種行為型設計模式，在不破壞封裝性的前提下，捕獲一個物件的內部狀態，並在該物件之外儲存這個狀態。在JavaScript中，可以使用閉包來實現備忘錄模式。

備忘錄模式通常用於處理使用者介面的狀態。當用戶與應用程式互動時，應用程式會根據使用者的輸入更改其狀態。它可以使您儲存和還原應用程式狀態的快照，以便使用者可以隨時返回以前的狀態。

以下是備忘錄模式的幾個關鍵元件：

1. Originator（發起人）：負責建立要儲存狀態的物件，並在需要時將其狀態儲存到 Memento 中。
1. Memento（備忘錄）：儲存發起人物件的狀態。
1. Caretaker（管理者）：負責儲存和管理 Memento 物件。Caretaker 物件不會直接存取 Memento 物件，而是通過發起人物件來獲取它。

在前端中，備忘錄模式的一個實際應用是瀏覽器歷史記錄。當用戶在瀏覽器中導航時，瀏覽器將當前頁面的狀態儲存到歷史記錄中。使用者可以隨時返回以前的狀態，並恢復頁面的先前狀態。

下面是一個簡單的備忘錄模式實現範例：

// Originator
class Editor {
  constructor() {
    this.content = '';
  }

  type(words) {
    this.content += words;
  }

  save() {
    return new EditorMemento(this.content);
  }

  restore(memento) {
    this.content = memento.getContent();
  }
}

// Memento
class EditorMemento {
  constructor(content) {
    this.content = content;
  }

  getContent() {
    return this.content;
  }
}

// Caretaker
class History {
  constructor() {
    this.states = [];
  }

  push(state) {
    this.states.push(state);
  }

  pop() {
    return this.states.pop();
  }
}

// Usage
const 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` 來存取編輯器的內容。