组合模式

1. 描述：将多个部分通过组合变成一个整体。
2. 好处：
3. 例子:

{/*
 <form>
        <div class="form-line">
            <label for="user">用户名</label>
            <input type="text" id="user" name="user">
        </div>
        <div class="form-line">
            <label for="pwd">密码</label>
            <input type="password" id="pwd" name="pwd">
        </div>
        <div class="form-line">
            <input type="submit" value="登录">
        </div>
    </form>
*/}

// 使用组合模式实现以上的
window.onload = function() {
  // 组合寄生式继承
  function inheritPrototype(subClass, superClass) {
    function F() {}
    F.prototype = superClass.prototype;
    subClass.prototype = new F();
    subClass.prototype.constructor = subClass;
  }
  // 基类
  function Container() {
    this.children = [];
    this.element = null;
  }
  Container.prototype = {
    init: function() {
      throw new Error("重写init方法");
    },
    add: function(child) {
      this.children.push(child);
      this.element.appendChild(child.element);
    },
  };

  // 基于容器基类创建表单容器
  function CreateForm(id, method, action, parent) {
    Container.call(this);
    this.id = id || "";
    this.method = method || "get";
    this.action = action || "";
    this.parent = parent;

    this.init();
  }
  inheritPrototype(CreateForm, Container);
  CreateForm.prototype.init = function() {
    this.element = document.createElement("form");
    this.element.id = this.id;
    this.element.method = this.method;
    this.element.action = this.action;
  };
  CreateForm.prototype.show = function() {
    this.parent.appendChild(this.element);
  };

  // 行容器组件
  function CreateLine(className) {
    Container.call(this);
    this.className =
      className === undefined ? "form-line" : "form-line" + className;
    this.init();
  }
  inheritPrototype(CreateLine, Container);
  CreateLine.prototype.init = function() {
    this.element = document.createElement("div");
    this.element.className = this.className;
  };

  // label组件
  function CreateLable(text, forName) {
    this.text = text || "";
    this.forName = forName || "";
    this.init();
  }
  CreateLable.prototype.init = function() {
    this.element = document.createElement("label");
    this.element.setAttribute("for", this.forName);
    this.element.innerHTML = this.text;
  };

  // input组件
  function CreateInput(type, id, name, defaultValue) {
    this.type = type || "";
    this.id = id || "";
    this.name = name || "";
    this.defaultValue = defaultValue || "";
    this.init();
  }
  CreateInput.prototype.init = function() {
    this.element = document.createElement("input");
    this.element.type = this.type;
    this.element.id = this.id;
    this.element.name = this.name;
    this.element.defaultValue = this.defaultValue;
  };

  // 使用
  var form = new CreateForm("ownerForm", "GET", "/aaa.html", document.body);

  var useLine = new CreateLine();
  useLine.add(new CreateLable("用户名", "user"));
  useLine.add(new CreateInput("text", "user", "user"));

  var pwdLine = new CreateLine();
  pwdLine.add(new CreateLable("密码", "pwd"));
  pwdLine.add(new CreateInput("password", "pwd", "pwd"));

  var submitLine = new CreateLine();
  submitLine.add(new CreateInput("submit", "", "", "登录"));

  form.add(useLine);
  form.add(pwdLine);
  form.add(submitLine);
  form.show();
};