本文为阅读《Javascript设计模式》一书后，总结部分内容而得。其内部的代码和截图都来源自该书。
使用组合模式的一个场景示例
想象一下，现在你需要维护一个个人信息的页面，当用户不同时，页面也可能会发生变化。比如，当用户为小明时，展示给他的页面是这样的
而当用户为小红时，展示给她的页面是这样的
我现在想要实现保存页面信息的功能，面对各种各样的可能页面，页面上的各种元素保存信息的方式也不同，比如select和input框，其取值方式就完全不同。我要如何通过统一的函数来保存这些页面信息呢？有一种方法，是通过每次保存页面时，都遍历页面所有元素，判断所有元素类型，并依据个元素类型执行对应的save函数。但这样很显然，会使代码看上去混乱且臃肿。
用组合模式实现保存功能则你可以用一条简单的命令，在多个子对象上激发递归行为，将保存功能委托给各个子对象来实现，让每个子对象都知道如何保存自己本身的信息，父对象只是起到一个传递调用的功能。
组合模式
组合对象的结构
一个组合对象由一些别的组合对象和叶对象组成。不再包含子对象的叫叶对象，其下一层级仍然包含子对象的叫组合对象。结构图如下图：
什么情况下使用组合模式
- 存在一批组织成某种层次体系的对象
- 希望对这批对象或其中一部分对象实施一个操作
一个使用组合模式的示例----表单信息存储
现在我们来看，使用组合模式，如何实现在本文最开始提出的那个表单信息存储功能。
下图为表单的结构
明确组合对象及叶对象要具备的函数
首先，我们要明确，想让组合对象以及叶对象实现哪些接口，即具备哪些方法。在本例中，我想让他们实现两个接口Composite和FormItem
var Composite=new Interface('Composite',['add''remove','getChild']);
var FormItem=new Interface('FormItem',['save']);定义叶对象
所有叶对象，都继承了Field，具有Field对象所定义的所有方法，即add,remove,getChild以及save
我们先实现该父类Field
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.');
};
其实三个对象只有getValue方法是不同的。
/* InputField class. */
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;
};定义根级组合对象
（注意，在当前这个实例中，根据要实现的功能，我只将页面划分为了根级组合对象和叶对象，并没有中间层级的组合对象）
在这段定义中，我们对所有添加进组合对象的叶对象进行了判断，只有该对象实现了Composite, FormItem两个接口，才添加进组合对象成为叶对象。
</pre><pre name="code" class="javascript">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 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);
总结下通过该模式实现保存功能的流程，首先，我们对页面添加了监听，一旦页面加载，就调用组合对象的save方法，而该save函数，遍历了其下的所有叶对象，并调用该对象的save函数来实现其save函数。
向接口添加方法
如果现在有业务更改，除了save函数，我还要在每次页面加载后对所有对象执行restore操作。为了增加这一功能，我想要修改FormItem接口，在接口中增加一个函数。如何实现呢？
//修改接口的定义
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);
更复杂一点的示例
好，第一个示例我们已经实现了，更进一步，如果现在我想对某几个叶对象的组合执行某些操作呢？比如说， 我想在一定条件被触发时，对某几个叶对象执行save函数，而不是对所有叶对象执行该函数。这时，我们就需要添加非根级的组合对象了，也就是说，把这几个想要操作的叶对象，视为一个组合对象。
定义非根级组合对象
对于当前的非根级组合对象，并不受到根级组合对象的影响，比如，根级组合对象是通过数组来存储其下的组合对象和叶对象，各非根级组合对象，可以用数组存储叶对象，也可以用对象来存储叶对象。那么在下面，我们就举一个用对象来存储叶对象的代码示例
var CompositeFieldset = function(id, legendText) { // implements Composite, FormItem
this.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;
};
组合对象和叶对象汇合
var contactForm = new CompositeForm('contact-form', 'POST', 'contact.php');
//一个组合对象
var nameFieldset = new CompositeFieldset('name-fieldset');
nameFieldset.add(new InputField('first-name', 'First Name'));
nameFieldset.add(new InputField('last-name', 'Last Name'));
contactForm.add(nameFieldset);
//又一个组合对象
var addressFieldset = new CompositeFieldset('address-fieldset');
addressFieldset.add(new InputField('address', 'Address'));
addressFieldset.add(new InputField('city', 'City'));
addressFieldset.add(new SelectField('state', 'State', stateArray));
addressFieldset.add(new InputField('zip', 'Zip'));
contactForm.add(addressFieldset);
contactForm.add(new TextareaField('comments', 'Comments'));
body.appendChild(contactForm.getElement());
addEvent(window, 'unload', contactForm.save);
addEvent(window, 'load', contactForm.restore);
//对指定组合对象的操作
addEvent('save-button', 'click', nameFieldset.save);
addEvent('restore-button', 'click', nameFieldset.restore);
扫一扫
144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
