组合模式笔记
组合模式又称部分-整体模式，将对象组合成树形结构以表示'部分整体'的层次结构
组合模式使得用户对单个对象和组合对象的使用具有一致性
demo实例 ：表单模块
要调用到前面学习到的寄生组合继承方法
//原型式继承
function inheritobject(o){
//声明一个过渡函数对象
function F(){
}
//过渡原型对象继承父对象
F.prototype=o;
//返回过渡对象的一个实列，该实例的原型继承了父对象
return new F();
}
/*
*寄生式继承 继承原型
* 传递参数subclass 子类
* 传递参数superclass 父类
* */
function inheritPrototype(subclass,superclass){
//复制一份父类的原型副本保存在变量中
var p=inheritobject(superclass.prototype);
//修正因为重写子类原型导致子类的constructor属性被修改
p.constructor=subclass;
//设置子类原型
subclass.prototype=p;
}
表单 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
var FormItem = function(id,parent){
Base.call(this);
this.id = id;
this.parent = parent;
this.init();
};
inheritPrototype(FormItem,Base);
FormItem.prototype = {
init : function(){
this.element =document.createElement('form');
this.element.id=this.id;
this.element.className='new-form';
},
add : function(child){
this.children.push(child);
this.element.appendChild(child.getElement());
return this;
},
getElement : function(){
return this.element;
},
show : function(){
this.parent.appendChild(this.element);
}
};
3.FieldsetItem类
//FieldsetItem
var FieldsetItem = function(classname,legend){
Base.call(this);
this.classname=classname || '';
this.legend=legend;
this.init();
};
inheritPrototype(FieldsetItem,Base);
FieldsetItem.prototype = {
init : function(){
this.element = document.createElement('fieldset');
var legendname = document.createElement('legend');
legendname.innerHTML = this.legend;
this.element.appendChild(legendname);
this.element.className='new-fieldset';
},
add : function(child){
this.children.push(child);
this.element.appendChild(child.getElement());
return this;
},
getElement : function(){
return this.element;
},
};
4.Group类
var Group = function(){
Base.call(this);
this.init();
};
inheritPrototype(Group,Base);
Group.prototype = {
init : function(){
this.element = document.createElement('div');
this.element.className='group';
},
add : function(child){
this.children.push(child);
this.element.appendChild(child.getElement());
return this;
},
getElement : function(){
return this.element;
}
};
5.InputItem
//InputItem
var InputItem = function(name){
Base.call(this);
this.classname = name;
this.id = name;
this.init();
};
inheritPrototype(InputItem,Base);
InputItem.prototype = {
init : function(){
this.element = document.createElement('input');
this.element.className=this.classname;
this.element.id=this.id;
},
add : function(){ },
getElement : function(){
return this.element;
}
};
6.LabelItem类
//LabelItem
var LabelItem = function(name,nameText){
Base.call(this);
this.text = nameText;
this.name = name;
this.init();
};
inheritPrototype(LabelItem,Base);
LabelItem.prototype = {
init : function(){
this.element = document.createElement('label');
this.element.name=this.name;
this.element.innerHTML=this.text;
},
add : function(){ },
getElement : function(){
return this.element;
}
};
7.SpanItem类
//SpanItem
var SpanItem = function(warntext){
Base.call(this);
this.text = warntext;
this.init();
};
inheritPrototype(SpanItem,Base);
SpanItem.prototype = {
init : function(){
this.element = document.createElement('span');
this.element.innerHTML=this.text;
},
add : function(){ },
getElement : function(){
return this.element;
}
};
测试代码
var form =new FormItem('FormItem',document.body);
form.add(
new FieldsetItem('account','账号').add(
new Group().add(
new LabelItem('uname','用户名：')
).add(
new InputItem('uname')
).add(
new SpanItem('4到6位数字或字母')
)
).add(
new Group().add(
new LabelItem('pwd','密 码：')
).add(
new InputItem('pwd')
).add(
new SpanItem('6到12位数字或字母')
)
)
).add(
new FieldsetItem('info','信息').add(
new Group().add(
new LabelItem('name','昵称：')
).add(new InputItem('name'))
).add(
new Group().add(
new LabelItem('status','状态：')
).add(
new InputItem('status')
)
)
).show();
浏览器显示
生成的html代码