JS设计模式——9.组合模式

浏览数：26 / 时间：2015年06月09日

组合模式概述

组合模式是一种专为创建Web上的动态用户界面量身定制的模式.使用这种模式可以用一条命令在多个对象上激发复杂的递归的行为.

它可以用来把一批子对象组织成树形结构,并且使整棵树都可被遍历.所有组合对象都实现了一个用来获得子对象的方法.

组合对象有两种结构组合对象和叶对象,如下:

组合对象

/ | \

组合对象叶对象组合对象

/ \ / \

叶对象叶对象叶对象叶对象

组合模式的适用条件

存在一批组织成某种层次体系的对象(具体的结构在开发期间可能无法得知)
希望这批对象或其中的一部分对象实施一个操作.

组合模式擅长于对大批对象进行操作.它专为组织这类对象并把操作从一个层次向下一个层次传递而设计.

示例:表单验证

现在我们来设计一个表单,可以保存,恢复和验证其中的数据,但是这个表单中元素的内容和数目都是完全未知的,而且会因用户而异.

我们将input,select,textarea作为叶对象,所有的input组成组合对象,所有的select和textarea组成组合对象,所有的组合对象再组成最终的组合对象.

Task1:创建一个动态表单并实现save和validate操作

我们不想为表彰元素的每一种可能组合编写一种方法,而是决定让这两个方法与表单域自身关联起来.也就是说让每个域都知道如何保存和验证自己.

这里的难点在于如何同时在所有域上执行这些操作.我们不想用迭代的方法,而是用组合模式.

最顶层的组合对象将在其所有子对象上递归调用save方法.

//
var Composite = new Interface(‘Composite‘, [‘add‘, ‘remove‘, ‘getChild‘]);
var FormItem = new Interface(‘FormItem‘, [‘save‘]);
var CompositeForm = function(id, method, action){
    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.getElment());
};
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;
};
//
var Field = function(id){
    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){
    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);
InputField.prototype.getValue = function(){
    return this.input.value;
};
var TextareaField = function(id, label){
    Field.call(this, id);

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

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

    this.element = document.createElement(‘div‘);
    this.element.className = ‘input-field‘;
    this.element.appendChild(this.label);
    this.element.appendChild(this.textarea);
}
extend(TextareaField, Field);
TextareaField.prototype.getValue = function(){
    return this.textarea.value;
};
var SelectField = function(id, label){
    Field.call(this, id);

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

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

    this.element = document.createElement(‘div‘);
    this.element.className = ‘input-field‘;
    this.element.appendChild(this.label);
    this.element.appendChild(this.select);
}
extend(SelectField, Field);
SelectField.prototype.getValue = function(){
    return this.select.options[this.select.selectedIndex].value;
};

Task2:汇合起来

这是组合模式大放光彩的地方.无论有多少个表单域,对整个组合对象执行操作只需一个函数调用即可.

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));
contactForm.add(new InputField(‘zip‘, ‘Zip‘));
contactForm.add(new TextareaField(‘comments‘, ‘Comments‘));
var stateArray = [{‘al‘: ‘Alabama‘},...];
addEvent(window, ‘unload‘, contactForm.save);

Task3:向FormItem添加操作

1.修改接口

var FormItem = new Interface(‘FormItem‘, [‘save‘, ‘restore‘]);

2.在叶对象类上实现这些操作

Field.prototype.restore = function(){
    this.element.value = getCookie(this.id);
};

3.为组合对象添加同样的操作

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

4.注册事件

addEvent(window, ‘load‘, contactForm.restore);

Task4:向层次体系中添加类

到目前为止只有一个组合对象类.如果设计目标要求对操作的调用有更多粒度上的控制,那么,可以添加更多层次的组合对象类,而不必改变其他类.

在层次体系中创建新的层次是一个更好的选择.我们可以把域组织在域集中,每一个域集都是一个实现FormItem接口的组合对象.

var CompositeFieldset = function(id, legendText){
    this.components = {};
    this.element = document.createElement(‘fieldset‘);
    this.element.id = id;
    if(legendText){
        this.legend = document.createElement(‘legend‘);
        this.legend.appendChild(document.createTextNode(legendText));
        this.element.appendChild(this.legend);
    }
};
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 nameFieldset = new CompositeFieldset(‘name-fieldset‘);
nameFieldset.add(new InputField(‘first-name‘, ‘First Name‘));
nameFieldset.add(new InputField(‘last-name‘, ‘Last Name‘));
contactForm.add(nameFieldset);