可視化搭建系統(tǒng)之數(shù)據(jù)源

可視化搭建系統(tǒng)之數(shù)據(jù)源

https://www.zoo.team/article/visual-construction

背景
接上一篇文章 前端工程實踐之可視化搭建系統(tǒng)（一）鴿了比較久，看過的同學應該也都已經不記得了，也是又看到兩年前文章下熱評一位同學問的問題，兩年后我們換個形式來討論下這個問題(手動艾特水白泉同學)。



眾所周知，可視化搭建系統(tǒng)是為了提效，從純人工擼代碼開發(fā)需求到拖拖拽拽完成業(yè)務需求，大大提高了效率，降低了開發(fā)同學的壓力。我司可視化搭建系統(tǒng)魯班也已投入使用兩年有余，取得的效果也十分顯著，但由于時間的推移，問題也逐漸暴露出來：

大量的頁面使用相同組件，運營同學經常需要重復配置一個組件，導致每天要花費了大量的時間去維護頁面。

組件中耦合大量的特殊業(yè)務接口，導致組件復用性以及擴展性極差。

如何幫助運營同學提效？如何提高組件復用性同時并降低組件業(yè)務耦合度？這就是我們今天要聊的主題，可視化搭建系統(tǒng)中的數(shù)據(jù)源。

數(shù)據(jù)源是什么
從字面上來看，其實就是數(shù)據(jù)的來源，告訴應用所需要的數(shù)據(jù)在什么位置。數(shù)據(jù)源保證了應用程序與目標數(shù)據(jù)之間交互的規(guī)范和協(xié)議，它可以是數(shù)據(jù)庫，也可以是 Excel 等等。

產品設計
上文介紹了什么是數(shù)據(jù)源以及在當前搭建系統(tǒng)中我們遇到的問題，下面我們就從需求入手，先充當起產品的角色，針對需求我們先做問題分析，然后我們再做詳細設計。

問題 1：大量的頁面使用相同組件，運營同學經常需要重復配置一個組件，導致每天要花費了大量的時間去維護頁面
分析：組件中的重復配置，其中以營銷場景以及前臺大廳為主，這兩塊承載了我司大量的業(yè)務場景，其中各個組件的配置復雜且配置項繁多，其中又會出現(xiàn)針對不同的區(qū)劃做不同的數(shù)據(jù)項配置，一旦差異化配置過多，重復配置會不斷變多，維護起來會非常困難。

設計：從組件配置入手，正常業(yè)務開發(fā)中我們使用接口傳參來獲取差異化的數(shù)據(jù)，來做動態(tài)數(shù)據(jù)展示以及控制各項配置的開關?？梢暬罱ㄖ锌刂婆渲庙椀拈_關我們已經有了，缺的是不是就是一個接口，我們能不能讓組件中的配置也變成一個接口，這樣即使組件數(shù)據(jù)出現(xiàn)差異性，我們也可以通過入參的不同來下發(fā)不同的數(shù)據(jù)來決定組件應該展示什么數(shù)據(jù)。

問題 2：組件中耦合大量的特殊業(yè)務接口，導致組件復用性以及擴展性極差
分析：組件由各業(yè)務團隊同學自行開發(fā)貢獻，開發(fā)水平不一導致組件設計不同，有的同學喜歡把接口抽離成組件配置，有的同學又喜歡把接口直接寫在組件內部，兩者都有優(yōu)缺點我們不做評價，時間久了，使用前者的組件使用難度會很高，一旦維護的同學離職，組件直接就變黑盒了，使用后者的不然，除了當時服務過的需求可以使用這個組件，其他即使視覺層面一致的需求，也由于組件內部耦合的特殊業(yè)務接口，讓其他業(yè)務團隊寧愿重新開發(fā)也不敢在用這個組件。兩者最終得到的結果其實都是一樣的，組件復用性降低。

設計：如何提高組件復用性，從上述問題點接口入手，如果我們將可以將接口外置，動態(tài)與組件配置對接，也就是組件既可以使用外部接口做配置，也可以使用自己的靜態(tài)配置，是不是就可以解決上述問題。

下面是根據(jù)上述需求分析設計，產出的 PRD 簡版脈絡：

組件管理側新增數(shù)據(jù)源維護入口（以組件為維度，可以綁定多個數(shù)據(jù)源-接口或 EXCEL 等數(shù)據(jù) ）
新增、編輯、詳情、刪除（數(shù)據(jù)源信息維護 ）
數(shù)據(jù)源使用頁面（可查看當前數(shù)據(jù)源被哪些頁面所使用 ）
新增數(shù)據(jù)源管理菜單（全局數(shù)據(jù)源概覽 ）
查詢、復制（跨組件復制數(shù)據(jù)源，查看所有數(shù)據(jù)源與組件關系）
搭建頁（頁面搭建以及配置側）
配置面板-新增數(shù)據(jù)源配置項（展示組件關聯(lián)的所有數(shù)據(jù)源，無關聯(lián)數(shù)據(jù)源不展示）
數(shù)據(jù)源實現(xiàn)
下面我們根據(jù)上述 PRD 脈絡來看數(shù)據(jù)源的詳細設計。

數(shù)據(jù)源創(chuàng)建
前面有提到，數(shù)據(jù)源我們可以使用接口，業(yè)務側有后端同學，不用多想，數(shù)據(jù)源直接用后端同學寫的接口就完事了，但是我們的搭建平臺大多用戶為運營同學，業(yè)務場景基本上都無后端同學投入，這個時候問題就來了：

