patch需要数据格式前端算法，patch算法基础，两个对象对比取差异属性
2024-09-26 12:55:35
在我们的前端开发过程中，表单是最常见不过的了，一般我们创建表单的时候习惯使用post方法来提交数据，编辑表单时候喜欢put，但是当表单的数据非常多的时候，编辑起来很麻烦，首先需要获取初始化数据，然后把修改后的表单数据全部提交给后台，可能出现下面的情况：
form ={
name:'fei',
age:20,
like:[1,2,3],
do:{
job:'IT'
}
}
修改后的数据如下
form ={
name:'fei',
age:35,//仅仅修改这里
like:[1,2,3],
do:{
job:'IT'
}
}
我们仅仅修改了age这个属性，但是在提交的时候却需要提交所有的信息，包括之前完全没有修改的数据，这会造成一种浪费。所以经常有时候 我们在编辑表单的时候，采用了patch方法，当然这也是需要后端的支持的，实现这个方法的的表单修改，参照上面的例子，我给后端传递的数据就是r如下：
form ={
age:35,//仅仅修改这里
}
那么表单的数据差异如何算出来呢，这就需要我们实现一套算法，来得出两次数据的差异，我们要做的就是对比两个对象，得到差异的属性，那么我们可以实现一个新的对象和一个旧对象的比较。在新对象中，和旧对象完全相同的属性我们使用delete去掉。首先我们定义一个对象叫patchCompare：
let patchCompare = {}
一般提交给后端的都是json格式，也就是对象，那么对象的属性可能分为如下几种常见的情况，
1.基本数据类型，列入数字，字符串，布尔...
2.对象
3.数组
所以首先我们需要判断该属性是什么类型的方法
patchCompare.isArray = function( arr ){
return Object.prototype.toString.call( arr ) === '[object Array]'
}
patchCompare.isObject = function( obj ){
return Object.prototype.toString.call( obj ) === '[object Object]'
}
接下来我们还需要一个方法用于判断我们的对象是否为空
patchCompare.isEmptyObj = function( obj ){
for( var i in obj ){
return false
}
return true;
}
然后我们数组的比较也比较特殊，因为：
let arr = [1,2,3]
let arr2 = [1,2,3] arr === arr2 //false
所以需要实现一个方法来对比数组内数值是否完全相同
patchCompare.isSimiliarArr = function( arr1, arr2 ){
if( arr1.length !== arr2.length ){
return false;
}
for( var i = 0; i < arr1.length; i++ ){
if( JSON.stringify( arr1[ i ] ) !== JSON.stringify( arr2[ i ] ) ){
return false;
}
}
return true;
}
下面就要实现我们真正对比算法了
/**
* modify 修改后的数据
* compareData 修改前的老数据
* parentObj 是否存在父节点
* key 当前对比数据在父节中的属性
*/
directObj.compare = function( modify, compareData, parentObj, key ){
for ( var i in modify ){
//新的不存在了，老的存在的属性TODO....
if( !directObj.isObject( modify[ i ] ) && directObj.isObject( compareData[ i ] ) ){ }
//对象 递归调用
else if( directObj.isObject( modify[ i ] ) ){
directObj.compare( modify[ i ], compareData[ i ], modify, i )
}//数组
else if( directObj.isArray( modify[ i ] ) ){
if( directObj.isSimiliarArr( modify[ i ], compareData[ i ] ) ){
delete modify[ i ]
}
}//其他
else{
if( modify[ i ] === compareData[ i ] ){
delete modify[ i ]
}
}
}
//要是有父属性，并且该对象是空对象，那么删除该属性
/*obj={
name:'fei',
like:{},//该属性需要从obj内删除，
}*/
if( parentObj && key && directObj.isEmptyObj( modify ) ){
delete parentObj[ key ]
}
}
在我项目中，我们是基于vue+iview写的，我们单独为这个方法写了指令，便于得到需要的结果，需要的可以给我留言
最新文章
- 工业串口和网络软件通讯平台（SuperIO 2.0）发布
- 运行easy_install安装python相关程序时提示failed to create process
- 会话控制：session与cookie
- The 2015 China Collegiate Programming Contest H. Sudoku hdu 5547
- Rhel6-DM多路经存储配置文档
- BestCoder Round #78 (div.2)
- Android - This Handler class should be static or leaks might occur.
- npm和gulp学习笔记
- Impala 2、Impala Shell 和 Impala SQL
- C#获取Excel中所有的Sheet名称
- Android Paint Xfermode 学习小结
- CodeForces 140C New Year Snowm
- 阿里云-CentOS如何挂载硬盘
- 直播 APP 的直播实现流程
- 【JAVA】关于向上转型与向下转型
- linux下jmeter持续集成Jenkins部署时问题解决
- IDEA14添加SVN
- NTC热敏电阻认识及功率型热敏电阻选型
- 【Head First Java 读书笔记】（一）基本概念
- BZOJ4424/CF19E Fairy（dfs树+树上差分）