[發明專利]強擴展性的前端可視化界面生成方法、系統、介質及終端

在審

• 申請號: 202011053184.X
• 申請日: 2020-09-29
• 公開（公告）號: CN112130856A
• 公開（公告）日: 2020-12-25
• 發明（設計）人: 冉光宇
• 申請（專利權）人: 重慶紫光華山智安科技有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06F8/41
• 代理公司: 上海光華專利事務所(普通合伙) 31219
• 代理人: 李鐵

1.一種強擴展性的前端可視化界面生成方法，其特征在于，包括：

預先建立標準組件庫，所述標準組件庫包括多種通用組件；

設置設計器，通過所述設計器從所述標準組件庫中選取組件并拖動添加到頁面組件樹的指定節點，并且對每一個目標組件設置相關屬性；

將設計器中的組件樹映射為預設格式的描述文件；

獲取非標組件，通過對所述非標組件定義組件名和擴展插槽，組成標準組件外殼，進而形成標準組件模板，完成非標準組件的封裝；

設置編譯器，通過所述編譯器將所述預設格式的描述文件編譯成組件樹的源代碼；

根據所述組件樹的源代碼，完成前端可視化界面生成。

2.根據權利要求1所述的強擴展性的前端可視化界面生成方法，其特征在于，對所述標準組件庫中的每個標準組件注入事件句柄，通過所述事件句柄與其他組件進行通信。

3.根據權利要求2所述的強擴展性的前端可視化界面生成方法，其特征在于，

定義非標組件的組件名和擴展插槽，組成標準組件外殼；

在所述標準組件外殼內部注入事件句柄，并將其作為擴展插槽函數的參數注入，與其他組件進行通信；

擴展插槽函數產出并返回DOM節點；

在組件內部將擴展插槽函數產出并返回的DOM節點掛載到標準組件外殼的根節點下，形成所述標準組件模板；

通過實例化所述標準組件模板，獲取標準組件。

4.根據權利要求3所述的強擴展性的前端可視化界面生成方法，其特征在于，

通過所述擴展插槽函數實現非標準組件的特殊UI，所述事件句柄通過擴展插槽函數的輸入參數注入擴展插槽。

5.根據權利要求1所述的強擴展性的前端可視化界面生成方法，其特征在于，根據整體技術棧的不同，對預設格式的描述文件的組件樹進行遍歷，并將其解釋為對應的技術棧下的組件代碼。

6.根據權利要求4所述的強擴展性的前端可視化界面生成方法，其特征在于，

預先建立標準組件庫中每個組件的代碼塊和組件名之間的映射關系；

遍歷整個組件樹，當每步進到一個組件節點時，通過組件名映射將對應代碼塊安裝在該節點上；

當遍歷完成時，完成所有源代碼生成。

7.一種強擴展性的前端可視化界面生成系統，其特征在于，包括：

標準組件庫，所述標準組件庫包括多種通用組件；

設計器，用于從所述標準組件庫中選取組件并拖動添加到頁面組件樹的指定節點，并且對每一個目標組件設置相關屬性；

將設計器中的組件樹映射為預設格式的描述文件；

非標準組件封裝模塊，用于獲取非標組件，通過對所述非標組件定義組件名和擴展插槽，組成標準組件外殼，進而形成標準組件模板，完成非標準組件的封裝；

編譯器，用于通過所述編譯器將所述預設格式的描述文件編譯成組件樹的源代碼；

可視化界面生成模塊，用于根據所述組件樹的源代碼，完成前端可視化界面生成。

8.根據權利要求7所述的強擴展性的前端可視化界面生成系統，其特征在于，

定義非標組件的組件名和擴展插槽，組成標準組件外殼；

在所述標準組件外殼內部注入事件句柄，并將其作為擴展插槽函數的參數注入，與其他組件進行通信；

擴展插槽函數產出并返回DOM節點；

在組件內部將擴展插槽函數產出并返回的DOM節點掛載到標準組件外殼的根節點下，形成所述標準組件模板；

通過實例化所述標準組件模板，獲取標準組件。

9.一種計算機可讀存儲介質，其上存儲有計算機程序，其特征在于：所述計算機程序被處理器執行時實現權利要求1至6中任一項所述方法。

10.一種電子終端，其特征在于，包括：處理器及存儲器；

所述存儲器用于存儲計算機程序，所述處理器用于執行所述存儲器存儲的計算機程序，以使所述終端執行如權利要求1至6中任一項所述方法。