js 对有“命名空间”的表单干深度解析

js 对有“命名空间”的表单做深度解析

问题描述：一个大表单中，可能包含几十个字段，这些字段在数据库中的映射很可能不在一张表中，为了减少后台操作的工作量，我们应该在前台提交的时候对数据做初步处理。

举例说明：

如图所示：这样的一个表单把两张表糅合到一起去了，提交的时候一起提交，但内容并不在同一张表中，实体也不是同一个实体，那么如何才能把前台传过来的json数据分别帅选出来呢？

在后台或许也是可以做到的，但这样的事情应该在前台完成，比如，以上表单传到后台就应该是这样的格式：

{stuInfo:{name:'saler',gender:'F',addr:'BeiJing',age:30},stuCourse:{English:80,Math:70,Computer:90,Software:100}}

这样在后台可以进行模块化处理，不需要一个个来搞（如果一个个搞，字段超过10个，那简直就是灾难）。那么前台获得表单的数据以后应该怎么处理？这是本文讲述的重点，直接上代码。

function getData(deep){
	var obj = {};
	var items = [{name:'stuInfo.name',value:'saler'},{name:'stuCourse.English',value:80},{name:'stuInfo.gender',value:'F'},{name:'stuCourse.Math',value:70},{name:'stuInfo.addr',value:'BeiJing'},{name:'stuCourse.Computer',value:90},{name:'stuInfo.age',value:30},{name:'stuCourse.Software',value:100}]
	if(deep){
		for(var i = 0;i < items.length;i++){
			var item = items[i];
			namespace(obj, item.name, item.value);
		}
	}else{
		for(var i = 0;i < items.length;i++){
			var item = items[i];
			obj[item.name] = item.value;
		}
	}	
	
	return obj;
}

//命名空间
function namespace(oNamespace,sPackage,value) {
    var obj = oNamespace;
   var  pkg = "";
    if(sPackage.indexOf(".")==-1){
        pkg = sPackage;
    }else{
        pkg = sPackage.substr(0,sPackage.indexOf("."));
    }
    if(pkg&&!(obj[pkg]&&obj[pkg] instanceof Object)){
        obj[pkg] = {};
    }
	
    if(sPackage.indexOf(".")!=-1){
        namespace(obj[pkg],sPackage.substr(sPackage.indexOf(".")+1),value);
    }else{
    	obj[pkg] = value;
	}
     
    return obj;
}

函数getData中，items表示form各个元素，deep为true是表示要进行深度解析，这样所有的数据都会由前缀决定统一封装成对象。执行结果如下：

需要注意的是namespace方法，这个方法的作用就是根据前缀名把对象的路径解析出来，并把value交给最后的那个变量，比如sPackage=a.b.c value=20那么结果就是{a:{b:{c:20}}}如果原始对象（oNamespace）存在，会在该对象的基础上做处理。

说明：本例是根据jquery miniui组件中form组件中的getData方法的功能做的重写，并没有看过其源码，或许他们的实现方式更好，请读者自己选择尝试。