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

tomcat2022 / 2023-08-29 / 原文

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的指向问题，

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

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>';
    },