//通过“{}”创建对象，对象的成员以键值对的形式存放在{}中，多个成员之间使用逗号分隔。
//封装：这些表单项，以面向对象的思维来看，就是一个个对象。既有相同的基本特征，又有各自不同的地方。这些表单相当于一个个类，elements继承了这些类。体现了面向对象的封装性
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:'input',
text:'自我介绍：',
attr:{name:'introduce',row:'5',cols:'50'},
option:null
},
{
tag:'input',
text:'',
attr:{type:'submit',value:'提交'},
option:null
}
];
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:'跑步'}
},
];
//生成create()实例
var html=new FormBuilder(elements).create();
document.getElementById('form').innerHTML=html;
//将表单生成器封装成一个构造函数，在匿名函数中定义的变量和函数，都不会污染全局作用域，也体现了面向对象的封装性。
(function (window) {
var FormBuilder =function (data) {
this.data=data;
};
window.FormBuilder=FormBuilder;//FormBuilder作为传入对象的属性，而且window对象是全局的，所以当上述代码执行后，就可以直接使用FormBuilder
})(window);
继承：Javascript规定，每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承,因此不变的方法被定义在prototype上面。不变的属性，方法都可以定义成 .prototype. ;以FormBuilder.prototype.create来说，如果有另外一个想要继承它的话 直接可以A.prototype=FormBuilder.prototype,但是有缺点的是为了防止继承链紊乱，写A.prototype.contructor=A的时候相当于把FormBuilder.prototype.contructor也给改了，也可以直接写A.prototype=new FormBuilder();也需要写A.prototype.contructor=A防止继承链紊乱。 这样利用原型对象可以保存一些公共的属性和方法。当访问某个对象中的不存在的属性或方法时，会自动调用原型中的属性和方法。也就是继承
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 '<table>'+html+'</table>';
}
var builder ={
toHTML: function (obj) {
var html=this.item[obj.tag](this.attr(obj.attr), obj.option);
return '<tr><th>'+obj.text+'</th><td>'+html+'</td></tr>';
},
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+='<input' +attr + '>';
}else{
for(var k in option){
html+= '<label><input ' + attr + 'value="' + k +'"'+ '>';
html+=option[k]+'</label>';
}
}
return html;
},
select:function (attr,option) {
var html='';
for(var k in option){
html += '<option value="'+ k +'">' + option[k] +'</option>';
}
return '<select '+attr +'>' +html +'</select>';
},
textarea:function (attr) {
return '<textarea '+ attr + '></textarea>';
}
}
};
