书读百遍其义自见
《JavaScript设计模式》一书组合模式在表单中应用，我问你答答案。
注：小编自己根据书中的栗子码的答案，如有错误，请留言斧正。
另：如有转载请注明出处，谢谢啦
<!DOCTYPE html>
<html>
<head>
<title>组合模式-表单实现</title>
<meta charset="utf-8">
<style type="text/css">
#FormItem{
width: 400px;
}
</style>
</head>
<body>
</body>
<script type="text/javascript">
//原型式继承
function inheritObject(o){
// 声明一个过度对象
function F(){};
// 过度对象的原型继承父对象
F.prototype=o;
// 返回过度对象的一个实例，该实例的原型继承了父对象
return new F();
} function inheritPrototype(subClass,superClass){
// 复制一份父类的原型副本保存在变量中
var p=inheritObject(superClass.prototype);
// 修正因为重写子类导致子类的constructor属性被修改
p.constructor=subClass;
subClass.prototype=p; } /*************** 基类 *****************/
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("请重写你的方法");
}
} /*************** 组合类 *****************/
var FormItem=function(id,parent){
// 构造函数继承父类
Base.call(this);
// 模块id
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='registe-form';
}
FormItem.prototype.add=function(child){
//在子容器中插入子元素
this.children.push(child);
// 插入当前组件元素树中
this.element.appendChild(child.getElement());
return this;//返回当前对象，便于链式使用方法
}
FormItem.prototype.getElement=function(){
return this.element;
}
FormItem.prototype.show=function(){
this.parent.appendChild(this.element);
} var FieldsetItem=function(className,text){
Base.call(this);
this.className=className;
this.init(text);
}
inheritPrototype(FieldsetItem,Base);
FieldsetItem.prototype.init=function(text){
this.element=document.createElement("fieldset");
this.element.className=this.className;
var legendNode = document.createElement("legend");
var textNode = document.createTextNode(text);
legendNode.appendChild(textNode);
this.element.appendChild(legendNode);
}
FieldsetItem.prototype.add=function(child){
//在子容器中插入子元素
this.children.push(child);
// 插入当前组件元素树中
this.element.appendChild(child.getElement());
return this;//返回当前对象，便于链式使用方法
}
FieldsetItem.prototype.getElement=function(){
return this.element;
} var Group=function(){
Base.call(this);
this.init();
}
Group.prototype.init=function(){
this.element=document.createElement("div");
}
Group.prototype.add=function(child){
//在子容器中插入子元素
this.children.push(child);
// 插入当前组件元素树中
this.element.appendChild(child.getElement());
return this;//返回当前对象，便于链式使用方法
}
Group.prototype.getElement=function(){
return this.element;
} /*************** 成员类 *****************/
var InputItem=function(className){
Base.call(this);
this.className=className;
this.init();
}
InputItem.prototype.init=function(){
this.element=document.createElement("input");
this.element.className=this.className;
}
InputItem.prototype.add=function(){}
InputItem.prototype.getElement=function(){
return this.element;
} var LabelItem=function(className,text){
Base.call(this);
this.className=className;
this.init(text);
}
LabelItem.prototype.init=function(text){
this.element=document.createElement("label");
this.element.appendChild(document.createTextNode(text));
this.element.className=this.className;
}
LabelItem.prototype.add=function(){}
LabelItem.prototype.getElement=function(){
return this.element;
} var SpanItem=function(text){
Base.call(this);
this.init(text);
}
SpanItem.prototype.init=function(text){
this.element=document.createElement("span");
this.element.appendChild(document.createTextNode(text));
}
SpanItem.prototype.add=function(){}
SpanItem.prototype.getElement=function(){
return this.element;
} var TextareaItem=function(){
Base.call(this);
this.init();
}
TextareaItem.prototype.init=function(){
this.element=document.createElement("textarea");
}
TextareaItem.prototype.add=function(){}
TextareaItem.prototype.getElement=function(){
return this.element;
} /*************** 调用 *****************/
var form=new FormItem('FormItem',document.body);
form.add(
new FieldsetItem('account','账号').add(
new Group().add(
new LabelItem('user_name','用户名：')
).add(
new InputItem('user_name')
).add(
new SpanItem('4到6位数字或字母')
)
).add(
new Group().add(
new LabelItem('user_pwd','密 码：')
).add(
new InputItem('user_pwd')
).add(
new SpanItem('6到12位数字或字母')
)
)
).add(
new FieldsetItem('info','信息').add(
new Group().add(
new LabelItem('nike_name','昵 称：')
).add(
new InputItem('nike_name')
)
).add(
new Group().add(
new LabelItem('user_status','状 态：')
).add(
new InputItem('user_status')
)
)
).show();
</script>
</html>