Design Patterns

CHAPTER 16
■ ■ ■
The Command Pattern
In this chapter, we take a look at a way to encapsulate the invocation of a method. The command
pattern is different from a normal function in several ways: it provides the ability to
parameterize and pass around a method call, which can then be executed whenever you need
it to be. It also allows you to decouple the object invoking the action from the object implementing
it, thus providing a huge degree of flexibility in swapping out concrete classes. The
command pattern can be used in many different situations, but it is very useful in creating
user interfaces, especially when an unlimited undo action is required. This pattern can also be
used in place of a callback function, as it allows greater modularity in passing the action from
object to object.
In the next few sections, we discuss the structure of the command pattern and give several
examples of how it can be used in JavaScript. We also cover the best places to use command
objects, and the situations where they should not be used.
The Structure of the Command
In its simplest form, a command object binds together two things: an action, and an object that
may wish to invoke that action. All command objects have one thing in common: an execute
operation, which invokes the action it is bound to. In most command objects, this operation is
a method called execute or run. All command objects that use the same interface can be treated
identically and can be swapped at will. This is part of the appeal of the command.
To show how the command pattern is typically used, we will walk through an example about
a dynamic user interface. Imagine you have an advertising company, and you wish to create
a web page that will allow customers to perform certain actions in regard to their accounts, such
as starting and stopping particular ads from running. It’s not known how many ads there will be,
so you want to create a user interface (UI) that is as flexible as possible. To do this, you will use the
command pattern to loosely couple UI elements, such as buttons, with actions.
First, you need an interface that all commands must respond to:
/* AdCommand interface. */
var AdCommand = new Interface('AdCommand', ['execute']);
225