json diff patch

文件和图片的比对靠字符串

流程

安装

效果

使用

自适应

数组：最长公共子序列(LCS)

数组中的对象，给定id，类似dom tree的比较

流程

安装

npm install jsondiffpatch

import * as jsondiffpatch from 'jsondiffpatch';
const jsondiffpatchInstance = jsondiffpatch.create(options);

效果

// 示例数据
const country = {
  name: 'Argentina',
  capital: 'Buenos Aires',
  independence: new Date(1816, 6, 9),
  unasur: true,
};

// 克隆 country，使用 dateReviver 处理 Date 对象
const country2 = JSON.parse(JSON.stringify(country), jsondiffpatch.dateReviver);

// 进行一些更改
country2.name = 'Republica Argentina';
country2.population = 41324992;
delete country2.capital;

// 计算原始对象和修改后对象之间的差异（delta）
const delta = jsondiffpatch.diff(country, country2);

// 断言差异是否符合预期的更改
assertSame(delta, {
  name: ['Argentina', 'Republica Argentina'], // 旧值，新值
  population: ['41324992'], // 新值
  capital: ['Buenos Aires', 0, 0], // 删除
});

// 对原始对象应用差异
jsondiffpatch.patch(country, delta);

// 反转差异
const reverseDelta = jsondiffpatch.reverse(delta);
// 也可以使用 jsondiffpatch.unpatch(country2, delta) 将 country2 返回到原始值

// 再次计算应用差异后的对象和修改后对象之间的差异
const delta2 = jsondiffpatch.diff(country, country2);
assert(delta2 === undefined);
// undefined => 没有差异

使用

import * as jsondiffpatch from 'jsondiffpatch';

// 仅在需要使用 diff-match-patch 进行文本差异对比时导入
import DiffMatchPatch from 'diff-match-patch';

const jsondiffpatchInstance = jsondiffpatch.create({
  // 用于在比较数组时匹配对象，默认仅使用 === 操作符
  objectHash: function (obj) {
    // 该函数仅在对象不是按引用相等时使用
    return obj._id || obj.id;
  },
  arrays: {
    // 默认为 true，检测数组中移动的项（否则将注册为删除+添加）
    detectMove: true,
    // 默认为 false，移动的项的值不包含在差异中
    includeValueOnMove: false,
  },
  textDiff: {
    // 如果使用文本差异，则需要通过这个属性传入 diff-match-patch 库
    // 或者，可以通过使用 `jsondiffpatch/with-text-diffs` 导入 jsondiffpatch 来避免传递 diff-match-patch
    diffMatchPatch: DiffMatchPatch,
    // 默认为 60，使用文本差异算法（google-diff-match-patch）的最小字符串长度（左右两侧）
    minLength: 60,
  },
  propertyFilter: function (name, context) {
    /*
       这是一个可选的函数，用于忽略对象属性（例如，易变的数据）
        name: 属性名称，存在于 context.left 或 context.right 对象中
        context: 差异上下文（具有 context.left 和 context.right 对象）
      */
    return name.slice(0, 1) !== '$';
  },
  cloneDiffValues: false /* 默认为 false。如果为 true，则在获得的差异中值将被克隆
      （默认使用 jsondiffpatch.clone），以确保差异不保留对左或右对象的引用。
      如果多次对相同的对象进行差异比较和合并而不序列化差异，则这将变得有用。
      可以在这里指定一个自定义的 clone(value) 函数，而不是 true
      */,
});

https://github.com/benjamine/jsondiffpatch