为何推荐 JsonTree.js 做 JSON 可视化?
大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。
什么是 JsonTree.js
A lightweight JavaScript library that generates customizable tree views to better visualize JSON data.
JsonTree.js 是 一个轻量级 JavaScript 库，可生成可自定义的树视图以更好地可视化 JSON 数据，其具有以下突出特征：
- 零依赖性且非常轻量
- 可导出以用于其他框架
- 可通过公共函数获得完整 API
- 完全采用 CSS/SASS 样式，完全响应，并与 Bootstrap 库兼容
- 完全支持 CSS 主题（使用 :root 变量）
- 每个 DOM 元素完全可配置，支持关闭 / 打开全部
- 可点击值、自定义值渲染
JsonTree.js 完全支持所有现代浏览器，例如： Google Chrome、FireFox 和 Opera 等。
如何使用 JsonTree.js
首先安装相应依赖：
npm install jjsontree.js
// 也可以通过 CDN 引入
https://cdn.jsdelivr.net/gh/williamtroup/JsonTree.js@1.1.2/dist/jsontree.min.js
https://cdn.jsdelivr.net/gh/williamtroup/JsonTree.js@1.1.2/dist/jsontree.export.min.js
https://cdn.jsdelivr.net/gh/williamtroup/JsonTree.js@1.1.2/dist/jsontree.js.min.css接着包含以下内容：
<link rel="stylesheet" href="dist/jsontree.js.css">
<script src="dist/jsontree.js"></script>然后进行 DOM 树绑定：
<div id="tree-1" data-jsontree-js="{'showCounts': true,'data': [ true, false, 5, 10,'A String'] }">
Your HTML.
</div>当然，开发者还可以通过自定义函数的方式来处理，比如：
<div id="json-tree-1" data-jsontree-js="bindingOptions"></div>下面是 bindingOptions 方法的内容：
function bindingOptions() {
return {
showCounts: false,
data: {
value1: true,
value2: "This is a string",
value3: new Date(),
value4: 5,
value7: null,
value8: function() {
// Does nothing
},
value9: 3.1415926535,
value5: [
true,
"This is another string",
{
arrayValue1: true,
arrayValue2: 10
},
[
false,
true,
5,
10,
new Date()
]
],
value6: {
objectValue1: false,
objectValue2: "This is a new string",
objectValue3: 20
}
}
}
}当然，JsonTree.js 还允许开发者使用配置选项，其允许自定义 JsonTree.js 的运行方式，比如下面的示例：
<script>
$jsontree.setConfiguration( {
safeMode: false
} );
</script>更多关于 JsonTree.js 的用法和示例可以参考文末资料，本文不再过多展开。
参考资料
https://www.william-troup.com/jsontree-js/documentation/options.html
