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

新系列《这些前端新技术你很难再忽视了》，包括：SolidJS、Svelte、Tauri、Bun、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，非常准确。

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

• 根据JSON和对应的JSON Schema校验数据的正确性：json-schema-validator.herokuapp.com/
• 根据JSON数据，生成对应的JSON Schema数据：jsonschema.net/#/editor 或schemaguru.snowplowanalytics.com/#