備忘錄模式（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` 來訪問編輯器的內容，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/547952.html
標籤：其他
上一篇：前端設計模式——外觀模式