快捷導(dǎo)航

JSON?Schema概念及使用場(chǎng)景

更新時(shí)間：2022年07月09日 15:18:34 作者：樹醬

這篇文章主要為大家介紹了JSON?Schema概念及使用場(chǎng)景示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

1.什么是JSON Schema

相信前端童鞋，對(duì)JSON應(yīng)該都很熟悉。JSON (JavaScript Object Notation) 縮寫，JSON 是一種數(shù)據(jù)格式，具有簡(jiǎn)潔、可讀性高、支持廣泛的特點(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類型。針對(duì)不同的應(yīng)用場(chǎ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來對(duì)接口做驗(yàn)收。

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

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

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

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

拓展閱讀：

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

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

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

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

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

上圖為Ajv的具體使用，需要先聲明一個(gè)數(shù)據(jù)模式schema，然后定義好規(guī)則（本質(zhì)上是JSON Shema）然后我們?cè)偻ㄟ^這個(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)，一般接口文檔都會(huì)約束并定義好接口中返回字段的類型。

結(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)試頁面，我們?cè)诓樵儗櫸镌斍檫@個(gè)接口中的data綁定我們預(yù)設(shè)好的實(shí)體Pet??

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

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

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

2.3 低代碼 low-code

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

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

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

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

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

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

配置頁生成 JSON Schema
視圖頁消費(fèi)解析JSON Schema 并渲染視圖

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