It’s #FrontendFriday – Memento-Pattern

Was ist das Memento-Pattern?

Im Memento-Pattern kann der Zustand eines Objektes gespeichert werden, so dass dieses später in diesen Zustand wieder zurückversetzt werden kann. Das besondere daran ist, dass dabei die Kapselung des Objektes nicht verletzt wird. Dieses behavioral design pattern ist auch als Snapshot oder Token bekannt.

Wann kann man das Memento-Pattern einsetzen?

Der wohl offensichtlichste Anwendungsfall für das Pattern ist das bekannte Undo/Redo-Feature in diversen Anwendungen. Ein weiteres Beispiel zur praktischen Anwendung ist die (Transaktions-) Protokollierung von Objekten oder ganzen Anwendungszuständen in jeglicher Form.

Es gibt zwei Akteure im Memento-Pattern: Originator (Urheber) und Caretaker (Aufbewahrer).

Der Caretaker ist für die Aufbewahrung und Verwaltung des Memento zuständig – verändert es aber nicht. Er kann ein Memento vom Originator anfordern, um den internen Zustand des Originators zu speichern (1). Der Caretaker hat dabei aber keinen Zugriff auf den internen Zustand des Mementos. Und er kann ein Memento zurück an den Originator übergeben, um den internen Zustand wiederherzustellen (2).

Der Originator wiederum erzeugt bei Anfrage das Memento von seinem aktuellen, internen Zustand (1). Bei erhalt eines Memento stellt der Originator den „alten“ Zustand wiederher (2). Er bietet also die Schnittstelle für das Memento.

Quelle: https://en.wikipedia.org/wiki/Memento_pattern

Wie sieht das Memento-Pattern in JavaScript aus?

Die Implementierung am Beispiel einer „Notizen“-App sieht in JavaScript wie folgt aus:

// Originator
var Notes = function(){
	this.value= "" ;

	this.saveState = function(){
		return new NotesState(this)
	}

	this.restoreState = function(_obj){
		this.value= _obj.value;
	}
}

// Memento
var NotesState = function(_obj){
	this.value = _obj.value ;
}

// CareTaker
var CareTaker = function(){
	var conState = null;
	this.SetNotesState = function(_conState){
		conState =  _conState;
	}
	this.GetNotesState = function(){
		return conState;
	}
}

// Usage
var notes = new Notes();
notes.value = 'Test 1';
console.log('Notizen:', notes);

var careTaker = new CareTaker();
console.log('Snaphot...');
careTaker.SetNotesState(notes.saveState());

console.log('Notizen ändern...');
notes.value = 'Test 2';
console.log('Notizen:', notes);

console.log('Rückgängig machen...');
notes.restoreState(careTaker.GetNotesState());
console.log('Notizen:', notes);

Tipp: zum Test kann der Code 1:1 in die Browser-Konsole eingefügt werden.

Aber Vorsicht: das Memento-Pattern hat nicht nur Vorteile, sondern kann bei falscher (zu häufiger) Anwendung enorme Performance-Einbußen verursachen.

Mehr über Java Programmierung erfahren