数据可视化diff工具jsondiffpatch使用学习

1.jsondiffpatch 简介

jsondiffpatch 是一个用于比较和生成 JSON 数据差异的 JavaScript 库。它可以将两个 JSON 对象进行比较,并生成一个描述它们之间差异的 JSON 对象。这个差异对象可以用于多种用途,例如:

  • 生成可视化的差异报告
  • 应用差异到另一个 JSON 对象,从而完成更新
  • 将差异对象转换为文本格式,以便存储或传输

jsondiffpatch 支持多种比较选项,例如忽略某些属性、比较数组时使用不同的算法等。它还提供了许多自定义选项,以便根据您的需求进行配置。jsondiffpatch 可以在浏览器和 Node.js 环境中使用。可以在项目地址找到源码,根据自己的需求进行扩展。

2.jsondiffpatch的使用演示

首先安装 jsondiffpatch 库:可以使用 npm 或 yarn 等包管理工具进行安装,也可以直接在 HTML 页面中引入 jsondiffpatch.js 文件。文件可以在附录中提供的github地址中找到。

接着创建 jsondiffpatch 实例:可以使用 jsondiffpatch.create() 方法创建一个 jsondiffpatch 实例。

比较两个 JSON 对象:使用 jsondiffpatch 实例的 diff() 方法比较两个 JSON 对象,生成一个描述它们之间差异的 JSON 对象。

应用差异到另一个 JSON 对象:使用 jsondiffpatch 实例的 patch() 方法将差异对象应用到另一个 JSON 对象,以更新它。

下面是一个样例:

// 引入 jsondiffpatch 库
const jsondiffpatch = require('jsondiffpatch');// 创建 jsondiffpatch 实例
const diffpatcher = jsondiffpatch.create();// 定义两个 JSON 对象
const obj1 = { name: 'Alice', age: 30 };
const obj2 = { name: 'Bob', age: 35 };// 比较两个 JSON 对象,生成差异对象
const diff = diffpatcher.diff(obj1, obj2);// 应用差异对象到另一个 JSON 对象,更新它
const patchedObj = diffpatcher.patch(obj1, diff);console.log(patchedObj); // 输出 { name: 'Bob', age: 35 }

3.diff结果的可视化

jsondiffpatch 生成的差异对象是一个 JSON 对象,其中包含了被比较的两个 JSON 对象之间的差异信息。如果您想将差异对象可视化展示出来,可以使用jsondiffpatch-formatters这个工具。

jsondiffpatch-formatters是jsondiffpatch的扩展库,提供了多种差异对象的可视化展示格式,包括 HTML、Markdown、Console 等格式。我们可以使用 jsondiffpatch-formatters 的 html.format() 方法将差异对象转换为 HTML 格式的字符串,然后将其插入到页面中展示。

例:

const diff = diffpatcher.diff(obj1, obj2);
const html = jsondiffpatch.formatters.html.format(diff, obj1);
document.getElementById('diff-container').innerHTML = html;

可以参看可视化效果展示来体验效果。
效果展示

4.diff功能的扩展

jsondiffpatch 中可以使用插件增加扩展功能,可以用于增强 jsondiffpatch 的比较和生成差异对象的能力。以下是一些常用的插件及其功能:

  • diff-arrays:这个插件可以使 jsondiffpatch 在比较数组时,按照元素的值而不是索引进行比较。这样可以避免因为数组中元素的顺序不同而导致的不必要的差异。

  • annotated:这个插件可以在生成的差异对象中,为每个差异节点添加注释信息,包括节点的类型、路径、值等。这样可以方便地了解差异对象的结构和含义。

  • delta:这个插件可以将差异对象转换为一种更紧凑的格式,称为“增量格式”(delta format)。增量格式可以减少差异对象的大小,提高传输效率。

  • patch-console:这个插件可以将差异对象打印到控制台中,以便调试和测试。

除了上述插件外,jsondiffpatch 还提供了一些其他的插件,例如 reverse、clone、trivial 等。我们可以根据自己的需求选择适合的插件进行使用。但插件可能会增加 jsondiffpatch 的运行时间和内存消耗,因此在使用插件时需要进行测试。

下面是一个数组比较的演示

// 引入 jsondiffpatch 库和 diff-arrays 插件
const jsondiffpatch = require('jsondiffpatch');
const diffArrays = require('jsondiffpatch/src/diffpatcher-arrays');// 创建 jsondiffpatch 实例,并添加 diff-arrays 插件
const diffpatcher = jsondiffpatch.create({arrays: {detectMove: true,includeValueOnMove: true,},
}).use(diffArrays);// 定义两个数组
const arr1 = [1, 2, 3];
const arr2 = [3, 2, 1];// 比较两个数组,生成差异对象
const diff = diffpatcher.diff(arr1, arr2);console.log(diff); // 输出 { _t: 'a', ... }

