这种工具有很多的吧(
如果你单说网页的话,之前也有
https://jsoncompare.com/楼主的工具比起 jsoncompare 来说有一个比较大的问题在于你的 compare 不是直接在原 json 中进行对比,而是先格式化后再进行对比,而且你格式化后的 json 还不能折叠显示,所以对于大 json 来说观感非常差。这是个很要命的问题,因为需要特地去用工具对比的往往都是大 json ,如果只有几行不需要折叠也能看全的 json 往往根本不需要工具,用肉眼就直接看出区别了。
不能折叠,而且强制格式化让每一项分行在很多时候观感会非常糟糕,比如
"skills": ["Javascript", "Python", "React"] 和 "skills": ["Javascript", "Python", "React", "Vue.js"] 这两行(这只是举个例子,实际上里面可能有几十上百个项目)
这一行之所以折叠为了一行,很大原因就是因为我只关注“哦,这两个返回结果的 skill 不一样”,而并不关心到底它不一样的 skill 具体是什么,是多了 C#还是少了 java ,我只需要知道有差异的地方在 skill 这项里就行了。
但是你的项目里,你会给"Vue.js"单独列一行并标绿,而"skills"这行本身就没有标绿了,这就导致 Side by Side 视图本身直观程度大减。而 Unified 和 Differences Only 的直观程度显然是远不如 Side by Side 视图的。此外,假如 skills 里面有成百上千项,而其中有几个项目有差别的话,我又不能对 skill 进行折叠,这个上下翻页对比的体验实在有点差。
我觉得你完全可以参考
jsoncompare.com 的实现,它现在的形态我觉得就挺直观了,在此基础上再增加自己额外的功能与特性