我和JSON Schema的那些事

?

哈嘍，我是?? 樹醬。今天聊一聊關(guān)于我跟Json schema的一些交集，順便給大家重新梳理下今日這個(gè)主角的概念及當(dāng)下主要的一些應(yīng)用場景

?

1.什么是JSON Schema

相信前端童鞋，對JSON應(yīng)該都很熟悉。JSON (JavaScript Object Notation) 縮寫，JSON 是一種數(shù)據(jù)格式，具有簡潔、可讀性高、支持廣泛的特點(diǎn)JSON。通過JSON 我們可以靈活地來表示任意復(fù)雜的數(shù)據(jù)結(jié)構(gòu)。

比如我們要描述一個(gè)人的信息，我們可以用JSON來描述

?

那JSON Schema又是什么鬼？??

?

JSON Schema 主要用于描述 JSON 數(shù)據(jù)，我們可以看到上面的JSON中不同的key-value數(shù)值，有string類型也有date類型。針對不同的應(yīng)用場景，我們想約定JSON的數(shù)據(jù)所包含的字段、字段值得類型甚至依賴關(guān)系，那我們就需要有個(gè)規(guī)范來描述這些約束的關(guān)系。而這也是JSON Schema 所存在的理由?

下圖表示就是一個(gè)JSON Schema，用于描述JSON數(shù)據(jù)。我們可以很明顯看出JSON Schema本身是用JSON編寫的, 換句話說他本身就是JSON文件！

JSON Schema 核心定義主要以下這些數(shù)據(jù)類型，通過 type 來指定 JSON 數(shù)據(jù)類型

?

啊樂同學(xué)：那我可以通過JSON Schema來做什么？

?

你看到上方的JSON Schema例子，很明顯數(shù)據(jù)類型的定義可以方便我們用來做數(shù)據(jù)校驗(yàn)

結(jié)合上方的demo，我們通過這個(gè)在線校驗(yàn)工具來演示一波 ??

上圖，JSON報(bào)出了不合法的提示，為什么呢？是因?yàn)槲以谧髠?cè)定義的birthday字段需要為date格式，而我們右側(cè)定義的JSON數(shù)據(jù)中字段數(shù)值并不是date格式，所以校驗(yàn)出異常

再補(bǔ)充一個(gè)??：前后端先把數(shù)據(jù)接口約定好，等后端把接口輸出完畢，直接用JSON Schema來對接口做驗(yàn)收。

除了上文的介紹：支持定義類型、對字段類型的校驗(yàn)之外，JSON Schema還支持以下幾種特征

• 判斷字段是否必填
• 支持正則表達(dá)式校驗(yàn)
• 支持枚舉
• 字段個(gè)數(shù)、值最大最小值約束等等

總結(jié)：JSON Shema 本質(zhì)上就是結(jié)構(gòu)化json定義

關(guān)于不同數(shù)據(jù)類型的更詳細(xì)定義，這里不大篇幅介紹。感興趣的童鞋推薦看下方的推薦

拓展閱讀：

• Apifox - JSON Schema 介紹

• JSON Schema 規(guī)范（中文版）

2. JSON Schema的應(yīng)用場景

JSON Schema的優(yōu)點(diǎn)在于可以對數(shù)據(jù)類型進(jìn)行描述，方便理解。同時(shí)也讓機(jī)器“讀懂”，比如數(shù)據(jù)校驗(yàn)、輸入檢測提示、自動化測試等等，我們就下面這幾個(gè)前端應(yīng)用場景來聊聊JSON Schema的落地實(shí)踐

2.1 表單數(shù)據(jù)校驗(yàn)

在中后臺應(yīng)用中有大量的表單需求，而表單離不開數(shù)據(jù)校驗(yàn)，那有什么validator工具庫可以使用？你可以使用ajv這個(gè)經(jīng)典的開源工具，它是一個(gè)非常流行的JSON Schema驗(yàn)證工具，而且性能號稱最佳

