组合模式笔记
组合模式又称部分-整体模式，将对象组合成树形结构以表示'部分整体'的层次结构
组合模式使得用户对单个对象和组合对象的使用具有一致性
demo实例 ：表单模块
要调用到前面学习到的寄生组合继承方法
1 //原型式继承 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容器类
1 //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类
1 //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类
1 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
1 //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类
1 //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类
1 //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 };
测试代码
1 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','密 码：') 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代码
