简介
在前端开发中，我们常常需要查看 JSON 数据的结构和内容。在浏览器开发者工具中，虽然可以方便地查看 JSON 数据，但是难以对比两个 JSON 数据的差异。
inspect-as-json-pmb 是一款 npm 包，可以将 JSON 数据转化为可供阅读的字符串格式，并支持对比两个 JSON 数据的差异。
本文将介绍 inspect-as-json-pmb 的安装和使用方法，并提供实际场景的示例。
安装
使用 npm 安装 inspect-as-json-pmb：
npm install -g inspect-as-json-pmb
使用
转化 JSON 数据为字符串
inspect-as-json-pmb 支持将 JSON 数据转化为格式化字符串并输出到控制台。
假设有如下 JSON 数据：
-- -------------------- ---- -------
-
------- --------
------ ---
--------- ---------
---------- -
----------
----------
--
------------ -
--------- ---------
-------- --------- --------
-
-则可使用如下命令进行字符串化：
jsonpb < data.json
输出结果如下：
-- -------------------- ---- -------
-
------- --------
------ ---
--------- ---------
---------- -
----------
----------
--
------------ -
--------- ---------
-------- --------- --------
-
-可以看到，JSON 数据已经被格式化，并使用缩进来显示层级关系。这样的显示形式更加易于阅读和理解。
对比不同 JSON 数据
inspect-as-json-pmb 还支持对比不同 JSON 数据的差异。假设有如下两个 JSON 数据：
{
"name": "Alice",
"age": 28,
"gender": "female"
}{
"name": "Bob",
"age": 30,
"gender": "male"
}则可使用如下命令进行对比：
jsonpbdiff data1.json data2.json
输出结果如下：
-- -------------------- ---- ------- - ------- - - -------- - ----- -- ------ - - --- - -- -- --------- - - --------- - ------ - -
可以看到，输出结果按照 JSON 字段的差异情况进行了划分，使用了颜色和符号的差异标示来更加直观地表示不同。
当然，也可以将对比结果输出到文件中：
jsonpbdiff data1.json data2.json > diff.txt
实际场景
inspect-as-json-pmb 不仅可以帮助我们检查 JSON 数据，还可以解决实际开发中的问题。以下是一个示例：
假设我们正在开发一个应用，需要从一个 API 服务器获取 JSON 数据，并在界面上展示。为了节省带宽和提高用户体验，我们需要对比两次数据是否有差异，并仅在数据有变化时才更新界面。这时，inspect-as-json-pmb 就可以派上用场了。
首先，获取数据：
curl https://api.example.com/data.json > data1.json
然后，将数据进行字符串化并保存到文件中：
jsonpb < data1.json > data1_string.json
接着，在界面上显示数据，并添加定时器，定时获取数据并进行对比：
-- -------------------- ---- -------
--- ---- - -----
--- -------------- - ---
-------- ----------- -
------------------------------------------
-------------- -- ----------------
-------------- -- -
-- ----------
----- ------------- - ------------------------ ----- ---
-- -----------------
-- -------------- --- --------------- -
---- - ---------
-------------- - --------------
-----------
-
--
------------ -- -
---------------------
---
-
---------------------- ------通过使用 inspect-as-json-pmb，我们可以快速地将 JSON 数据字符串化，并进行对比。这种技能在很多开发场景中都非常有用。
结论
inspect-as-json-pmb 是一款功能强大且易于使用的 npm 包，可以帮助前端开发者更加方便地阅读和比较 JSON 数据。在实际开发中，inspect-as-json-pmb 也可以帮助我们解决一些棘手的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cbd81e8991b448da4f3