[發(fā)明專利]強擴展性的前端可視化界面生成方法、系統(tǒng)、介質(zhì)及終端

在審

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

本發(fā)明提供一種強擴展性的前端可視化界面生成方法、系統(tǒng)、介質(zhì)及終端，方法包括預(yù)先建立標(biāo)準(zhǔn)組件庫，通過設(shè)計器從標(biāo)準(zhǔn)組件庫中選取組件并拖動添加到頁面組件樹的指定節(jié)點，并且對每一個目標(biāo)組件設(shè)置相關(guān)屬性；將設(shè)計器中的組件樹映射為預(yù)設(shè)格式的描述文件；通過對非標(biāo)組件定義組件名和擴展插槽，組成標(biāo)準(zhǔn)組件外殼，進而形成標(biāo)準(zhǔn)組件模板，完成非標(biāo)準(zhǔn)組件的封裝；通過編譯器將預(yù)設(shè)格式的描述文件編譯成組件樹的源代碼，完成前端可視化界面生成；本發(fā)明通過將非標(biāo)組件封裝成標(biāo)準(zhǔn)組件模板的方式，使用同樣的可視化工具生成頁面描述文件，再將頁面描述文件反向生成組件樹源代碼，供二次開發(fā)與擴展，實現(xiàn)組件間的交互、實現(xiàn)具體非標(biāo)組件UI及邏輯開發(fā)。

技術(shù)領(lǐng)域

本發(fā)明涉及計算機領(lǐng)域，尤其涉及一種強擴展性的前端可視化界面生成方法、系統(tǒng)、介質(zhì)及終端。

背景技術(shù)

可視化技術(shù)可以使人能夠通過圖形中直接對具有形體的信息進行操作，和計算機直接交流，針對目前的前端可視化界面生成方法，目前有兩種比較主流的方式，一種是通過純手工的方式進行代碼堆砌，形成頁面；另一種是通過一系列工具和方法和內(nèi)置組件再加上人工可視化界面配置的方式生成頁面。這兩種方式各有優(yōu)劣，第一種確實足夠靈活，擴展性強，但缺乏效率；第二種效率足夠高，但是耦合性強，不能夠很好的進行擴展。二者在各自需求的場景下都能很好的發(fā)揮作用。

但是，在大多數(shù)場景中，通過第二種方案無法實現(xiàn)完全覆蓋，內(nèi)置組件無法考慮完整所有場景的需要，一旦有一個非標(biāo)組件出現(xiàn)時，就只能全盤采用第一種方式，大大降低了效率。因此，需要一種新的解決方案，以提高通用性，能適應(yīng)更多的業(yè)務(wù)場景需要。

發(fā)明內(nèi)容

鑒于以上所述現(xiàn)有技術(shù)的缺點，本發(fā)明提供一種強擴展性的前端可視化界面生成方法、系統(tǒng)、介質(zhì)及終端，以解決上述技術(shù)問題。

本發(fā)明提供的強擴展性的前端可視化界面生成方法，包括：

預(yù)先建立標(biāo)準(zhǔn)組件庫，所述標(biāo)準(zhǔn)組件庫包括多種通用組件；

設(shè)置設(shè)計器，通過所述設(shè)計器從所述標(biāo)準(zhǔn)組件庫中選取組件并拖動添加到頁面組件樹的指定節(jié)點，并且對每一個目標(biāo)組件設(shè)置相關(guān)屬性；

將設(shè)計器中的組件樹映射為預(yù)設(shè)格式的描述文件；

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

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

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

可選的，對所述標(biāo)準(zhǔn)組件庫中的每個標(biāo)準(zhǔn)組件注入事件句柄，通過所述事件句柄與其他組件進行通信。

可選的，定義非標(biāo)組件的組件名和擴展插槽，組成標(biāo)準(zhǔn)組件外殼；

在所述標(biāo)準(zhǔn)組件外殼內(nèi)部注入事件句柄，并將其作為擴展插槽函數(shù)的參數(shù)注入，與其他組件進行通信；

擴展插槽函數(shù)產(chǎn)出并返回DOM節(jié)點；

在組件內(nèi)部將擴展插槽函數(shù)產(chǎn)出并返回的DOM節(jié)點掛載到標(biāo)準(zhǔn)組件外殼的根節(jié)點下，形成所述標(biāo)準(zhǔn)組件模板；

通過實例化所述標(biāo)準(zhǔn)組件模板，獲取標(biāo)準(zhǔn)組件。

可選的，通過所述擴展插槽函數(shù)實現(xiàn)非標(biāo)準(zhǔn)組件的特殊UI，所述事件句柄通過擴展插槽函數(shù)的輸入?yún)?shù)注入擴展插槽。

可選的，根據(jù)整體技術(shù)棧的不同，對預(yù)設(shè)格式的描述文件的組件樹進行遍歷，并將其解釋為對應(yīng)的技術(shù)棧下的組件代碼。

可選的，預(yù)先建立標(biāo)準(zhǔn)組件庫中每個組件的代碼塊和組件名之間的映射關(guān)系；

遍歷整個組件樹，當(dāng)每步進到一個組件節(jié)點時，通過組件名映射將對應(yīng)代碼塊安裝在該節(jié)點上；