代码:form.html
//进行对象的创建,该对象有6个成员,每个对象都有自己的属性
var elements=[
{
tag:'input',
text:'姓名:',
attr:{type:'text',name:'user'},
option:null
},
{
tag:'input',
text:'性别:',
attr:{type:'radio',name:'gender'},
option:{m:'男',w:'女'}
},
{
tag:'input',
text:'爱好:',
attr:{type:'checkbox',name:'hobby[]'},
option:{swimming:'游泳',reading:'读书',running:'跑步'}
},
{
tag:'select',
text:'住址:',
attr:{name:'area'},
option:{'':'- - 请选择- -',bj:'北京',sh:'上海',sz:'深圳'}
},
{
tag:'textarea',
text:'自我介绍:',
attr:{name:'introduce',rows:'5',cols:'50'},
option:null
},
{
tag:'input',
text:'',
attr:{type:'submit',value:'提交'},
option:null
}
];
var html =new FormBuilder(elements).create();//利用构造函数来创建对象
document.getElementById('form').innerHTML=html;
FormBuilder.js:
(function(window){//自调用的匿名函数,window对象是全局的,可直接使用FormBuilder,匿名函数中定义的的变量,函数都不会污染全局作用域。体现封装性。
//创建构造函数FormBuilder
var FormBuilder=function(data){
this.data=data;
var builder={
toHTML:function(obj){
//访问对象的属性,返回结果
var html=this.item[obj.tag](this.attr(obj.attr),obj.option);
//“this.item[obj.tag]()" 用于根据obj.tag的值来调用item对象中的万法。例如,当obj.tag的值为input时,就表示调用builder item.input()方法。item对象是builder对象的一个属性,该对象内包含了input()、select()和 textarea()3个方法,分别用于生成、
return '
},
attr:function(attr){
//遍历对象的成员
var html='';
for(var k in attr){
html+=k+'="'+attr[k]+'"';
}
return html;
},
item:{
input:function(attr,option){
var html='';
if(option===null){
html+='';
}else{
//遍历成员
for (var k in option){
html +='
html+=option[k]+'';
}
}
return html;
},
select:function(attr,option){
var html='';
for(var k in option){
html+='';
}
return '';
},
textarea:function(attr){
return '';
}
}
};
编写create()方法:
FormBuilder.prototype.create=function(){
var html='';
for (var k in this.data){
var item ={tag:'',text:'',attr:{},option:null};
for(var n in this.data[k]){
item[n]=this.data[k][n];
}
html+=builder.toHTML(item);
}
return '
};
};
window.FormBuilder=FormBuilder;
})(window);