JavaScrip面向对象理解
JavaScrip的对象简单来说一组无序的值，其中的属性或方法都有一个名字，面向对象更有利于企业对于网页的开发。
有所了解后，我们可以做一个例子来了解（表单生成器）
1.首先我们需要定义存储结构并将其转化成对象
var elements = [ {tag:'input', text:'姓 名：', attr: {type:'text', name:'user'} {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', cols:'50', rows:'5'}}, {tag:'input', attr: {type:'submit', value:'提交'}} ];
2.然后封装生成器
(function(window) { var FormBuilder =function(data) { this.data = data; }; window.FormBuilder =FormBuilder; })(window);
上述代码最外层是一个自调用的匿名函数，在调用时传入的window 对象用于控制FormBuilder库的作用范围，通过“ window.FormBuilder =FormBuilder;”将FormBuilder作为传入对象的属性。由于window对象是全局的，因此当上述代码执行后，就可以直接使用FormBuilder。另一方面，在匿名函数中定义的变量、函数，都不会污染全局作用域，体现了面向对象的封装性。
接下来创建form.html，用于调用FromBuilder生成表单
<script src="FormBuilder.js">
// 这里并不是使用JSON语法保存数据（键和值都加双引号，且对特殊字符转义）
{tag:'input', text:'姓 名：', attr: {type:'text', name:'user'} {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', cols:'50', rows:'5'}}, {tag:'input', attr: {type:'submit', value:'提交'}} ];
document.getElementById('form').innerHTML =new FormBuilder(elements).create();
</script>
通过new FormBuilder()实例化了表单生成器对象，将elements数组通过参数传入，然后调用了create()方法，该方法用于返回HTML生成结果，将在后面的步骤中实现。
3.实现表单自动生成
编写create()方法
FormBuilder.prototype.create =function() {
var html ='';
for (var kin this.data) {
var item = {tag:'', text:'', attr: {}, option:null};
for (var nin this.data[k]) {
item[n] =this.data[k][n];
}
html += builder.toHTML(item);
}
return '<table>' + html +'</table>';
};
编写buider对象
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 kin attr) {
html += k +'="' + attr[k] +'" ';
}
return html;
},
（item对象）
}
在上述代码中，“this.item[obj.tag]()" 用于根据obj.tag的值来调用item对象中的万法。例如，当obj.tag的值为input时，就表示调用builder item.input()方法。item对象是builder对象的一个属性，该对象内包含了input()、select()和 textarea()3个方法，分别用于生成<input>、<select> 和<textarea>表单项。
编写item对象
item: {
input:function(attr, option) {
var html ='';
if (option ===null) {
html +='<input ' + attr +'>';
}else {
for (var kin option) {
html +='<label><input ' + attr +'value="' + k +'"' +'>' + option[k] +'</label>';
}
}
return html;
},
select:function(attr, option) {
var html ='';
for (var kin option) {
html +='<option value="' + k +'">' + option[k] +'</option>';
}
return '<select ' + attr +'>' + html +'</select>';
},
textarea:function(attr) {
return '<textarea ' + attr +'></textarea>';
}
加上样式对吼呈现的效果如下
总结来说JavaScript的面向对象和其他语言也差不多，对对象的而操作无非就是创建对象创建的方式用很多，自己也了解是很清楚，很多还得通过大牛讲解，然后就是对对象的属性进行访问赋值删除，也可以继承。这些利于封装框架，利于数据处理，逻辑清晰，不会容易出现混乱。
