[發(fā)明專利]實(shí)現(xiàn)業(yè)務(wù)編排的前端組件快速處理方法、系統(tǒng)及計算機(jī)存儲介質(zhì)

在審

• 申請?zhí)枺?/td>: 202110647868.0
• 申請日: 2021-06-10
• 公開（公告）號: CN113504898A
• 公開（公告）日: 2021-10-15
• 發(fā)明（設(shè)計）人: 陳波;楊成穎;李成;孫遷
• 申請（專利權(quán)）人: 深圳市云網(wǎng)萬店科技有限公司
• 主分類號: G06F8/30
• 分類號: G06F8/30;G06F8/38;G06F16/958
• 代理公司: 北京市萬慧達(dá)律師事務(wù)所 11111
• 代理人: 黃玉東

本發(fā)明屬于軟件技術(shù)開發(fā)領(lǐng)域，公開了一種實(shí)現(xiàn)業(yè)務(wù)編排的前端組件快速處理方法和系統(tǒng)，該方法包括：在前端框架內(nèi)部注入數(shù)據(jù)模型引擎，所述數(shù)據(jù)模型引擎與前端框架進(jìn)行了侵入式的代碼綁定，并通過原生JavaScript語法直接訪問前端框架內(nèi)部，獲取頁面的組件實(shí)例并對組件進(jìn)行操作。本發(fā)明解決了原有的前端框架在組件代碼變動需要重新進(jìn)行編譯帶來的性能消耗和時間周期較長的問題，能夠方便快捷的通過動態(tài)替換腳本代碼實(shí)現(xiàn)在線調(diào)試，且免編譯，并可跨框架使用。

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

本發(fā)明屬于軟件技術(shù)開發(fā)領(lǐng)域，尤其是涉及一種實(shí)現(xiàn)業(yè)務(wù)編排的前端組件快速處理方法和系統(tǒng)。

背景技術(shù)

在當(dāng)今時代，三代框架react、vue、angular的出現(xiàn)讓前端迎來了數(shù)據(jù)驅(qū)動的熱潮，同時也火爆了webpack等相關(guān)前端編譯工具，每一次的代碼變動都需要經(jīng)過編譯，讓前端進(jìn)入了一個新的體驗(yàn)，但當(dāng)項(xiàng)目不斷變大的時候，編譯帶來的性能消耗和等待時間也是不斷變大的，有一些中小型項(xiàng)目大都數(shù)據(jù)層面是類似的，而隨著低代碼化(搭積木方式生成項(xiàng)目)的推進(jìn)，除了UI組件層面的復(fù)用，還有一些需要對UI組件之間以及和服務(wù)端之間的業(yè)務(wù)進(jìn)行編排的工作，這時候就需要一個中介來處理UI組件之間的聯(lián)動，也就是組件到組件之間的數(shù)據(jù)傳輸，再者需要和服務(wù)端聯(lián)動，以及如何從服務(wù)端獲取、轉(zhuǎn)換、傳遞給UI組件。

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

針對現(xiàn)有技術(shù)中存在的上述缺陷，本發(fā)明的目的是，提供一種實(shí)現(xiàn)業(yè)務(wù)編排的前端組件快速處理方法和系統(tǒng)，以解決原有的前端框架在組件代碼變動需要重新進(jìn)行編譯帶來的性能消耗和時間周期較長的問題。

本發(fā)明的第一方面，提供了一種實(shí)現(xiàn)業(yè)務(wù)編排的前端組件快速處理方法，其包括：在前端框架內(nèi)部注入數(shù)據(jù)模型引擎，所述數(shù)據(jù)模型引擎與前端框架進(jìn)行了侵入式的代碼綁定，并通過原生JavaScript語法直接訪問前端框架內(nèi)部，獲取頁面的組件實(shí)例并對組件進(jìn)行操作。

進(jìn)一步地，對所述組件的操作包括如下中的一種或幾種：

修改組件實(shí)例數(shù)據(jù)或內(nèi)容；

監(jiān)聽各組件內(nèi)部事件以管理組件之間的數(shù)據(jù)通信；

從服務(wù)端獲取遠(yuǎn)程數(shù)據(jù)，對頁面進(jìn)行組件渲染；

對頁面中各組件進(jìn)行排列渲染；

動態(tài)替換腳本代碼實(shí)現(xiàn)在線調(diào)試。

進(jìn)一步地，獲取頁面的組件實(shí)例包括：將頁面的各渲染組件按照編號、類型、名稱進(jìn)行統(tǒng)計歸類，一個頁面形成一個options配置數(shù)組，通過所述配置數(shù)組中的編號、類型或名稱，以選擇對應(yīng)的組件及組件實(shí)例。

進(jìn)一步地，管理組件之間的數(shù)據(jù)通信包括：監(jiān)聽各組件內(nèi)部數(shù)據(jù)是否發(fā)生變化，在某組件內(nèi)部發(fā)出消息事件時，傳遞給所述數(shù)據(jù)模型引擎，所述數(shù)據(jù)模型引擎接收某組件內(nèi)部發(fā)出事件并觸發(fā)其它關(guān)聯(lián)組件實(shí)例的數(shù)據(jù)更新，其它關(guān)聯(lián)組件對更新的組件實(shí)例添加事件接受方法，完成消息事件的更新。

進(jìn)一步地，所述組件的排列包括：組件的創(chuàng)建、刪除、前后排序。

進(jìn)一步地，從服務(wù)端獲取遠(yuǎn)程數(shù)據(jù)，對頁面進(jìn)行組件渲染的過程包括：通過數(shù)據(jù)模型引擎?zhèn)鬟f請求參數(shù)，選取對應(yīng)的組件實(shí)例，將接口數(shù)據(jù)直接賦值給組件實(shí)例內(nèi)的字段，實(shí)現(xiàn)頁面組件的渲染。

進(jìn)一步地，所述的前端頁面框架包括react、vue、angular。

本發(fā)明的另一方面，提供了一種前端組件動態(tài)擴(kuò)展的系統(tǒng)，該系統(tǒng)包括：數(shù)據(jù)模型引擎，所述數(shù)據(jù)模型引擎提前注入在前端框架內(nèi)部并與前端框架內(nèi)部的代碼進(jìn)行了侵入式的綁定，通過原生JavaScript語法直接訪問前端框架內(nèi)部，獲取頁面的組件實(shí)例并對組件進(jìn)行操作。

進(jìn)一步地，所述數(shù)據(jù)模型引擎包括：組件選擇器、事件管理器和數(shù)據(jù)請求庫，其中，所述組件選擇器用于根據(jù)組件的數(shù)據(jù)格式快速獲取組件實(shí)例，所述事件管理器用于監(jiān)聽管理頁面中各組件間的數(shù)據(jù)通信，所述數(shù)據(jù)請求庫用于和服務(wù)的進(jìn)行數(shù)據(jù)交互。