JSON Schema概念及使用場景

Posted on by

1.什麼是JSON Schema

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

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

那JSON Schema又是什麼鬼？ 🤔

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

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

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

啊樂同學：那我可以通過JSON Schema來做什麼？

你看到上方的JSON Schema例子，很明顯數據類型的定義可以方便我們用來做數據校驗

結合上方的demo，我們通過這個在線校驗工具來演示一波 👇

上圖，JSON報出瞭不合法的提示，為什麼呢？是因為我在左側定義的birthday字段需要為date格式，而我們右側定義的JSON數據中字段數值並不是date格式，所以校驗出異常

再補充一個🌰：前後端先把數據接口約定好，等後端把接口輸出完畢，直接用JSON Schema來對接口做驗收。

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

  • 判斷字段是否必填
  • 支持正則表達式校驗
  • 支持枚舉
  • 字段個數、值最大最小值約束等等

總結：JSON Shema 本質上就是結構化json定義

關於不同數據類型的更詳細定義，這裡不大篇幅介紹。感興趣的童鞋推薦看下方的推薦

拓展閱讀：

JSON Schema 規范（中文版）

2. JSON Schema的應用場景

JSON Schema的優點在於可以對數據類型進行描述，方便理解。同時也讓機器“讀懂”，比如數據校驗或、輸入檢測提示、自動化測試等等，我們就下面這幾個前端應用場景來聊聊JSON Schema的落地實踐

2.1 表單數據校驗

在中後臺應用中有大量的表單需求，而表單離不開數據校驗，那有什麼validator工具庫可以使用？ 你可以使用ajv這個經典的開源工具，它是一個非常流行的JSON Schema驗證工具，而且性能號稱最佳

上圖為Ajv的具體使用，需要先聲明一個數據模式schema，然後定義好規則（本質上是JSON Shema）然後我們再通過這個模式去校驗用戶輸入的數據 data 是否符合我們的約束

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

這些node開源工具你值得擁有 – 數據校驗工具

前端表單數據那些事

2.2 接口數據校驗

當後端接口設計好後，前端需要根據接口的設計進行聯調，一般接口文檔都會約束並定義好接口中返回字段的類型。

結合最近使用的Apifox來作接口調試，通過這個工具我們來聊聊背後的原理

首先我們可以在數據模型模塊中裡創建一個Pet實體，然後再定義寵物相關的字段，我們可以字段類型（本質上是基於JSON Schema 用來做數據校驗），甚至可以根據定義的字段類型來定義期望Mock返回數據形式 👇

然後回到接口調試頁面，我們在查詢寵物詳情這個接口中的data綁定我們預設好的實體Pet👇

最後我們運行這個接口，發現Apifox會對接口返回的數據response做校驗

上圖介紹的工具本質上是基於JSON Schema對接口返回數據進行校驗

而且基於Apifox工具還可以根據字段定義的類型，來選擇Mock類型，Mock出來的數據人性化很多！而且除瞭有現成預設的mock規則，也支持手動設置mock規則（Mock.js）

2.3 低代碼 low-code

基於JSON Schema 社區衍生瞭諸多比如動態表單、可視化搭建頁面或數據大屏等開源項目。

這裡給大傢推薦一個可視化H5搭建平臺Dooring 👇

本質上可視化搭建，主要包括以下幾個方面👇

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

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

你可以理解主要為兩點：

  • 配置頁生成 JSON Schema

  • 視圖頁消費解析JSON Schema 並渲染視圖

而 H5-Dooring 的組件都是通過動態加載的方式引入，按需加載，不需要的組件不會被加載。底層技術是在umi的dynamic方案的基於上封裝瞭一個組件動態加載器，具體如如下圖。本質上也是結合瞭 JSON Schema

對可視化搭建感興趣的同學，可以閱讀樹醬君之前寫的 從0到1開發可視化數據大屏 📺

其他開源low-code項目可借鑒

百度 – amis

vue-layout

阿裡巴巴 – formily

阿裡巴巴 – alist

魯班H5

以上就是JSON Schema概念及使用場景的詳細內容，更多關於JSON Schema使用場景的資料請關註WalkonNet其它相關文章！

推薦閱讀：