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 ]
    }
}

在我项目中，我们是基于vue+iview写的，我们单独为这个方法写了指令，便于得到需要的结果，需要的可以给我留言