javascript设计模式-组合-Toy模板网

这篇具有很好参考价值的文章主要介绍了javascript设计模式-组合。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

组合模式

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

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

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

一个简单的例子-动态FORM

这个例子需要注意的是，接口可能有多个，每个实现不同的内容。文章来源地址https://www.toymoban.com/news/detail-810182.html

/* 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, 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);
            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, 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.');
};

/* 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;
};

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, 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; 
};

到了这里，关于javascript设计模式-组合的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！