更新大的 JSON 對象，也能用上增量更新！
什么是 JSON Patch
JSON Patch[1] 是一種用于描述如何對 JSON 文檔進行更改的格式，它使用一系列簡潔的操作指令來指示如何修改 JSON 數據。這些操作包括添加新的數據、刪除舊的數據、替換現有的數據或者移動數據等等。
為什么使用 JSON Patch
在一個大型的 Web 應用程序中，客戶端需要頻繁地與服務器通信，獲取最新的數據或者將修改后的數據提交給服務器。傳統的方式是每次更新都發送整個 JSON 文檔，即使只有一小部分數據發生了變化。這會導致網絡傳輸量大，增加了網絡延遲，同時也增加了服務器和客戶端的負載。
JSON Patch 提供了一種高效的解決方案來減少網絡傳輸量和提高數據更新效率。通過使用 JSON Patch，客戶端可以僅發送需要修改的部分數據，而不是整個 JSON 文檔。服務器收到 JSON Patch 后，可以根據指令執行相應的操作，從而實現數據的增量更新。這樣既減少了網絡傳輸量，提高了網絡效率，又降低了服務器和客戶端的負載，同時也保證了數據的一致性。
JSON Patch 有哪些優點
- 減少傳輸量：JSON Patch 只傳輸要對 JSON 文檔進行的具體更改，而不需要傳輸整個 JSON 文檔。這樣可以節省網絡帶寬，尤其在大型數據集或者低速網絡環境下更為顯著。
- 增量更新：JSON Patch 支持對 JSON 文檔進行增量更新，這意味著你可以只發送需要修改的部分，而不是整個文檔。這對于實時應用程序以及需要頻繁更新的情況非常有用。
- 原子性操作：JSON Patch 操作可以作為一個原子單元執行，這意味著要么全部操作成功，要么全部失敗。這可以確保數據的一致性，避免因為部分更新導致數據不一致的情況。
- 靈活性和可擴展性：JSON Patch 不限制你對 JSON 文檔進行的操作，你可以根據需求執行添加、刪除、替換、移動等各種操作，并且可以根據實際需求擴展新的操作。
JSON Patch 支持哪些操作
1.add
向 JSON 文檔中添加新的值，需要指定路徑和要添加的值。
{ "op": "add", "path": "/path", "value": "new value" }2.remove
從 JSON 文檔中移除一個值，需要指定要移除的值的路徑。
{ "op": "remove", "path": "/path" }3.replace
替換 JSON 文檔中的一個值，需要指定要替換的值的路徑和新的值。
{ "op": "replace", "path": "/path", "value": "new value" }4.move
移動 JSON 文檔中的一個值到另一個位置，需要指定要移動的值的路徑和目標路徑。
{ "op": "move", "from": "/oldpath", "path": "/newpath" }5.copy
復制 JSON 文檔中的一個值到另一個位置，需要指定要復制的值的路徑和目標路徑。
{ "op": "copy", "from": "/oldpath", "path": "/newpath" }6.test
測試 JSON 文檔中的一個值是否等于給定的值，主要用于驗證操作是否可以成功執行。需要指定要測試的值的路徑和預期的值。
{ "op": "test", "path": "/path", "value": "expected value" }如何使用 JSON Patch
很多常見的開發語言，都實現了 JSON Patch 規范。在 JS 環境，我們可以使用 fast-json-patch[2] 這個庫。
首先，使用 npm 或 pnpm 來安裝 fast-json-patch：
npm install fast-json-patch
or
pnpm add fast-json-patch成功安裝 fast-json-patch 庫之后，我們就可以利用它提供的 API 來實現以下功能：
- 比較兩個對象獲取補丁
- 觀察對象變化并在檢測到變化時生成補丁
- 在 JS 對象上應用單個或多個補丁
- 驗證補丁序列
1.比較兩個對象獲取補丁
import { compare } from "fast-json-patch/index.mjs";
const documentA = { user: { firstName: "Albert", lastName: "Einstein" } };
const documentB = { user: { firstName: "Albert", lastName: "Collins" } };
const diff = compare(documentA, documentB);
/**
* diff:
* [ { op: 'replace', path: '/user/lastName', value: 'Collins' } ]
*/2.觀察對象變化并在檢測到變化時生成補丁
import { generate, observe } from "fast-json-patch/index.mjs";
const document = {
firstName: "Joachim",
lastName: "Wester",
contactDetails: { phoneNumbers: [{ number: "555-123" }] },
};
const observer = observe(document);
document.firstName = "Albert";
document.contactDetails.phoneNumbers[0].number = "123";
document.contactDetails.phoneNumbers.push({ number: "456" });
const patch = generate(observer);
/**
* patch：
* [
* {
* op: 'replace',
* path: '/contactDetails/phoneNumbers/0/number',
* value: '123'
* },
* {
* op: 'add',
* path: '/contactDetails/phoneNumbers/1',
* value: { number: '456' }
* },
* { op: 'replace', path: '/firstName', value: 'Albert' }
* ]
*/3.在 JS 對象上應用單個或多個補丁
應用單個補丁
import { applyPatch } from "fast-json-patch/index.mjs";
const documentA = { user: { firstName: "Albert", lastName: "Einstein" } };
const patchedResult = applyPatch(documentA, [
{ op: "replace", path: "/user/lastName", value: "Collins" },
]);
/**
* patchedResult[0]:
* {
* newDocument: { user: { firstName: 'Albert', lastName: 'Collins' } },
* removed: 'Einstein'
* }
*/應用多個補丁
import { applyPatch } from "fast-json-patch/index.mjs";
const document = {
firstName: "Joachim",
lastName: "Wester",
contactDetails: { phoneNumbers: [{ number: "555-123" }] },
};
const patchedResult = applyPatch(document, [
{
op: "replace",
path: "/contactDetails/phoneNumbers/0/number",
value: "123",
},
{
op: "add",
path: "/contactDetails/phoneNumbers/1",
value: { number: "456" },
},
{ op: "replace", path: "/firstName", value: "Albert" },
]);
/**
* patchedResult[0]:
* {
* newDocument: {
* firstName: "Albert",
* lastName: "Wester",
* contactDetails: { phoneNumbers: [{ number: "123" }, { number: "456" }] },
* },
* removed: "555-123",
* }
*/4.驗證補丁序列
import { validate } from "fast-json-patch/index.mjs";
const documentA = { user: { firstName: "Albert", lastName: "Einstein" } };
const validatedResult = validate(
[{ op: "replace", path: "/user/lastName", value: "Collins" }],
documentA
);如果補丁序列不滿足 JSON Patch 規范，在驗證過程中就會拋出 JsonPatchError 異常對象。
JSON Patch 和 fast-json-patch 的相關內容就介紹到這里，感興趣的話，可以嘗試一下 JSON Patch。
參考資料
[1]JSON Patch: https://datatracker.ietf.org/doc/html/rfc6902
[2]fast-json-patch: https://github.com/Starcounter-Jack/JSON-Patch
