Composite in Javascript

    本文从简的演示利用Composite Pattern来动态创建form，它支持保存和还原上次输入的数据。

    第一步，定义接口：

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

你懂的，这里是基于single responsibility rule将接口分为2个。

    然后，分别来实现2个接口了： 

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.getElement());
    },
    remove: function (child) {
        for (var i = 0; i < this.formComponents.length; i++) {
            if (this.formComponents[i] == child) {
                this.formComponents.splice(i, 1);
                this.element.removeChild(child.getElement());
                break;
            }
        }
    },
    getChild: function (i) {
        if (i >= this.formComponents.length) {
            throw new Error("i is out of range.");
        }
        return this.fromComponents[i];
    },
    save: function () {
        for (index in formComponents) {
            this.formComponents[index].save();
        }
    },
    restore: function () {
        for (index in formComponents) {
            this.formComponents[index].resotre();
        }
    },
    getElement: function () {
        return this.element;
    }
};
CompositeForm.prototype.constructor = CompositeForm;

// composite fieldset
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 = {
    add: function (child) {
        Interface.ensureImplements(child, [Composite, FormItem]);
        this.components[child.getElement().id] = child;
        this.element.appendChild(child.getElement());
    },
    remove: function (child) {
        delete this.components[child.getElement().id];
        this.element.removeChild(child.getElement());
    },
    getChild: function (id) {
        return this.components[id];
    },
    save: function () {
        for (index in components) {
            if (components.hasOwnProperty(index)) {
                this.fieldset[index].save();
            }
        }
    },
    restore: function () {
        for (index in components) {
            if (components.hasOwnProperty(index)) {
                this.fieldset[index].resotre();
            }
        }
    },
    getElement: function () {
        return this.element;
    }
};
CompositeFieldset.prototype.constructor = CompositeFieldset;


// field abstract class
var Field = function (id) {
    this.element = document.createElement('div');
    this.element.id = id;
    this.element.className = 'input-field';
};
Field.prototype = {
    add: function (child) {
    },
    remove: function (i) {
    },
    getChild: function (i) {
    },
    save: function () {
        setCookie(this.id, this.getValue());
    },
    resotre: function () {
        var value = getCookie(this.id);
        setValue(value);
    },
    getElement: function () {
        return this.element;
    },
    getValue: function () {
        throw new Error("Unimplemented on the class Field.");
    },
    setValue: function () {
        throw new Error("Unimplemented on the class Field.");
    }
};
Field.prototype.constructor = Field;

// input field class
var InputField = function (id, label) {
    this.superClass.constructor.call(this, id);

    this.input = document.createElement('input');
    this.input.id = id + "_input";
    this.label = document.createElement('label');
    this.label.id = id + "_label";
    var labelTextNode = document.createTextNode(label);
    this.label.appendChild(labelTextNode);

    this.element.appendChild(this.label);
    this.element.appendChild(this.input);
};
extend(InputField, Field);
InputField.prototype.getValue = function () {
    return this.input.value;
};
InputField.prototype.getValue = function (value) {
    this.input.value = value;
};

// textarea field class
var TextAreaField = function (id, label) {
    this.superClass.constructor.call(this, id);

    this.textArea = document.createElement('textarea');
    this.textArea.id = id + "_textarea";
    this.label = document.createElement('label');
    this.label.id = id + "_label";
    var labelTextNode = document.createTextNode(label);
    this.label.appendChild(labelTextNode);

    this.element.appendChild(this.label);
    this.element.appendChild(this.textArea);
};
extend(TextAreaField, Field);
TextAreaField.prototype.getValue = function () {
    return this.textArea.value;
};
TextAreaField.prototype.getValue = function (value) {
    this.textArea.value = value;
};

// select field class
var SelectField = function (id, label, options) {
    this.superClass.constructor.call(this, id);

    this.select = document.createElement('select');
    this.select.id = id + "_select";
    for(var i = 0;i<options.length;i++){
        var option = document.createElement("option");
        option.text = options[i].text;
        option.value = options[i].value;
        try{
            this.select.add(option, this.select.options[null]);
        }
        catch(e){
            this.select.add(option, null);
        }
    }
    this.label = document.createElement('label');
    this.label.id = id + "_label";
    var labelTextNode = document.createTextNode(label);
    this.label.appendChild(labelTextNode);

    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;
};
SelectField.prototype.getValue = function (value) {
    for (index in this.select.options) {
        if (this.select.options[index].value == value) {
            this.select.selectedIndex = index;
            break;
        }
    }
};

 

测试代码如下： 

    var contactForm = new CompositeForm("contactForm", "post", "contact.php"); 
    var nameFieldset = new CompositeFieldset('nameFieldset', "Name");
    nameFieldset.add(new InputField("firstName", "First Name"));
    nameFieldset.add(new InputField("lastName", "Last Name"));
    contactForm.add(nameFieldset);

    var addressFieldset = new CompositeFieldset('addressFieldset', "Address");
    addressFieldset.add(new InputField("address", "Address"));
    addressFieldset.add(new SelectField("state", "State", [{"text": "Alabama", "value": "Alabama"}, {"text": "Seattle", "value": "Seattle"}]));
    addressFieldset.add(new InputField('zip', 'Zip'));    
    contactForm.add(addressFieldset);

    contactForm.add(new TextAreaField('comments', 'Comments'));

    body.appendChild(contactForm.getElement());
    addEvent(window, "load", contactForm.restore);
    addEvent(window, "unload", contactForm.save);

这里不再详细解释了，注意Field类是abstract的即可。 download