上圖為Ajv的具體使用，需要先聲明一個(gè)數(shù)據(jù)模式schema，然后定義好規(guī)則（本質(zhì)上是JSON Shema）然后我們再通過這個(gè)模式去校驗(yàn)用戶輸入的數(shù)據(jù)?data?是否符合我們的約束

Validator工具還有很多，包括開源組件庫中常使用的async-validator,感興趣的同學(xué)可以閱讀樹醬君之前寫的下面這兩篇文章：

• 這些node開源工具你值得擁有 - 數(shù)據(jù)校驗(yàn)工具

• 前端表單數(shù)據(jù)那些事

2.2 接口數(shù)據(jù)校驗(yàn)

當(dāng)后端接口設(shè)計(jì)好后，前端需要根據(jù)接口的設(shè)計(jì)進(jìn)行聯(lián)調(diào)，一般接口文檔都會約束并定義好接口中返回字段的類型。

結(jié)合最近使用的Apifox來作接口調(diào)試，通過這個(gè)工具我們來聊聊背后的原理

首先我們可以在數(shù)據(jù)模型模塊中里創(chuàng)建一個(gè)Pet實(shí)體，然后再定義寵物相關(guān)的字段，我們可以字段類型（本質(zhì)上是基于JSON Schema 用來做數(shù)據(jù)校驗(yàn)），甚至可以根據(jù)定義的字段類型來定義期望Mock返回?cái)?shù)據(jù)形式 ??

然后回到接口調(diào)試頁面，我們在查詢寵物詳情這個(gè)接口中的data綁定我們預(yù)設(shè)好的實(shí)體Pet??

最后我們運(yùn)行這個(gè)接口，發(fā)現(xiàn)Apifox會對接口返回的數(shù)據(jù)response做校驗(yàn)

上圖介紹的工具本質(zhì)上是基于JSON Schema對接口返回?cái)?shù)據(jù)進(jìn)行校驗(yàn)

而且基于Apifox工具還可以根據(jù)字段定義的類型，來選擇Mock類型，Mock出來的數(shù)據(jù)人性化很多！而且除了有現(xiàn)成預(yù)設(shè)的mock規(guī)則，也支持手動設(shè)置mock規(guī)則（Mock.js）

2.3 低代碼 low-code

?

基于JSON Schema 社區(qū)衍生了諸多比如動態(tài)表單、可視化搭建頁面或數(shù)據(jù)大屏等開源項(xiàng)目。

?

這里給大家推薦一個(gè)可視化H5搭建平臺Dooring ??

本質(zhì)上可視化搭建，主要包括以下幾個(gè)方面??

• 右側(cè)區(qū)域：物料（控件）的自定義配置 setting
• 中間區(qū)域：頁面中圖層引擎的渲染
• 左側(cè)區(qū)域：物料（控件）選擇拖拽區(qū)域

?

那JSON-Schema在可視化搭建中起到什么作用？

?

你可以理解主要為兩點(diǎn)：

• 配置頁生成 JSON Schema

• 視圖頁消費(fèi)解析JSON Schema 并渲染視圖

而 H5-Dooring 的組件都是通過動態(tài)加載的方式引入，按需加載，不需要的組件不會被加載。底層技術(shù)是在umi的dynamic方案的基于上封裝了一個(gè)組件動態(tài)加載器，具體如如下圖。本質(zhì)上也是結(jié)合了 JSON Schema

對可視化搭建感興趣的同學(xué)，可以閱讀樹醬君之前寫的 從0到1開發(fā)可視化數(shù)據(jù)大屏 ??

其他開源low-code項(xiàng)目可借鑒

• 百度 - amis
• vue-layout
• 阿里巴巴 - formily
• 阿里巴巴 - alist
• 魯班H5

3 最后

?

如果你還使用JSON schema做過一些其他事情，?? 也歡迎你在評論區(qū)留言

?