patch需要数据格式前端算法，patch算法基础，两个对象对比取差异属性

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

在我们的前端开发过程中，表单是最常见不过的了，一般我们创建表单的时候习惯使用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 ]
}
}