这些前端新技术你很难再忽视了 —— JSON Schema

新系列《这些前端新技术你很难再忽视了》,包括:SolidJS、Svelte、Tauri、Bun、Schema等。每一个都引领前端技术演变趋势,很有必要了解。

本篇带来 —— JSON Schema

闲话少说,冲了~

  • 点赞收藏关注,今晚一夜暴富 ???

这些前端新技术你很难再忽视了 —— JSON Schema

什么是 JSON Schema?

答:一言以蔽之:JSON Schema 之于 JSON ,就像 TypeScript 之于 JavaScript

我们知道,JSON 作为主要的前后端交互格式,已经称霸多年了,json 的本质就是对象,它足够轻量、简单、易读,但是它也存在它的问题。

即:没有格式校验

比方说:一段 JSON 代码如下

{
number:10,
street_name:"唐宁街",
street_type:"Avenue"
}

尽管这段 json 对开发的人来说简单明了,我们很容易就知道它是表示一个街道信息的对象,但仍然存在一些问题,比如:

  • number 可以是字符串吗?有最大值、最小值的限制吗?
  • street_name 可以是是数字吗?字符长度有限制吗?
  • street_type 可以是任意值?还是有哪些固定可选项可供选择?

好了,JSON Schema 可以解决这一点。

JSON Scheme 表示如下:

{
"$schema": "http://json-schema.org/schema#",
"$id": "http://yourdomain.com/schemas/myschema.json",
"title": "Street",
"description": "it is a Street object",
"type": "object",
"properties": {
"number": {
"type": "number"
},
"street_name": {
"type": "string"
},
"street_type": {
"type": "string",
"enum": ["Street", "Avenue", "Boulevard"]
}
},
"required": ["number", "street_name"]
}

​"$schema"​​、​​$id​​、​​title​​、​​description​​ 这 4 个字段先不看。

  • "type": "object",说明这个 JSON 的类型,通常为 object 或 array
  • properties 关键字指定这个object有三个属性 number,street_name,street_type
  • 每个属性的 type 表示这个属性的数据类型
  • enum 关键字表示这个 street_type 的数据只能是"Street", "Avenue", "Boulevard"这三个值
  • required 表示number,street_name是必须有的属性,所有字段默认是非必须

这样一来,普通的 json 就被描述了,被规定格式了,被校验了!

合法的:

{
"number": 1600,
"street_name": "Pennsylvania",
"street_type": "Avenue",
"direction": "NW"
}

不合法的:

{
"number": 1600,
"street_name": "Pennsylvania",
"street_type": "super-speed"
}

因为:street_type 的值不属于限定中的枚举值

好了,再来看 ​​"$schema"​​、​​$id​​、​​title​​、​​description​​ 这 4 个字段:

  • ​"$schema"​​:因为 JSON Schema 本身就是JSON,所以很难判断什么是JSON Schema,什么只是JSON 数据。​​$schema​​ 关键字用于声明 JSON Schema。
  • ​$id​​:作为每个模式的惟一标识符,类似于 $ref 作标记用,可被引用。
  • ​title​​:标题
  • ​description​​:描述

除了上面所说属性以外,JSON Schema 还规定了很多其它属性,比如:​​maximum​​、​​minimum​​ 大于小于,​​pattern​​ 正则校验,​​items​​ 限定数组中的每一项的类型 等等。

例:

    ···
"phone": {
"description": "The contact for a person",
"type": "string",
"pattern": "^[13|14|15|16|17|18|19][0-9]{9}$"
},
···

更多高阶用法,比如对象之间的引用、生成递归结构、dependencies,additionalItems,consts, allOf, anyOf, oneOf, not, if……then……else 等等等,了解更多在官网:​​json-schema.org​​ 或者 ​​understanding-json-schema​

所以,综上,说:JSON Schema 之于 JSON ,就像 TypeScript 之于 JavaScript,非常准确。

另外:提供一些辅助工具在线地址,拿去玩(●'◡'●):


你学废了吗?

OK,以上便是本篇分享。点赞关注评论,为好文助力?

发表评论

相关文章