JavaScript设计模式学习——Composite

 

//定义组合模式需要实现的接口

var Composite = new Interface('Composite',['add','remove','getChild']);
 var GalleryItem = new Interface('GalleryItem',['hide','show']);
 
 var DynamicGallery=function(id){
     this.children=[];
   
    this.element=document.createElement('div');
    this.element.id=id;
    this.element.className='dynamic-gallery';
 }
 
 DynamicGallery.prototype={
     add:function(child){
        Interface.ensureImplements(child,Composite,GalleryItem);
        this.children.push(child);
        this.element.appendChild(child.getElement());
    },
   
    remove:function(child){
        for(var node,i=0;node=this.children(i);i++){
            if(node==child){
                this.formComponents[i].splice(i,1);
                break;
            }
        }
        this.element.removeChild(child.getElement());
    },
   
    getChild:function(i){
        return this.children[i];
    },
   
    hide:function(){
        for(var node, i = 0; node = this.getChild(i); i++) {
      node.hide();
    }
    this.element.style.display = 'none';
    },
   
    show: function() {
    this.element.style.display = 'block';
    for(var node, i = 0; node = this.getChild(i); i++) {
      node.show();
    }   
  },
 
      getElement:function(){
        return this.element;
    }
 };
 
 var GalleryImage = function(src) { // implements Composite, GalleryItem
  this.element = document.createElement('img');
  this.element.className = 'gallery-image';
  this.element.src = src;
}

GalleryImage.prototype = {

  // Implement the Composite interface.

  add: function() {},       // This is a leaf node, so we don't
  remove: function() {},    // implement these methods, we just
  getChild: function() {},  // define them.

  // Implement the GalleryItem interface.
 
  hide: function() {
    this.element.style.display = 'none';
  },
  show: function() {
    this.element.style.display = ''; // Restore the display attribute to its
                                     // previous setting.
  },
 
  // Helper methods.
 
  getElement: function() {
    return this.element;
  }
};

 

================================================

 

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 DynamicGallery('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();