大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。
什么是 JsonTree.jsA 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.jshttps://cdn.jsdelivr.net/gh/williamtroup/JsonTree.js@1.1.2/dist/jsontree.export.min.jshttps://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
