實現動態表單的一種思路

京東雲開發者發表於2023-10-07

一、動態表單是什麼

區別於傳統表單前後端配合聯調的開發實現方式,動態表單透過一種基於後設資料管理的配置化方法來實現表單的動態生成,並能根據配置自由增改刪指定欄位。實現特定需求的自助化。

圖1.1 傳統表單前後臺協作模式

圖1.2 動態表單前後臺協作模式

二、解決什麼問題

租戶有個性化業務表單訴求的場景,千人千面系統

三、實現動態表單的一種思路

基於後設資料管理的配置化表單技術共需三步來完成:

步驟A(資料劃分)

將服務端底層業務資料儲存結構由傳統主表欄位資訊拆分成標準資訊、個性資訊兩部分。其中標準資訊指那些用於儲存標準通用、穩定、經常作為業務查詢檢索條件的欄位,拿電商網站商品資訊舉例如商品建立時間、商品名稱、商品建立人等欄位;個性資訊用於儲存易變、租戶個性化、不經常用於檢索的欄位,如商品可售區域資訊、商品資質認證狀態等。將主表按以上規則劃分後,其中標準資訊按原來傳統方式按列儲存,而個性化資訊則打包以jsonSchema的方式整合儲存,其共同在資料庫中佔一列也稱動態列,以mysql為例這列的格式通常為”text”型別。

步驟A的目的:統一抽象並管理易變型別的業務資料

圖2.1 業務資料劃分抽象

步驟B(業務後設資料設計)

配置化表單離不開後設資料設計,其中後設資料指描述資料的資料。在本例中表單後設資料即表單各業務項(指商品名稱、商品建立時間、商品建立人等)可動態配置的核心能力。這一步將後設資料配置中具有代表性的幾個資訊屬性羅列出來,每項資訊屬性的用途見下圖介紹。此外基於後設資料資訊封裝後設資料增刪查改管理服務,實現後設資料的動態配置基座。

步驟B的目的:規劃業務後設資料資訊,提供後設資料讀寫能力

圖2.2 業務後設資料樣例

步驟C(前端動態渲染改造)

此步驟描述配置化表單的串聯實現,在表單渲染環節前端首先自頁面一載入就獲取當前租戶生效的業務後設資料資訊,然後基於後設資料資訊解析資料並動態生成網頁DOM節點,最後生成各節點校驗邏輯並展示頁面;表單資料回顯場景中,首先自頁面一載入就獲取當前租戶生效的業務後設資料資訊,再獲取業務資料資訊,結合兩者交集後(目的是僅展示最新配置生效的資料)將業務資料回顯到表單中。

步驟C的目的:頁面動態展示實現路徑

圖2.3 前端改造流程

四、方案缺陷

1. 使用範圍,並不是所有業務表單都適合動態化 , 表單動態化的改造收益與維護損耗存在一個潛在的收益峰值點。 過於複雜的業務表單系統反而會因為動態化而變得難以維護。 動態表單會將常規業務CRUD邏輯複雜化

2. 對於大表單、複雜巢狀等表單存在一定效能開銷。

3. 動態欄位無法作為檢索項發起檢索

作者:京東工業 於洋

來源:京東雲開發者社群 轉載請註明來源

相關文章