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写的,我们单独为这个方法写了指令,便于得到需要的结果,需要的可以给我留言
patch需要数据格式前端算法,patch算法基础,两个对象对比取差异属性的更多相关文章
- 2018-02-03-PY3下经典数据集iris的机器学习算法举例-零基础
---layout: posttitle: 2018-02-03-PY3下经典数据集iris的机器学习算法举例-零基础key: 20180203tags: 机器学习 ML IRIS python3mo ...
- Java面试题总结之数据结构、算法和计算机基础(刘小牛和丝音的爱情故事1)
Java面试题总结之数据结构.算法和计算机基础(刘小牛和丝音的爱情故事1)mp.weixin.qq.com 全文字数: 1703 阅读时间: 大约6 分钟 刘小牛是一名Java程序员,由于天天9 ...
- 算法与数据结构基础 - 堆(Heap)和优先级队列(Priority queue)
堆基础 堆(Heap)是具有这样性质的数据结构:1/完全二叉树 2/所有节点的值大于等于(或小于等于)子节点的值: 图片来源:这里 堆可以用数组存储,插入.删除会触发节点shift_down.shif ...
- 算法与数据结构基础 - 广度优先搜索(BFS)
BFS基础 广度优先搜索(Breadth First Search)用于按离始节点距离.由近到远渐次访问图的节点,可视化BFS 通常使用队列(queue)结构模拟BFS过程,关于queue见:算法与数 ...
- 算法与数据结构基础 - 哈希表(Hash Table)
Hash Table基础 哈希表(Hash Table)是常用的数据结构,其运用哈希函数(hash function)实现映射,内部使用开放定址.拉链法等方式解决哈希冲突,使得读写时间复杂度平均为O( ...
- 算法与数据结构基础 - 二叉树(Binary Tree)
二叉树基础 满足这样性质的树称为二叉树:空树或节点最多有两个子树,称为左子树.右子树, 左右子树节点同样最多有两个子树. 二叉树是递归定义的,因而常用递归/DFS的思想处理二叉树相关问题,例如Leet ...
- 算法与数据结构基础 - 分治法(Divide and Conquer)
分治法基础 分治法(Divide and Conquer)顾名思义,思想核心是将问题拆分为子问题,对子问题求解.最终合并结果,分治法用伪代码表示如下: function f(input x size ...
- 算法与数据结构基础 - 双指针(Two Pointers)
双指针基础 双指针(Two Pointers)是面对数组.链表结构的一种处理技巧.这里“指针”是泛指,不但包括通常意义上的指针,还包括索引.迭代器等可用于遍历的游标. 同方向指针 设定两个指针.从头往 ...
- 算法与数据结构基础 - 贪心(Greedy)
贪心基础 贪心(Greedy)常用于解决最优问题,以期通过某种策略获得一系列局部最优解.从而求得整体最优解. 贪心从局部最优角度考虑,只适用于具备无后效性的问题,即某个状态以前的过程不影响以后的状态. ...
随机推荐
- mini2440 Nor Flash工作原理分析
我的mini2440上是只接了一块Nor Flash,型号是S29AL016M90TAI02,这是一块2M Byte,16位宽度的Nor Flash,用于引导扇区的闪存.原理图里面关键的引脚是: 地址 ...
- 敏捷冲刺Day1
前言: 之前的各种对教务系统的分析,再加上我们两三天的讨论和一个小时的站立会议,我们做出最终的决定.--我们决定换个项目主题,将原来的教务辅助系统换成现在的校园帮帮帮服务,并在之后会将完成后的计划书附 ...
- nginx 设置默认虚拟 host
nginx 设置默认虚拟 host listren 80 default_server
- Spline样条函数 //C++关键字:operator // 重载函数 // 隐含的this指针 // 指针和const限定符
在数学学科数值分析中,样条是一种特殊的函数,由多项式分段定义.样条插值是使用一种名为样条的特殊分段多项式进行插值的形式.由于样条插值可以使用低阶多项式样条实现较小的差值误差,这样就避免了使用高阶多项式 ...
- 【bzoj1858】[Scoi2010]序列操作 线段树区间合并
题目描述 lxhgww最近收到了一个01序列,序列里面包含了n个数,这些数要么是0,要么是1,现在对于这个序列有五种变换操作和询问操作: 0 a b 把[a, b]区间内的所有数全变成0 1 a b ...
- [洛谷P2447][SDOI2010]外星千足虫
题目大意:有$n$个数,每个数为$0$或$1$,给你其中一些关系,一个关系形如其中几个数的异或和是多少,问最少知道前几个关系就可以得出每个数是什么,并输出每个数 题解:异或方程组,和高斯消元差不多,就 ...
- BZOJ2653:middle——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=2653 Description 一个长度为n的序列a,设其排过序之后为b,其中位数定义为b[n/2], ...
- 洛谷 P2324 [SCOI2005]骑士精神 解题报告
P2324 [SCOI2005]骑士精神 题目描述 输入输出格式 输入格式: 第一行有一个正整数T(T<=10),表示一共有N组数据.接下来有T个5×5的矩阵,0表示白色骑士,1表示黑色骑士,* ...
- HDOJ.2072 单词数(map)
单词数 点我挑战题目 点我一起学习STL-MAP 题意分析 给出一行单词,判断这行有不同种的单词多少个,用map可以轻松解决. 代码总览 /* Title:HDOJ.2072 Author:pengw ...
- GSM之AT操作命令详解20160615
因工作接触到GSM模块,所以收集整理了一下关于操作GSM模块的AT命令的资料: 1.AT的历史与应用 1.1 AT的历史AT命令集是由拨号调制解调器(MODEM)的发明者贺氏公司(Hayes)为了控制 ...