JSON Patch[1] 是一種用于描述如何對 JSON 文檔進行更改的格式,它使用一系列簡潔的操作指令來指示如何修改 JSON 數據。這些操作包括添加新的數據、刪除舊的數據、替換現有的數據或者移動數據等等。
在一個大型的 Web 應用程序中,客戶端需要頻繁地與服務器通信,獲取最新的數據或者將修改后的數據提交給服務器。傳統的方式是每次更新都發送整個 JSON 文檔,即使只有一小部分數據發生了變化。這會導致網絡傳輸量大,增加了網絡延遲,同時也增加了服務器和客戶端的負載。
JSON Patch 提供了一種高效的解決方案來減少網絡傳輸量和提高數據更新效率。通過使用 JSON Patch,客戶端可以僅發送需要修改的部分數據,而不是整個 JSON 文檔。服務器收到 JSON Patch 后,可以根據指令執行相應的操作,從而實現數據的增量更新。這樣既減少了網絡傳輸量,提高了網絡效率,又降低了服務器和客戶端的負載,同時也保證了數據的一致性。
向 JSON 文檔中添加新的值,需要指定路徑和要添加的值。
{ "op": "add", "path": "/path", "value": "new value" }
從 JSON 文檔中移除一個值,需要指定要移除的值的路徑。
{ "op": "remove", "path": "/path" }
替換 JSON 文檔中的一個值,需要指定要替換的值的路徑和新的值。
{ "op": "replace", "path": "/path", "value": "new value" }
移動 JSON 文檔中的一個值到另一個位置,需要指定要移動的值的路徑和目標路徑。
{ "op": "move", "from": "/oldpath", "path": "/newpath" }
復制 JSON 文檔中的一個值到另一個位置,需要指定要復制的值的路徑和目標路徑。
{ "op": "copy", "from": "/oldpath", "path": "/newpath" }
測試 JSON 文檔中的一個值是否等于給定的值,主要用于驗證操作是否可以成功執行。需要指定要測試的值的路徑和預期的值。
{ "op": "test", "path": "/path", "value": "expected value" }
很多常見的開發語言,都實現了 JSON Patch 規范。在 JS 環境,我們可以使用 fast-json-patch[2] 這個庫。
首先,使用 npm 或 pnpm 來安裝 fast-json-patch:
npm install fast-json-patchor pnpm add fast-json-patch
成功安裝 fast-json-patch 庫之后,我們就可以利用它提供的 API 來實現以下功能:
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' } ] */
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' } * ] */
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", * } */
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
本文鏈接:http://www.tebozhan.com/showinfo-26-88354-0.html更新大的 JSON 對象,也能用上增量更新!
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com
上一篇: C#事件:實現安全的發布/訂閱模型