Design Patterns

CHAPTER 17 ■ THE CHAIN OF RESPONSIBILITY PATTERN 259
Let’s add three methods to the interface: addTag will add a tag to the object it is called on
and to all of its child objects; getPhotosWithTag will return an array of all of the photos that
have a certain tag; and getAllLeaves can be called on any composite to get an array of all of its
leaf nodes. Calling this method on a leaf node just returns an array consisting of itself. We will
start with addTag because it is the simplest:
/* DynamicGallery class. */
var DynamicGallery = function(id) { // implements Composite, GalleryItem
this.children = [];
this.tags = [];
this.element = document.createElement('div');
this.element.id = id;
this.element.className = 'dynamic-gallery';
}
DynamicGallery.prototype = {
...
addTag: function(tag) {
this.tags.push(tag);
for(var node, i = 0; node = this.getChild(i); i++) {
node.addTag(tag);
}
},
...
};
/* GalleryImage class. */
var GalleryImage = function(src) { // implements Composite, GalleryItem
this.element = document.createElement('img');
this.element.className = 'gallery-image';
this.element.src = src;
this.tags = [];
}
GalleryImage.prototype = {
...
addTag: function(tag) {
this.tags.push(tag);
},
...
};
We add an array called tags to both the composite and the leaf classes. This array will
hold the strings that represent the tags. In the leaf class’s addTag method, you simply push the
string passed in as the argument to the tags array. In the composite class’s method, you do
that, as well as pass the request down the hierarchy, just like any other normal composite
method. Despite the fact that giving a tag to a composite object effectively gives the tag to all
of its child objects, you must still add the tag to each child object. A search can be started at