JavaScript 设计模式之组合模式解析(2)

// GalleryImage class
var GalleryImage = function(src){    // 实现Composite和GalleryItem组合对象中所定义的方法
    this.element = document.createElement('img');
    this.element.className = 'gallery-image';
    this.element.src = src;
}
GalleryImage.prototype = {

    // 实现Composite接口
    // 这些是叶结点，所以我们不用实现这些方法，我们只需要定义即可
    add : function(){},
    remove : function(){},
    getChild : function(){},
    // 实现GalleryItem接口
    hide : function(){
        this.element.style.display = 'none';
    },
    show : function(){
        this.element.style.display = '';
    },
    // 帮助方法
    getElement : function(){
        return this.element;
    }
}

这是一个演示组合模式的工作方式的例子。每个类都很简单，但由于有了这样一种层次体系，我们就可以执行一些复杂操作。GalleryImage类的构造函数会创建一个image元素。这个类定义中的其余部分由空的组合对象方法（因为这是叶结点）和GalleryItem要求的操作组成。现在我们可以使用这两个类来管理图片：

复制代码 代码如下:

var topGallery = new DynamicGallery('top-gallery');
topGallery.add(new GalleryImage('/img/image-1.jpg'));
topGallery.add(new GalleryImage('/img/image-2.jpg'));
topGallery.add(new GalleryImage('/img/image-3.jpg'));
var vacationPhotos = new DyamicGallery('vacation-photos');
for(var i = 0, i < 30; i++){
    vacationPhotos.add(new GalleryImage('/img/vac/image-' + i + '.jpg'));
}
topGallery.add(vacationPhotos);
topGallery.show();
vacationPhotos.hide();

组合模式之利，使用组合模式，简单的操作也能产生复杂的结果。不必编写大师手工遍历数组或其他数据结构的粘合代码，只需对最顶层的对象执行操作，主每一个子对象自己传递这个操作即可。这对于那些再三执行的操作尤其有用。在组合模式中，各个对象之间的耦合非常松散。每当对顶层组合对象执行一个操作时，实际上是在对整个结构进行尝试优先的搜索以查找节点。
组合模式之弊，由于对组合模式调用的任何操作都会被颇佳北至 它的所有子对象，如果这个层次体系很大的话，系统的性能将会受到影响。

您可能感兴趣的文章: