在現(xiàn)代語言的開發(fā)中，很多需要做的其實只是一些配置信息，然后各種框架和類庫幫我們解決了大部分邏輯上可行的部分。

對于web開發(fā)，筆者也想一路實現(xiàn)一個效果，只需配置即可完成web表單的自動創(chuàng)建。 功夫不負有心人，終于找到了這個愿景需要的輪子庫，現(xiàn)在基本達到了我想要的效果。

閱讀體驗和社區(qū) WPSJS系列文章在語雀文檔上有更好的閱讀體驗（歷史文章+全文搜索+附件下載）。

關(guān)于WPSJS的技術(shù)討論，作者建立了一個非官方的討論社區(qū)，歡迎加入，

QQ群：

語雀社區(qū)《WPSJS插件插件開發(fā)技術(shù)交流》

加入團隊成員一起創(chuàng)建內(nèi)容：

#

1、很久以前，Excel其實也提供了類似的技術(shù)

上古1999年，Excel就已經(jīng)支持數(shù)據(jù)綁定，使用外部xml文件來控制Excel單元格的內(nèi)容規(guī)范或列表數(shù)據(jù)列的規(guī)范。 其中使用了 XPath 屬性和 Xml (XSD)。

下圖中的XPath文檔說明

關(guān)于Excel的Xml數(shù)據(jù)操作和綁定的更多知識可以參考很久以前翻譯的書【VBA參考百科全書】，里面有專門的章節(jié)。

在XSD文件中，可以定義很多約束條件，比如字段類型是文本還是數(shù)字，字段的文本長度，數(shù)字的大小范圍，是否必填，默認值是多少等。在微軟，曾經(jīng)有一個組件就是做這件事的，通過接口配置對應(yīng)的XSD規(guī)范文件。 讓表單的填寫最終控制生成數(shù)據(jù)的質(zhì)量。

2、Json在互聯(lián)網(wǎng)時代取代了Xml的歷史地位

作為一種數(shù)據(jù)交換技術(shù)，目前有兩個陣營，xml和json，而現(xiàn)代的Web API大多已經(jīng)轉(zhuǎn)向了Json陣營，所以目前有大量的Json使用場景，數(shù)據(jù)映射也有專門的Json來以前的 XSD。

本文提到的使用Json配置來完成表單設(shè)計，準確的說是使用Json文件來完成。

另外，要了解更多關(guān)于 Json 的知識，可以訪問這個網(wǎng)址，其中介紹了多種語言和實現(xiàn)它的工具：

至于WebUI的創(chuàng)建過程，有幾個對應(yīng)的類庫。 筆者能力有限，對JSON Form類庫有了更深入的了解和學(xué)習(xí)。 本文的以下部分也將重點介紹此類庫的實現(xiàn)。 有興趣的朋友也可以了解和了解一下其他幾項，或許能得到更好的解決辦法。

三、利用Json自動生成網(wǎng)頁表單頁面的原理

先上效果圖，下圖紅圈部分是筆者打算在網(wǎng)頁圖表中開啟的屬性修改部分。 使用上面提到的JSON Form庫，直接寫Json渲染，不用寫相應(yīng)的html和css代碼（需要美化后期效果，再用css細化布局，比如下圖，默認單行一列顯示現(xiàn)在處理成單行多列顯示）。

學(xué)習(xí)這個庫是有一定的成本的，更多的細節(jié)需要你自己去了解。 這篇非詳解教學(xué)文章，只是率先向大家展示了這種可能性。 如下圖所示，其官方詳細的示例演示和文檔說明，仔細查看可以掌握到足夠的程度。

詳細文檔地址：

4.使用Json配置生成web form表單的開發(fā)優(yōu)勢

除了上述純配置方式外，僅使用Json文件即可完成整個web表單的自動生成，還有其他優(yōu)點，這里簡單羅列一下。

1.字段約束根據(jù)配置文件定義自動生效

如上圖所示，在每個Web表單控件中，根據(jù)我們定義的字段類型和其他規(guī)范要求，在Web控件渲染后，這些約束已經(jīng)生效。 比如在枚舉字段時，會呈現(xiàn)一個下拉選擇框，用戶不能輸入選中項以外的內(nèi)容。

