组合模式

是一种专为创建WEB上的动态用户界面而量身定制的模式。使用它，可以用一条命令在多个对象上激发复杂或递归行为，那些复杂行为被委托给各个对象。前提是每个对象必须实现相同的接口。接口检查越严格，其稳定性越高。

• 可以用同样的方法处理对象的集合与其中的特定子对象，组合对象与组成它的对象实现了同一批操作；
• 可以用来把一批子对象组织成树形结构，并且使整棵树都可以遍历，所有组合对象都实现了一个用来获取其子对象的方法；

下例是一个动态建立FORM的过程，但这个例子中各子对象没有组合的关系。

一个简单的例子-动态FORM

这个例子需要注意的是，接口可能有多个，每个实现不同的内容。

/* Interfaces. */
var Composite = new Interface('Composite', ['add', 'remove', 'getChild']);
var FormItem = new Interface('FormItem', ['save']);

/* CompositeForm class. */
var CompositeForm = function(id, method, action) { // implements Composite, FormItemthis.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);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;
};

/* Field class, abstract. */
var Field = function(id) { // implements Composite, FormItemthis.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.');
};

/* InputField class. */
var InputField = function(id, label) { // implements Composite, FormItemField.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, FormItemField.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;
};var contactForm = new CompositeForm('contact-form', 'POST', 'contact.php');contactForm.add(new InputField('first-name', 'First Name'));
addEvent(window, 'unload', contactForm.save);//添加另一个接口
var FormItem = new Interface('FormItem', ['save', 'restore']);
Field.prototype.restore = function() {this.element.value = getCookie(this.id);
};CompositeForm.prototype.restore = function() {for(var i = 0, len = this.formComponents.length; i < len; i++) {this.formComponents[i].restore();}
};
addEvent(window, 'load', contactForm.restore);

扩展—多组合对象FieldSet

var CompositeFieldset = function(id, legendText) { // implements Composite, FormItemthis.components = {};this.element = document.createElement('fieldset');this.element.id = id;if(legendText) { // Create a legend if the optional second // argument is set.this.legend = document.createElement('legend');this.legend.appendChild(document.createTextNode(legendText);this.element.appendChild(this.legend);}
};CompositeFieldset.prototype.add = function(child) {Interface.ensureImplements(child, Composite, FormItem);this.components[child.getElement().id] = child;this.element.appendChild(child.getElement());
};CompositeFieldset.prototype.remove = function(child) {delete this.components[child.getElement().id];
};CompositeFieldset.prototype.getChild = function(id) {if(this.components[id] != undefined) {return this.components[id];}else {return null;}
};CompositeFieldset.prototype.save = function() {for(var id in this.components) {if(!this.components.hasOwnProperty(id)) continue;this.components[id].save();}
};CompositeFieldset.prototype.restore = function() {for(var id in this.components) {if(!this.components.hasOwnProperty(id)) continue;this.components[id].restore();}
};CompositeFieldset.prototype.getElement = function() { return this.element; 
};