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方法的功能做的重写,并没有看过其源代码,也许他们的实现方式更好,请读者自己选择尝试。

原文地址:https://www.cnblogs.com/wzjhoutai/p/6889309.html