Memento Pattern

Understanding the Memento Pattern

The Memento pattern is a behavioral design pattern that allows you to capture an object's internal state and save it externally so that the object can be restored to this state later. The pattern is particularly useful when implementing undo mechanisms, history features, or when you need to create snapshots of an object's state.

Problem

Imagine you're implementing a text editor that needs an undo feature. There are several challenges:

• You need to save the state of objects at different points in time.
• The saved state must be stored outside the object to avoid exposing its internal structure.
• Saving the state shouldn't violate encapsulation by exposing private fields and methods.
• Different types of objects may need different mechanisms for capturing their states.

Solution

The Memento pattern suggests creating a special kind of object that acts as a snapshot of the original object's state. This snapshot is called a "memento." The process works as follows:

• The Originator is the object whose state needs to be saved.
• The Memento is an object that stores a snapshot of the Originator's state.
• The Caretaker is responsible for keeping track of the Mementos, but never modifies their contents.

The Originator creates a Memento containing a snapshot of its current state. Later, when needed, the Caretaker returns the Memento to the Originator, which uses it to restore its previous state.

Structure

Participants

• Originator: The class whose state needs to be saved and restored. It creates a memento containing a snapshot of its current state and uses mementos to restore its state.
• Memento: A class that stores the internal state of the Originator. The memento should be immutable to prevent unintended modifications.
• Caretaker: Responsible for keeping track of multiple mementos. It never examines or modifies the contents of a memento.

When to Use

Use the Memento Pattern when:

• You need to create snapshots of an object's state to be able to restore it later.
• You want to implement an undo mechanism.
• Direct access to an object's fields, getters, and setters would violate its encapsulation.
• You need to keep a history of changes for later review or analysis.

Benefits

• Preserves Encapsulation: The memento pattern preserves encapsulation by not exposing the details of the originator's implementation.
• Simplifies the Originator: The originator doesn't need to keep track of its history, as that's done by the caretaker.
• Follows Single Responsibility Principle: The pattern separates the concerns of state management into different classes.
• Provides Undo Capability: Makes it easy to implement undo/redo operations.

Trade-offs

• Memory Usage: Storing many mementos can consume a lot of memory, especially if the object's state is large or complex.
• Maintenance Costs: The caretaker needs to track the lifecycle of mementos and dispose of them when no longer needed.
• Performance Impact: Creating and restoring mementos can be expensive for objects with complex state.

Real-World Uses

• Undo/Redo Operations: Text editors, graphic design applications, and development environments use the memento pattern to implement undo functionality.
• Transaction Management: Database systems use mementos to rollback transactions if they fail.
• Game Saving: Video games use mementos to save the player's progress and current game state.
• Version Control: Software like Git uses a similar concept to track changes to files over time.
• Wizards and Forms: Multi-step processes that need to maintain state between steps.

Implementation Example

Let's implement a text editor with an undo feature using the Memento pattern. This will demonstrate how to save and restore states of an object.

/**
 * The Originator class - our text editor
 * This is the class whose state we want to save and restore
 */
class TextEditor {
    constructor() {
        this.content = '';
        this.cursorPosition = 0;
        this.selectionRange = null;
    }
    
    // Methods to modify the state
    type(text) {
        // If there's a selection, replace it
        if (this.selectionRange) {
            const [start, end] = this.selectionRange;
            this.content = this.content.substring(0, start) + 
                          text + 
                          this.content.substring(end);
            this.cursorPosition = start + text.length;
            this.selectionRange = null;
        } else {
            // Otherwise, insert at cursor position
            this.content = this.content.substring(0, this.cursorPosition) + 
                          text + 
                          this.content.substring(this.cursorPosition);
            this.cursorPosition += text.length;
        }
    }
    
    delete() {
        if (this.selectionRange) {
            // Delete the selected text
            const [start, end] = this.selectionRange;
            this.content = this.content.substring(0, start) + 
                          this.content.substring(end);
            this.cursorPosition = start;
            this.selectionRange = null;
        } else if (this.cursorPosition > 0) {
            // Delete one character before cursor
            this.content = this.content.substring(0, this.cursorPosition - 1) + 
                          this.content.substring(this.cursorPosition);
            this.cursorPosition--;
        }
    }
    
