js面向对象浅析-表单生成

前言：这里就表单生成器的案例对js面向对象分析一下。。。

(function (window){
	var FormBuilder=function(data){
      this.data=data;
	};
	window.FormBuilder=FormBuilder;
})(window);

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+=bulider.toHTML(item);
	}
	return '<table>'+html+'</table>';
};

var bulider={
	toHTML:function(obj){
		var html=this.item[obj.tag](this.attr(obj.attr),this.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 attr;
	},
	item:{
		input:function(attr,option){
          var html=" ";
          if(option===null){
            html+='<input '+attr(attr)+'>';
          }else{
          	for(var k in option){
          		html += '<label><input '+attr+'value="' + k+'"'+'>';
          		html+=option[k]+'</label>'
          	}
          }
          console.log(html);
          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>'
		}
	}
};

解析：
这是面向对象思想的js编程，将标签都封装成对象
比如将<input type="text" name="user">封装成

{
 tag:'input',
 text:'姓名',
 attr:{type:'text',name:'user'},
 option:'null'
}

首先通过立即执行函数建立建立自己的FormBuilder构造函数，这体现了函数的封装性，避免了全局变量污染，然后通过在FormBuilder的原型链上编程，创建自己create函数,然后变成html，最后插入页面。。
这样写避免了直接修改HTML代码，便于以后的开发和维护，但这样失去了易读性。。。

注意：在面向对象编程时，不得不注意，this的指向问题，

1. 如果是new出来的构造函数，this指的就是自己。
2. 如果直接调用一个方法，this指的是window。
3. 如果是一个对象的方法指的就是这个对象。

比如：

var bulider={
	toHTML:function(obj){
       //在这里的this指的是bulider这个对象。。
		var html=this.item[obj.tag](this.attr(obj.attr),this.option);
		return '<tr><th>'+obj.text+'</th><td>'+html+'<td></tr>';
	},