類似于必填哪個字段，數(shù)值字段類型的范圍是多少，輸入范圍限制為最大值和最小值等，這些都不需要我們額外編寫腳本。

2.用戶在form表單中填寫的數(shù)據(jù)，可以輕松采集到位

下圖中，點擊提交后，整個表單會以json對象數(shù)據(jù)的形式返回，不需要一個一個去查找用戶輸入的值。

3.表單初始化可以一次性賦初值

因為它使用json作為數(shù)據(jù)交互的媒介，所以初始值和返回值都是一個json數(shù)組。 只需在其配置中配置初始值即可。

它的初始值甚至可以是一個數(shù)組，多條記錄將相應(yīng)地出現(xiàn)在用戶界面中。

4.將返回的json對象與源對象合并

我們手頭先有一個初始的json對象，通過用戶界面交互得到一個新的json對象（注意當(dāng)非必填項為空時，新的對象不會有這個節(jié)點數(shù)據(jù)），如何快速轉(zhuǎn)換新的json to 將對象合并到原來的初始化對象中怎么辦？

比如筆者在開發(fā)Vega圖表時，有一個初始化的json屬性供Vega庫調(diào)用配置相關(guān)的屬性。 用戶交互更新這些屬性后，如何快速將它們映射到原來的json對象，讓代碼讀取原來的結(jié)構(gòu)，從而達到更新的效果。

當(dāng)有規(guī)則的東西時，請考慮輪子。 也許在世界的某個角落有人已經(jīng)為我們實現(xiàn)了相應(yīng)的功能。 我們只需要用它來避免思考解決方案。

這個輪子就是只要一個方法merge就可以完成我們需要的效果。

詳情請參考文檔：

5.自動生成Json

作為一個合格的開發(fā)者，總是需要找一些現(xiàn)成的工具來完成一些有規(guī)律的重復(fù)操作，比如生成這個json文件。 如果能直接給一個json對象，就可以生成這個json。 這不是一件好事嗎？

方向是對的，但尋找的過程是短暫的。 最后筆者為大家找了一個插件JSON Utils，可以一鍵生成json原型。 只需一個命令即可。

由于JSON Form庫沒有使用完全標準的Json，尤其是數(shù)組結(jié)構(gòu)的json節(jié)點，上面生成的json文件可能需要稍作修改，具體可以參考官方文檔。

6.xpath對應(yīng)的讀寫庫

做過網(wǎng)頁采集相關(guān)工作的應(yīng)該都熟悉xpath，它是快速定位網(wǎng)頁節(jié)點內(nèi)容的利器。 同樣，在處理json文件時，也有類似的選擇定位語法。

在環(huán)境中，筆者為大家找了一個庫-Plus，非常不錯，值得學(xué)習(xí)和掌握。 有了這個庫在手，大大增強了我們訪問json對象的能力，尤其是一些層次結(jié)構(gòu)很深的復(fù)雜json對象。 具體使用方法請參考官方文檔：

七、結(jié)論

本文與大家分享最近一路探索的關(guān)于json、json、web表單自動渲染的話題。 文中看到的幾個庫，都是作者自己在同類題材中經(jīng)過比較、試錯后，自己嘗試發(fā)現(xiàn)其可行性。 和價值點。

在知識的學(xué)習(xí)中，需要有引導(dǎo)。 希望作者的分享能給大家一些好的思路和啟發(fā)，讓大家更方便快捷的開發(fā)WPSJS。

也希望更多的人加入分享的行列，讓社區(qū)更加繁榮。 技術(shù)的魅力之一就是：分享越多，收獲越多，學(xué)得越多，進步越大。

對于本文提到的幾個庫，請務(wù)必使用官方文檔進行學(xué)習(xí)。 任何其他零碎的文章分享方式只會讓你更加沮喪。 這也是作者自己的親身經(jīng)歷。 沒有人比作者更了解他。 關(guān)于自己制作的輪子的更多使用細節(jié)只能在官方文檔中找到。