《javascript设计模式》笔记之第九章：组合模式

var Composite = new Interface(‘Composite‘, [‘add‘, ‘remove‘, ‘getChild‘]);
var FormItem = new Interface(‘FormItem‘, [‘save‘]);

var CompositeForm = function(id, method, action) { // implements Composite, FormItem
  this.formComponents = [];

  this.element = document.createElement(‘form‘);
  this.element.id = id;
  this.element.method = method || ‘POST‘;
  this.element.action = action || ‘#‘;
};

CompositeForm.prototype.add = function(child) {
  Interface.ensureImplements(child, Composite, FormItem);
  this.formComponents.push(child);
  this.element.appendChild(child.getElement());
};

CompositeForm.prototype.remove = function(child) {
  for(var i = 0, len = this.formComponents.length; i < len; i++) {
    if(this.formComponents[i] === child) {
      this.formComponents.splice(i, 1); // Remove one element from the array at 
                                        // position i.
      break;
    }
  }
};

CompositeForm.prototype.getChild = function(i) {
  return this.formComponents[i];
};

CompositeForm.prototype.save = function() {
  for(var i = 0, len = this.formComponents.length; i < len; i++) {
    this.formComponents[i].save();
  }
};

CompositeForm.prototype.getElement = function() { 
  return this.element; 
};

var Field = function(id) { // implements Composite, FormItem
  this.id = id;
  this.element;
};

Field.prototype.add = function() {};
Field.prototype.remove = function() {};
Field.prototype.getChild = function() {};

Field.prototype.save = function() {
  setCookie(this.id, this.getValue);
};

Field.prototype.getElement = function() { 
  return this.element; 
};

Field.prototype.getValue = function() { 
  throw new Error(‘Unsupported operation on the class Field.‘); 
};

var InputField = function(id, label) { // implements Composite, FormItem
  Field.call(this, id);

  this.input = document.createElement(‘input‘);
  this.input.id = id;

  this.label = document.createElement(‘label‘);
  var labelTextNode = document.createTextNode(label);
  this.label.appendChild(labelTextNode);

  this.element = document.createElement(‘div‘);
  this.element.className = ‘input-field‘;
  this.element.appendChild(this.label);
  this.element.appendChild(this.input);
};
extend(InputField, Field); // Inherit from Field.

InputField.prototype.getValue = function() { 
  return this.input.value;
};

/* TextareaField class. */

var TextareaField = function(id, label) { // implements Composite, FormItem
  Field.call(this, id);

  this.textarea = document.createElement(‘textarea‘);
  this.textarea.id = id;

  this.label = document.createElement(‘label‘);
  var labelTextNode = document.createTextNode(label);
  this.label.appendChild(labelTextNode);

  this.element = document.createElement(‘div‘);
  this.element.className = ‘input-field‘;
  this.element.appendChild(this.label);
  this.element.appendChild(this.textarea);
};
extend(TextareaField, Field); // Inherit from Field.

TextareaField.prototype.getValue = function() { 
  return this.textarea.value;
};

/* SelectField class. */

var SelectField = function(id, label) { // implements Composite, FormItem
  Field.call(this, id);

  this.select = document.createElement(‘select‘);
  this.select.id = id;

  this.label = document.createElement(‘label‘);
  var labelTextNode = document.createTextNode(label);
  this.label.appendChild(labelTextNode);

  this.element = document.createElement(‘div‘);
  this.element.className = ‘input-field‘;
  this.element.appendChild(this.label);
  this.element.appendChild(this.select);
};
extend(SelectField, Field); // Inherit from Field.

SelectField.prototype.getValue = function() {
  return this.select.options[this.select.selectedIndex].value;
};

var contactForm = new CompositeForm(‘contact-form‘, ‘POST‘, ‘contact.php‘);

contactForm.add(new InputField(‘first-name‘, ‘First Name‘));
contactForm.add(new InputField(‘last-name‘, ‘Last Name‘));
contactForm.add(new InputField(‘address‘, ‘Address‘));
contactForm.add(new InputField(‘city‘, ‘City‘));
contactForm.add(new SelectField(‘state‘, ‘State‘, stateArray)); // var stateArray =
    [{‘al‘, ‘Alabama‘}, ...]
contactForm.add(new InputField(‘zip‘, ‘Zip‘));
contactForm.add(new TextareaField(‘comments‘, ‘Comments‘));

addEvent(window, ‘unload‘, contactForm.save);

var Composite = new Interface(‘Composite‘, [‘add‘, ‘remove‘, ‘getChild‘]);
var GalleryItem = new Interface(‘GalleryItem‘, [‘hide‘, ‘show‘]);

var DynamicGallery = function(id) { // implements Composite, GalleryItem
  this.children = [];

  this.element = document.createElement(‘div‘);
  this.element.id = id;
  this.element.className = ‘dynamic-gallery‘;
}

DynamicGallery.prototype = {

  // Implement the Composite interface.

  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.getChild(i); i++) {
      if(node == child) {
        this.formComponents[i].splice(i, 1);
        break;
      }
    }
    this.element.removeChild(child.getElement());
  },
  getChild: function(i) {
    return this.children[i];
  },

  // Implement the GalleryItem interface.
  
  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();
    }    
  },
  
  // Helper methods.
  
  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();      // Show the main gallery,
vacationPhotos.hide();  // but hide the vacation gallery.