簡介

飛碼是京東科技研發的低代碼產品，可使營銷運營域下web頁面快速搭建。飛碼是單web頁面搭建工具，從創建頁面到監測再到投產的一站式解決方案。會通過七篇文章介紹飛碼，分別是：（1）背景與數據結構設計，（2）如何便捷配置出頁面-1，（3）如何便捷配置出頁面-2，（4）如何便捷配置出頁面-3，（5）如何便捷配置出頁面-4，（6）如何便捷快速驗證實現投產及飛碼探索，（7）飛碼畫布的設計。

一、背景與分析

營銷域下web頁面邏輯複雜、介面多、UI要求較高等特性。在複雜業務下使用ProCode需要較多調試與自測才可以達到業務期望值。飛碼的目標是從ProCode到LowCode，再到NoCode。如何使用LowCode或NoCode賦能營銷域下的場景，飛碼認為需要從以下兩個大方面解決。

1、 如何便捷配置出web頁面（編輯態）

1-1、 數據源（介面）：便捷數據源配置、同時也支持複雜數據源擴展能力
1-2、 組件：如何用低代碼能力快速創建組件；如何快速集成第三方組件；組件與平臺是解耦；組件的屬性、樣式、數據、事件可以定製化配置。
1-3、 模板：不同頁面之間有相同的區域可以進行便捷抽取為模板；飛碼官方提供常用的模板。
1-4、 數據：頁面中的數據具備共用能力；數據源可以復用；數據分類清晰；常見固定數據可配等。
1-5、 事件：組件中各種事件支持配置，串列事件，並行事件；事件支持調用其他事件；事件與數據共用需要打通。
1-6、 業務支持：需要具備配置埋點、許可權等能力，函數便捷配置能力。
1-7、 收藏與升級：具備收藏模板再次開發能力與頁面收藏再次開發能力。
1-8、 頁面UI結構：頁面的組件結構，便捷的排版與佈局。
1-9、 畫布功能：支持精準拖拽、支持上下移動複製、可對特定組件擴展特定能力。複雜區域配置應支持局部畫布能力。
1-10、 監測：對配置有問題的組件屬性，方法等可以監測定位；也需要定位彈框，事件配置問題等。
1-11、 頁面配置：頁面全局數據、頁面入參、需要支持動態配置能力。
1-12、 頁面數據導入導出：頁面數據DSL支持便捷導入導出能力。
1-13、 其他能力：回退上一步，歷史、預覽等能力。

2、 如何便捷快速驗證並投產（運行態）

2-1、數據中心，事件中心如何協議工作。
2-2、不依賴環境：對vue2.x、vue3.x 項目都可以支持，複雜業務場景如何支持。
2-3、投產頁面問題定位：快速找到並給出可能出現的錯誤位置，包含：數據類型錯誤、介面錯誤、組件錯誤等；每一個組件顯示與隱藏規則圖譜，每一個事件調用關係圖譜等。
於是得出至少需要滿足以上2個大能力點以及對應16個細化點（下文中會使用16個細化點描述）。才可以保障從LowCode或NoCode。

二、飛碼編輯態功能簡介

便於用戶操作，飛碼將組件與模板相關能力放在搭建平臺的左上角，具有共用屬性（數據源、事件、彈框、函數、數據）的部分配置放在頁面的左下角。根據業務線不同，業務組件放在基礎組件下方。在頁面的頂部區域設計有FMHelper能力，可對頁面配置內容做監測。詳見圖1所示。

圖1

三：數據結構分析與設計

設計LowCode或NoCode，需要先設計相關的DSL。DSL設計是需要滿足欄位少、可擴展、無異議等性質。根據部門內部技術棧使用與積累情況，飛碼使用vue技術棧進行設計與開發。對比vue中介面VNode與VNodeData數據結構，結合需要滿足2個大能力點以及對應16個細化點。可以推導出飛碼組件父級數據結構defaultData如下圖2所示：

圖2

可以看出，該數據結構並不能滿足上述16個細化點。數據源、數據、事件、彈框具有全局性質。飛碼的方案是定址查找，飛碼DSL數據結構如圖3所示。

圖3

四：數據源、數據、事件、彈框的數據結構分析

數據源：前端視角認為數據源等同於介面（API），介面是否被調用是通過事件觸發的或者在頁面生命周期函數中被執行的。可以認為事件觸發請求介面，介面返回數據，頁面緩存介面返回數據。考慮到復用性於是數據源用一個數組描述，詳見圖4，其中apis為圖3中apis欄位。考慮到id的易讀性，apiId開頭使用ap描述。

圖4

數據：數據是一個頁面中各個組件綁定的數據以及其他緩存數據，頁面層級的數據具有共用。便於理解與定位數據，飛碼將彈框與頁面級別的數據分離開、數據源數據與頁面數據也分離開。頁面的數據結構設計如圖5，圖6所示，圖5是數據結構，圖6是編輯態頁面配置樣式。

圖5圖6

事件：當我們點擊一個按鈕，或者頁面生命周期函數觸發，或者我們點擊一個組件等會觸發一個事件。事件可理解為代碼中的方法，方法可以調用其他方法，方法具有方法名，也會有入參與返回值。飛碼設計出事件id，通過定址方式滿足各種調用情況。其數據結構如圖7所示。

圖7

在圖7中，可以看到事件eventId開頭是ev，這樣便於與api，彈框區分。頁面中的所有事件放在events.children數組中。
彈框：有時候會遇到較複雜彈框，彈框也可以觸發另外一個彈框，彈框消失的時候會觸發一個事件等等。在一個頁面中可以有多個彈框，彈框的顯示與消失具有複雜性。為了便於區分彈框與頁面之間的關係，單獨對彈框進行欄位分離，其數據結構詳見圖8，圖9為編輯態情況下配置樣式。便於理解與問題定位dialogId開頭是為tk。

圖8圖9

五：小結

本小節分析了飛碼背景以及設計LowCode或NoCode平臺需要至少解決2個大能力點以及對應16個細化點。通過對16個細化點分析，結合部門情況與vue數據結構設計出來飛碼DSL，並對欄位含義進行解釋。下一小節飛碼LowCode前端技術（二）如何便捷配置出頁面-1，分析飛碼數據源、組件、模板方面的設計。

作者：京東科技 王光輝

來源：京東雲開發者社區 轉載請註明來源