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

掘金安东尼
9,091 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 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"、$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，以上便是本篇分享。点赞关注评论，为好文助力👍

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

avatar
文章
阅读
粉丝