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

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

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第12天,点击查看活动详情


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

本篇带来 —— JSON Schema

闲话少说,冲了~

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

image.png

什么是 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"$idtitledescription 这 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"$idtitledescription 这 4 个字段:

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

除了上面所说属性以外,JSON Schema 还规定了很多其它属性,比如:maximumminimum 大于小于,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,以上便是本篇分享。点赞关注评论,为好文助力👍

我是掘金安东尼 🤠 100 万人气前端技术博主 💥 INFP 写作人格坚持 1000 日更文 ✍ 关注我,安东尼陪你一起度过漫长编程岁月 🌏

分类:
前端
收藏成功!
已添加到「」, 点击更改