    select(start, end) {
        if (start >= 0 && end <= this.content.length && start <= end) {
            this.selectionRange = [start, end];
            this.cursorPosition = end;
        }
    }
    
    // Create a memento that captures the current state
    save() {
        // The memento is returned as an object with the state data
        return new EditorMemento(
            this.content,
            this.cursorPosition,
            this.selectionRange ? [...this.selectionRange] : null
        );
    }
    
    // Restore state from a memento
    restore(memento) {
        if (!memento) return;
        
        this.content = memento.getContent();
        this.cursorPosition = memento.getCursorPosition();
        this.selectionRange = memento.getSelectionRange() 
                            ? [...memento.getSelectionRange()] 
                            : null;
    }
    
    // Method to display current state
    getState() {
        return {
            content: this.content,
            cursorPosition: this.cursorPosition,
            selectionRange: this.selectionRange
        };
    }
}

/**
 * The Memento class
 * Stores the state of the TextEditor
 */
class EditorMemento {
    #content;          // Use private fields for encapsulation
    #cursorPosition;
    #selectionRange;
    
    constructor(content, cursorPosition, selectionRange) {
        this.#content = content;
        this.#cursorPosition = cursorPosition;
        this.#selectionRange = selectionRange;
    }
    
    // These getters are used by the Originator only
    getContent() {
        return this.#content;
    }
    
    getCursorPosition() {
        return this.#cursorPosition;
    }
    
    getSelectionRange() {
        return this.#selectionRange;
    }
}

/**
 * The Caretaker class
 * Manages history and handles undo/redo operations
 */
class EditorHistory {
    constructor(editor) {
        this.editor = editor;
        this.history = [];     // Stack of mementos
        this.currentIndex = -1; // Current position in history
    }
    
    // Save current state to history
    backup() {
        // If we made changes after undoing, truncate the future history
        if (this.currentIndex < this.history.length - 1) {
            this.history = this.history.slice(0, this.currentIndex + 1);
        }
        
        this.history.push(this.editor.save());
        this.currentIndex = this.history.length - 1;
    }
    
    // Restore previous state (undo)
    undo() {
        if (this.currentIndex <= 0) {
            console.log("Nothing to undo.");
            return false;
        }
        
        this.currentIndex--;
        const memento = this.history[this.currentIndex];
        this.editor.restore(memento);
        return true;
    }
    
    // Restore next state (redo)
    redo() {
        if (this.currentIndex >= this.history.length - 1) {
            console.log("Nothing to redo.");
            return false;
        }
        
        this.currentIndex++;
        const memento = this.history[this.currentIndex];
        this.editor.restore(memento);
        return true;
    }
    
    getHistoryInfo() {
        return {
            total: this.history.length,
            current: this.currentIndex + 1
        };
    }
}

// Client code
const editor = new TextEditor();
const history = new EditorHistory(editor);

// Initialize with empty document
history.backup();

// Make some changes
editor.type("Hello, world!");
history.backup();

editor.select(7, 12);  // Select "world"
history.backup();

editor.type("Memento Pattern");
history.backup();

editor.cursorPosition = editor.content.length;  // Move cursor to end
editor.type(" This demonstrates state restoration.");
history.backup();

// Log the document state
console.log("Current state:", editor.getState());

// Undo twice
console.log("Undoing...");
history.undo();
console.log("After first undo:", editor.getState());

console.log("Undoing again...");
history.undo();
console.log("After second undo:", editor.getState());

// Redo
console.log("Redoing...");
history.redo();
console.log("After redo:", editor.getState());

Code Explanation

Our implementation showcases the three key components of the Memento pattern:

1. Originator (TextEditor): The class whose state we want to save and restore. It has methods to manipulate text, and importantly, the save() method to create mementos and restore() method to use them.
2. Memento (EditorMemento): A class that stores the internal state of the originator. Note that we use private fields (with the # prefix) to enforce encapsulation, preventing direct access to the state variables from outside.
3. Caretaker (EditorHistory): Manages the history of mementos, tracks the current position in history, and provides undo and redo functionality. Importantly, it never examines or modifies the content of the mementos.

This implementation demonstrates several key features of the Memento pattern:

• State Encapsulation: The state details are kept private within the EditorMemento class.
• History Management: The caretaker manages multiple history states and allows navigating through them.
• Clean Separation of Concerns: Each class has a clear, single responsibility.