JSON Schema概念及使用场景
作者：树酱
1.什么是JSON Schema
相信前端童鞋，对JSON应该都很熟悉。JSON (JavaScript Object Notation) 缩写，JSON 是一种数据格式，具有简洁、可读性高、支持广泛的特点JSON。通过JSON 我们可以灵活地来表示任意复杂的数据结构。
比如我们要描述一个人的信息，我们可以用JSON来描述
那JSON Schema又是什么鬼？ 🤔
JSON Schema 主要用于描述 JSON 数据，我们可以看到上面的JSON中不同的key-value数值，有string类型也有date类型。针对不同的应用场景，我们想约定JSON的数据所包含的字段、字段值得类型甚至依赖关系，那我们就需要有个规范来描述这些约束的关系。 而这也是JSON Schema 所存在的理由
下图表示就是一个JSON Schema，用于描述JSON数据。我们可以很明显看出JSON Schema本身是用JSON编写的, 换句话说他本身就是JSON文件！
JSON Schema 核心定义主要以下这些数据类型，通过 type 来指定 JSON 数据类型
啊乐同学：那我可以通过JSON Schema来做什么？
你看到上方的JSON Schema例子，很明显数据类型的定义可以方便我们用来做数据校验
结合上方的demo，我们通过这个在线校验工具来演示一波 👇
上图，JSON报出了不合法的提示，为什么呢？是因为我在左侧定义的birthday字段需要为date格式，而我们右侧定义的JSON数据中字段数值并不是date格式，所以校验出异常
再补充一个🌰：前后端先把数据接口约定好，等后端把接口输出完毕，直接用JSON Schema来对接口做验收。
除了上文的介绍：支持定义类型、对字段类型的校验之外，JSON Schema还支持以下几种特征
- 判断字段是否必填
- 支持正则表达式校验
- 支持枚举
- 字段个数、值最大最小值约束等等
总结：JSON Shema 本质上就是结构化json定义
关于不同数据类型的更详细定义，这里不大篇幅介绍。感兴趣的童鞋推荐看下方的推荐
拓展阅读：
2. JSON Schema的应用场景
JSON Schema的优点在于可以对数据类型进行描述，方便理解。同时也让机器“读懂”，比如数据校验或、输入检测提示、自动化测试等等，我们就下面这几个前端应用场景来聊聊JSON Schema的落地实践
2.1 表单数据校验
在中后台应用中有大量的表单需求，而表单离不开数据校验，那有什么validator工具库可以使用？ 你可以使用ajv这个经典的开源工具，它是一个非常流行的JSON Schema验证工具，而且性能号称最佳
上图为Ajv的具体使用，需要先声明一个数据模式schema，然后定义好规则（本质上是JSON Shema）然后我们再通过这个模式去校验用户输入的数据 data 是否符合我们的约束
Validator工具还有很多，包括开源组件库中常使用的async-validator,感兴趣的同学可以阅读树酱君之前写的下面这两篇文章：
2.2 接口数据校验
当后端接口设计好后，前端需要根据接口的设计进行联调，一般接口文档都会约束并定义好接口中返回字段的类型。
结合最近使用的Apifox来作接口调试，通过这个工具我们来聊聊背后的原理
首先我们可以在数据模型模块中里创建一个Pet实体，然后再定义宠物相关的字段，我们可以字段类型（本质上是基于JSON Schema 用来做数据校验），甚至可以根据定义的字段类型来定义期望Mock返回数据形式 👇
然后回到接口调试页面，我们在查询宠物详情这个接口中的data绑定我们预设好的实体Pet👇
最后我们运行这个接口，发现Apifox会对接口返回的数据response做校验
上图介绍的工具本质上是基于JSON Schema对接口返回数据进行校验
而且基于Apifox工具还可以根据字段定义的类型，来选择Mock类型，Mock出来的数据人性化很多！而且除了有现成预设的mock规则，也支持手动设置mock规则（Mock.js）
2.3 低代码 low-code
基于JSON Schema 社区衍生了诸多比如动态表单、可视化搭建页面或数据大屏等开源项目。
这里给大家推荐一个可视化H5搭建平台Dooring 👇
本质上可视化搭建，主要包括以下几个方面👇
- 右侧区域：物料（控件）的自定义配置 setting
- 中间区域：页面中图层引擎的渲染
- 左侧区域：物料（控件）选择拖拽区域
那JSON-Schema在可视化搭建中起到什么作用？
你可以理解主要为两点：
配置页生成 JSON Schema
视图页消费解析JSON Schema 并渲染视图
而 H5-Dooring 的组件都是通过动态加载的方式引入，按需加载，不需要的组件不会被加载。底层技术是在umi的dynamic方案的基于上封装了一个组件动态加载器，具体如如下图。本质上也是结合了 JSON Schema
对可视化搭建感兴趣的同学，可以阅读树酱君之前写的 从0到1开发可视化数据大屏 📺
其他开源low-code项目可借鉴
以上就是JSON Schema概念及使用场景的详细内容，更多关于JSON Schema使用场景的资料请关注脚本之家其它相关文章！