Design Patterns

238
CHAPTER 16 ■ THE COMMAND PATTERN
code for each UI class you create. If you want to use these commands as keyboard shortcuts,
you have to implement the stack-pushing code again. A better solution is to wrap each command
in a decorator that implements this code for you. You could then pass each command to
whatever UI element you like, without worrying about the undo code.
Here is a decorator that pushes the command to a stack before executing it:
/* UndoDecorator class. */
var UndoDecorator = function(command, undoStack) { // implements ReversibleCommand
this.command = command;
this.undoStack = undoStack;
};
UndoDecorator.prototype = {
execute: function() {
this.undoStack.push(this.command);
this.command.execute();
},
undo: function() {
this.command.undo();
}
};
This is a great use of the decorator pattern. It allows you to add an extra feature to the
commands while still maintaining the same interface. These decorator objects can be used
interchangeably with all of the command objects in this example.
Next come the UI classes; these create the necessary HTML elements and attach click
listeners to them, which invoke either execute or undo:
/* CommandButton class. */
var CommandButton = function(label, command, parent) {
Interface.ensureImplements(command, ReversibleCommand);
this.element = document.createElement('button');
this.element.innerHTML = label;
parent.appendChild(this.element);
addEvent(this.element, 'click', function() {
command.execute();
});
};
/* UndoButton class. */
var UndoButton = function(label, parent, undoStack) {
this.element = document.createElement('button');
this.element.innerHTML = label;
parent.appendChild(this.element);