在这个例子中,首先引入了 jsondiffpatch 库和 diff-arrays 插件。指定了 diff-arrays 插件的配置选项。使用 use() 方法将 diff-arrays 插件添加到 jsondiffpatch 实例中。

此外还可以对复杂对象的比较进行自定义实现个性化比较,实现不同业务的诉求。下面的例子中演示了这种场景的用法。方法具体含义可以参考github主页学习。

// 自定义比较方法
function myDiff(obj1, obj2, path) {// 如果 obj1 和 obj2 是字符串类型,并且都以 "$" 开头,则比较它们的长度if (typeof obj1 === 'string' && typeof obj2 === 'string' &&obj1.startsWith('$') && obj2.startsWith('$')) {const len1 = parseInt(obj1.substring(1));const len2 = parseInt(obj2.substring(1));if (len1 !== len2) {return [{ op: 'replace', path, value: obj2 }];}}// 否则使用默认的比较方法return jsondiffpatch.diff(obj1, obj2, path);
}// 创建 jsondiffpatch 实例,并设置自定义比较方法
const diffpatcher = jsondiffpatch.create({objectHash: (obj) => obj.id,diff: myDiff,
});// 定义两个对象
const obj1 = { id: 1, name: 'Alice', age: 30 };
const obj2 = { id: 1, name: 'Bob', age: 35 };// 比较两个对象,生成差异对象
const diff = diffpatcher.diff(obj1, obj2);console.log(diff); // 输出 [{ op: 'replace', path: '/name', value: 'Bob' }]

5.总结

基于这个工具,我们可以实现可视化比较。当有定制化比较诉求是,通过扩展函数实现定制化功能,最终可以搭建起我们的diff工具服务。

参考资料

[1]jsondiffpatch源码,https://github.com/benjamine/jsondiffpatch
[2]可视化效果展示,https://benjamine.github.io/jsondiffpatch/demo/index.html
[3]插件,https://github.com/benjamine/jsondiffpatch/blob/master/docs/plugins.md
[4]diff格式说明,https://github.com/benjamine/jsondiffpatch/blob/master/docs/deltas.md

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/51030.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

opencv-疲劳检测-眨眼检测

#导入工具包 from scipy.spatial import distance as dist from collections import OrderedDict import numpy as np import argparse import time import dlib import cv2FACIAL_LANDMARKS_68_IDXS OrderedDict([("mouth", (48, 68)),("right_eyebrow",…

matlab将数组值划分为两类