如何不用開發(fā)同學介入創(chuàng)造一個接口來跟組件做綁定呢？我們繼續(xù)往下看。

基于內部系統(tǒng)神筆，我們解決了這個問題，神筆是什么，神筆是個數(shù)據(jù)投放接口管理平臺，可以讓不懂代碼的業(yè)務一樣可以寫接口。神筆中有靜態(tài)化這么一個定義：

靜態(tài)化：即從 0 到 1 創(chuàng)建一個接口，接口入參以及出參支持自由定義，數(shù)據(jù)純靜態(tài)，可以自定義高級規(guī)則來根據(jù)入參不同返回不同的數(shù)據(jù)。

哎，這不就是我們想要的嘛。使用神筆靜態(tài)化，業(yè)務同學可以基于自己的需求，創(chuàng)造自己的接口來下發(fā)不同的數(shù)據(jù)，自給自足，媽媽再也不用擔心我不會寫接口啦。



數(shù)據(jù)源關聯(lián)
進入組件管理，選擇需要關聯(lián)的組件，點擊數(shù)據(jù)源維護。由于組件業(yè)務屬性不同，對應的數(shù)據(jù)源也會存在差異性，為了避免運營同學配置數(shù)據(jù)源時，出現(xiàn)選擇困難癥，我們以組件維度關聯(lián)數(shù)據(jù)源，一個組件可以關聯(lián)多個數(shù)據(jù)源，搭配數(shù)據(jù)源描述，讓運營同學可以最快選到需要的數(shù)據(jù)源。




新增數(shù)據(jù)源，目前我們使用最多的數(shù)據(jù)源多為 API 類型，也就是我們每天都在瀏覽器里看到的接口，在新增彈窗內輸入我們已有的接口或者神筆注冊的接口信息，配置好接口地址，請求方式，請求頭，請求參數(shù)，以及最重要的接口出參字段與組件數(shù)據(jù)字段之前的映射關系，輸入完成后就完成了數(shù)據(jù)源與組件的關聯(lián)。








維護接口與組件內部暴露字段的映射關系，輸入框會自動檢測映射關系是否正確。



數(shù)據(jù)源使用
進入我們需要搭建的頁面，選擇我們已綁定數(shù)據(jù)源的組件，右側配置面板選擇我們綁定的數(shù)據(jù)源，保存頁面配置，即可完成在頁面組件中使用數(shù)據(jù)源。



數(shù)據(jù)源管理
查看數(shù)據(jù)源使用頁面

“可查看已綁定的數(shù)據(jù)源被多少頁面使用，方便后續(xù)接口維護評估影響面以及進行數(shù)據(jù)分析



跨團隊使用

“為了提高數(shù)據(jù)源的復用性，我們提供了數(shù)據(jù)源管理中心，這里可以看到整個系統(tǒng)所有維護的數(shù)據(jù)源，方便跨組件跨業(yè)務團隊數(shù)據(jù)源復制復用。



數(shù)據(jù)源注入
這一塊我們在搭建側做統(tǒng)一收攏，對一個頁面所有組件選擇使用的數(shù)據(jù)源做統(tǒng)一處理。

為什么這么做？

上述提到數(shù)據(jù)源可以查看被哪些頁面使用，這部分數(shù)據(jù)便來自于此，在發(fā)布頁面時針對當前頁面所使用的數(shù)據(jù)源做頁面與數(shù)據(jù)源的關系落庫。
當頁面組件數(shù)量居多，綁定的數(shù)據(jù)源也會劇增，這時候接口并發(fā)數(shù)也會劇增。在這里無需開發(fā)者關心，我們可以統(tǒng)一處理，對全局的數(shù)據(jù)源請求做限流（引出一道經典面試題：[請用 JS 實現(xiàn) Ajax 并發(fā)請求控制] https://juejin.cn/post/6916317088521027598），以及對重復的數(shù)據(jù)源過濾，避免重復請求。
其他還有很多優(yōu)點不再贅述，感興趣的同學歡迎一起討論。

注入流程如下：

發(fā)布時將當前數(shù)據(jù)源詳情注入組件 schema
訪問頁面時，針對當前頁面所有組件，過濾使用了數(shù)據(jù)源的組件
數(shù)據(jù)源去重，標記重復項
去重后的數(shù)據(jù)源并發(fā)請求數(shù)據(jù)，請求池控制并發(fā)數(shù)，最大并發(fā) 10
數(shù)據(jù)源返回結果后，根據(jù)各組件 schema 內存儲的數(shù)據(jù)源信息中的組件字段與數(shù)據(jù)源字段的映射關系做數(shù)據(jù)映射
最后通過組件的 props 統(tǒng)一注入（為啥用 props ？請看我們上一篇：魯班核心代碼 (https://juejin.cn/post/6844903950508883982#heading-21)），最后完成整個頁面的數(shù)據(jù)源注入及渲染。
流程圖如下：



總結
數(shù)據(jù)源是搭建系統(tǒng)建設過程中重要的一環(huán)，為提效再進一步，他不僅降低了頁面的重復搭建，還收攏了差異化配置的入口，并且讓運營同學可以做一些研發(fā)同學才可以做的事：接口創(chuàng)建、引用、發(fā)布等。以上是我個人對搭建系統(tǒng)中數(shù)據(jù)源的一些總結，后續(xù)還會繼續(xù)分享數(shù)據(jù)投放相關，如有錯誤，勞煩指正修改，感謝各位能看到這里。

作者：明晝


歡迎關注微信公眾號 ：政采云前端團隊