javascript-组合模式

   //原型式继承  2 function inheritobject(o){  3 //声明一个过渡函数对象  4 function F(){  5  }  6 //过渡原型对象继承父对象  7 F.prototype=o;  8 //返回过渡对象的一个实列，该实例的原型继承了父对象  9 return new F(); 10  } 11 /* 12  *寄生式继承 继承原型 13  * 传递参数subclass 子类 14  * 传递参数superclass 父类 15  * */ 16 function inheritPrototype(subclass,superclass){ 17 //复制一份父类的原型副本保存在变量中 18 var p=inheritobject(superclass.prototype); 19 //修正因为重写子类原型导致子类的constructor属性被修改 20 p.constructor=subclass; 21 //设置子类原型 22 subclass.prototype=p; 23 }

表单 demo

  1.表单虚拟父类 Base

            //表单虚拟父类 Base var Base = function(){ this.children = []; this.element = null;
            };
            Base.prototype = {
                init : function(){ throw new Error("请重写你的方法");
                },
                add : function(){ throw new Error("请重写你的方法");
                },
                getElement : function(){ throw new Error("请重写你的方法");
                }
            };

  2.FormItem容器类

//FormItem  2 var FormItem = function(id,parent){  3 Base.call(this);  4 this.id = id;  5 this.parent = parent;  6 this.init();  7  };  8  inheritPrototype(FormItem,Base);  9 FormItem.prototype = { 10 init : function(){ 11 this.element =document.createElement('form'); 12 this.element.id=this.id; 13 this.element.className='new-form'; 14  }, 15 add : function(child){ 16 this.children.push(child); 17 this.element.appendChild(child.getElement()); 18 return this; 19  }, 20 getElement : function(){ 21 return this.element; 22  }, 23 show : function(){ 24 this.parent.appendChild(this.element); 25  } 26 };

 3.FieldsetItem类

//FieldsetItem  2 var FieldsetItem = function(classname,legend){  3 Base.call(this);  4 this.classname=classname || '';  5 this.legend=legend;  6 this.init();  7  };  8  inheritPrototype(FieldsetItem,Base);  9 FieldsetItem.prototype = { 10 init : function(){ 11 this.element = document.createElement('fieldset'); 12 var legendname = document.createElement('legend'); 13 legendname.innerHTML = this.legend; 14 this.element.appendChild(legendname); 15 this.element.className='new-fieldset'; 16  }, 17 add : function(child){ 18 this.children.push(child); 19 this.element.appendChild(child.getElement()); 20 return this; 21  }, 22 getElement : function(){ 23 return this.element; 24  }, 25 };

  4.Group类

var Group = function(){  2 Base.call(this);  3 this.init();  4  };  5  inheritPrototype(Group,Base);  6 Group.prototype = {  7 init : function(){  8 this.element = document.createElement('div');  9 this.element.className='group'; 10  }, 11 add : function(child){ 12 this.children.push(child); 13 this.element.appendChild(child.getElement()); 14 return this; 15  }, 16 getElement : function(){ 17 return this.element; 18  } 19 };

 5.InputItem

//InputItem  2 var InputItem = function(name){  3 Base.call(this);  4 this.classname = name;  5 this.id = name;  6 this.init();  7  };  8  inheritPrototype(InputItem,Base);  9 InputItem.prototype = { 10 init : function(){ 11 this.element = document.createElement('input'); 12 this.element.className=this.classname; 13 this.element.id=this.id; 14  }, 15 add : function(){ 16 17  }, 18 getElement : function(){ 19 return this.element; 20  } 21 };

 6.LabelItem类

//LabelItem  2 var LabelItem = function(name,nameText){  3 Base.call(this);  4 this.text = nameText;  5 this.name = name;  6 this.init();  7  };  8  inheritPrototype(LabelItem,Base);  9 LabelItem.prototype = { 10 init : function(){ 11 this.element = document.createElement('label'); 12 this.element.name=this.name; 13 this.element.innerHTML=this.text; 14  }, 15 add : function(){ 16 17  }, 18 getElement : function(){ 19 return this.element; 20  } 21 };

 7.SpanItem类

//SpanItem  2 var SpanItem = function(warntext){  3 Base.call(this);  4 this.text = warntext;  5 this.init();  6  };  7  inheritPrototype(SpanItem,Base);  8 SpanItem.prototype = {  9 init : function(){ 10 this.element = document.createElement('span'); 11 this.element.innerHTML=this.text; 12  }, 13 add : function(){ 14 15  }, 16 getElement : function(){ 17 return this.element; 18  } 19 };

测试代码

var form =new FormItem('FormItem',document.body);  2  form.add(  3 new FieldsetItem('account','账号').add(  4 new Group().add(  5 new LabelItem('uname','用户名：')  6  ).add(  7 new InputItem('uname')  8  ).add(  9 new SpanItem('4到6位数字或字母') 10  ) 11  ).add( 12 new Group().add( 13 new LabelItem('pwd','密&nbsp码：') 14  ).add( 15 new InputItem('pwd') 16  ).add( 17 new SpanItem('6到12位数字或字母') 18  ) 19  ) 20  ).add( 21 new FieldsetItem('info','信息').add( 22 new Group().add( 23 new LabelItem('name','昵称：') 24 ).add(new InputItem('name')) 25  ).add( 26 new Group().add( 27 new LabelItem('status','状态：') 28  ).add( 29 new InputItem('status') 30  ) 31  ) 32 ).show();

浏览器显示

生成的html代码