例如:大于0的处理为1,小于0的处理为-1. 当然,可以选择循环结构和选择结构,但是效率会很低。 这里直接使用逻辑语句完成。 % 不使用循环语句,将数组内值划分为两类 clc; clearvars; a[-0.1422 , -0.0433 , 0.1131 …

Leetcode每日一题:1267. 统计参与通信的服务器

原题 这里有一幅服务器分布图,服务器的位置标识在 m * n 的整数矩阵网格 grid 中,1 表示单元格上有服务器,0 表示没有。 如果两台服务器位于同一行或者同一列,我们就认为它们之间可以进行通信。 请你统计并返回能够与至少一台其…

基础论文学习(4)——CLIP

《Learning Transferable Visual Models From Natural Language Supervision》 CLIP的英文全称是Contrastive Language-Image Pre-training,即一种基于对比文本-图像对的预训练模型。CLIP是一种基于对比学习的多模态模型,与CV中的一些对比学习方法如moc…

【C语言练习】数组OJ题

目录 一.消失的数字思路1:思路2: 二.移除元素三.轮转数组四.删除有序数组中的重复项五.合并两个有序数组 一.消失的数字 题目: 思路1: 数组是从0加到N,所以把0到N的数加起来减去数组中的值,结果就是消失…

ssl卸载原理

SSL卸载,也称为SSL解密,是一种将SSL加密数据流卸成非加密的明文数据流的过程。SSL卸载通常在负载均衡器、代理服务器、WAF等设备中实现,可以提高传输效率和安全性。 SSL卸载的原理是将SSL数据流拦截下来,通过设备内置的证书进行解…

多维时序 | MATLAB实现SCNGO-CNN-Attention多变量时间序列预测

多维时序 | MATLAB实现SCNGO-CNN-Attention多变量时间序列预测 目录 多维时序 | MATLAB实现SCNGO-CNN-Attention多变量时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.SCNGO-CNN-Attention超前24步多变量回归预测算法。 程序平台:无Attention适…

【MyBatis】:PageHelper分页插件与特殊字符处理

目录 一、PageHelper介绍 二、PageHelper使用 1. 导入pom依赖 2. Mybatis.cfg.xml 配置拦截器 3. 配置 Mapper.xml 4. 编写测试 三、特殊字符处理 1. 使用转义字符 2. 使用CDATA 区段 一、PageHelper介绍 PageHelper 是 Mybatis 的一个插件,这里就不扯了&a…

aardio的CS架构mysql数据表查询实例

import win.ui; /*DSG{{*/ var winform win.form(text"aardio form";right759;bottom479) winform.add( buttonAdd{cls"button";text"复制";left516;top442;right587;bottom473;z11}; buttonClose{cls"button";text"退出";…

多线程——学习记录2

目录 单例模式两种单例写法饿汉式和懒汉式的区别 RuntimeTimer 计时器两个线程间的通信关键点:wait()线程等待 和 notify()随机唤醒等待的线程; 三个或三个以上间的线程通信关键点:notifyAll()唤醒所有线程 线程间通信需要注意的问题JDK1.5的新特性互斥锁…

Java:ArrayList集合、LinkedList(链表)集合的底层原理及应用场景

ArrayList集合的底层原理及应用场景 LinkedList(链表)集合的底层原理及应用场景 单向链表 增加数据 删除数据 双向链表 LinkedList的应用场景之一:可以用来设计队列 入队 出队 LinkedList的应用场景之一:可以用来设计栈 压栈(push),addFirst…

Socket基本原理

一、简单介绍 Socket,又称套接字,是Linux跨进程通信(IPC,Inter Process Communication)方式的一种。相比于其他IPC方式,Socket牛逼在于可做到同一台主机内跨进程通信,不同主机间的跨进程通信。…

redis常用五种数据类型详解

目录 前言: string 相关命令 内部编码 应用场景 hash 相关命令 内部编码 应用场景 list 相关命令 内部编码 应用场景 set 相关命令 内部编码 应用场景 Zset 相关命令 内部编码 应用场景 渐进式遍历 前言: redis有多种数据类型&…

Spring Clould 网关 - Gateway

视频地址:微服务(SpringCloudRabbitMQDockerRedis搜索分布式) Gateway网关-网关作用介绍(P35) Spring Cloud Gateway 是 Spring Cloud 的一个全新项目,该项目是基于 Spring 5.0,Spring Boot 2…

BTP Integration Suite学习笔记 - (Unit4) Developing with SAP Integration Suite

详细指导还是要看官方文档 4. 云集成管理 4.1 云集成介绍 什么是云集成? 前三章讲了很多内容,但都不是最核心的,通常我们用CPI是让他实现原来PI/PO的功能的,是用来做集成的。这章才刚开始。 云集成有以下几个特性:…

【LeetCode-中等题】438. 找到字符串中所有字母异位词

题目 题解一&#xff1a;暴力排序 依次截取三为排序好的字符串拿出来比较 // 方法一&#xff0c;暴力排序List<Integer> res new ArrayList<Integer>();int n s.length();int k p.length();if (n < k) {return res;}char[] chars p.toCharArray();Arrays.s…

pdf太大怎么压缩大小?这样压缩文件很简单

工作和学习中&#xff0c;用到PDF文件的机会还是比较多的&#xff0c;但有时候PDF文件过大会给我们带来困扰&#xff0c;比如上传PDF文件时会因超出系统大小导致无法上传&#xff0c;这时候简单的解决方法就是压缩PDF文件&#xff0c;下面就来看看具体的操作方法吧~ 方法一&…

redis实战-缓存三剑客穿透击穿雪崩解决方案

缓存穿透 定义 缓存穿透 &#xff1a;缓存穿透是指客户端请求的数据在缓存中和数据库中都不存在&#xff0c;这样缓存永远不会生效&#xff0c;这些请求都会打到数据库&#xff0c;造成数据库压力&#xff0c;也让缓存没有发挥出应有的作用 解决方案 缓存空对象 当我们客户端…

RISC-V IOPMP实际用例-Rapid-k模型在NVIDIA上的应用

安全之安全(security)博客目录导读 2023 RISC-V中国峰会 安全相关议题汇总 说明&#xff1a;本文参考RISC-V 2023中国峰会如下议题&#xff0c;版权归原作者所有。

javascript常用的东西

JavaScript 是一门强大的编程语言&#xff0c;用于为网页添加交互性和动态性。也可以锻炼人们的逻辑思维&#xff0c;是一个非常好的东西。 一、变量和数据类型&#xff1a; 变量&#xff1a; 变量是用于存储数据值的容器。在 JavaScript 中&#xff0c;你可以使用 var、let…