//通過“{}”創(chuàng)建對象，對象的成員以鍵值對的形式存放在{}中雅镊，多個(gè)成員之間使用逗號(hào)分隔。
//封裝：這些表單項(xiàng)刃滓，以面向?qū)ο蟮乃季S來看仁烹，就是一個(gè)個(gè)對象。既有相同的基本特征咧虎，又有各自不同的地方卓缰。這些表單相當(dāng)于一個(gè)個(gè)類，elements繼承了這些類砰诵。體現(xiàn)了面向?qū)ο蟮姆庋b性
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= [//多態(tài)：同一個(gè)操作作用于不同的對象
{
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()實(shí)例
var html=new FormBuilder(elements).create();
document.getElementById('form').innerHTML=html;
//將表單生成器封裝成一個(gè)構(gòu)造函數(shù)征唬，在匿名函數(shù)中定義的變量和函數(shù)，都不會(huì)污染全局作用域茁彭，也體現(xiàn)了面向?qū)ο蟮姆庋b性总寒。
(function (window) {
var FormBuilder =function (data) {
this.data=data;
};
window.FormBuilder=FormBuilder;//FormBuilder作為傳入對象的屬性，而且window對象是全局的理肺，所以當(dāng)上述代碼執(zhí)行后摄闸，就可以直接使用FormBuilder
})(window);
繼承：Javascript規(guī)定善镰，每一個(gè)構(gòu)造函數(shù)都有一個(gè)prototype屬性，指向另一個(gè)對象年枕。這個(gè)對象的所有屬性和方法炫欺，都會(huì)被構(gòu)造函數(shù)的實(shí)例繼承,因此不變的方法被定義在prototype上面。不變的屬性熏兄，方法都可以定義成 .prototype. ;以FormBuilder.prototype.create來說品洛，如果有另外一個(gè)想要繼承它的話 直接可以A.prototype=FormBuilder.prototype,但是有缺點(diǎn)的是為了防止繼承鏈紊亂，寫A.prototype.contructor=A的時(shí)候相當(dāng)于把FormBuilder.prototype.contructor也給改了霍弹，也可以直接寫A.prototype=new FormBuilder();也需要寫A.prototype.contructor=A防止繼承鏈紊亂毫别。 這樣利用原型對象可以保存一些公共的屬性和方法娃弓。當(dāng)訪問某個(gè)對象中的不存在的屬性或方法時(shí)典格，會(huì)自動(dòng)調(diào)用原型中的屬性和方法。也就是繼承
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>';
}
}
};
