Design Patterns

226
CHAPTER 16 ■ THE COMMAND PATTERN
Next, you need two classes, one for encapsulating the start method of the ad, and another
for encapsulating the stop method:
/* StopAd command class. */
var StopAd = function(adObject) { // implements AdCommand
this.ad = adObject;
};
StopAd.prototype.execute = function() {
this.ad.stop();
};
/* StartAd command class. */
var StartAd = function(adObject) { // implements AdCommand
this.ad = adObject;
};
StartAd.prototype.execute = function() {
this.ad.start();
};
These are very typical command classes. They take another object as an argument to the
constructor and implement an execute method that calls one particular method of that object.
There are now two classes with identical interfaces that can be used in the UI. You don’t know
or care what the concrete implementation of adObject is; as long as it implements start and
stop methods, it will work. The command pattern allows you to decouple the UI objects from
the ad objects.
To show how this works, the following UI has two buttons for each ad in the user’s
account, one that starts the ad rotation, and another that stops it:
/* Implementation code. */
var ads = getAds();
for(var i = 0, len = ads.length; i < len; i++) {
// Create command objects for starting and stopping the ad.
var startCommand = new StartAd(ads[i]);
var stopCommand = new StopAd(ads[i]);
// Create the UI elements that will execute the command on click.
new UiButton('Start ' + ads[i].name, startCommand);
new UiButton('Stop ' + ads[i].name, stopCommand);
}
The UiButton class constructor takes a button label and a command object. It then creates
a button on the page that invokes the command’s execute method when clicked. This is another
module that doesn’t need to know the exact implementation of the command objects being
used. Because every command implements an execute method, you could pass in any kind of
command and the UiButton class would know how to interact with it. This allows the creation
of very modular and decoupled user interfaces.