[發(fā)明專利]基于JS入口的前端運(yùn)行時(shí)遠(yuǎn)程組件共享機(jī)制的方法

在審

• 申請?zhí)枺?/td>: 202011594579.0
• 申請日: 2020-12-29
• 公開（公告）號: CN113064676A
• 公開（公告）日: 2021-07-02
• 發(fā)明（設(shè)計(jì)）人: 周韜;程海濤;趙義健
• 申請（專利權(quán)）人: 上海金融期貨信息技術(shù)有限公司
• 主分類號: G06F9/448
• 分類號: G06F9/448
• 代理公司: 上海專利商標(biāo)事務(wù)所有限公司 31100
• 代理人: 施浩

本發(fā)明公開了一種基于JS入口的前端運(yùn)行時(shí)遠(yuǎn)程組件共享機(jī)制的方法，使得前端應(yīng)用中的各個(gè)子應(yīng)用能夠獨(dú)立開發(fā)、獨(dú)立部署、獨(dú)立運(yùn)行，在整個(gè)生命周期內(nèi)保持松耦合關(guān)系。其技術(shù)方案為：首先通過構(gòu)造JS立即執(zhí)行函數(shù)方式，將依賴模塊作為函數(shù)參數(shù)的方式來達(dá)到依賴模塊隔離，避免在主應(yīng)用中，各個(gè)子應(yīng)用的依賴互相影響。其次，本發(fā)明通CSS的AST方式，為每個(gè)CSS選擇器添加命名空間，達(dá)到各個(gè)子應(yīng)用的樣式獨(dú)立，不會沖突。本發(fā)明在運(yùn)行時(shí)生成DIV標(biāo)簽，并將DIV ID通知到子應(yīng)用，子應(yīng)用獲取ID后執(zhí)行渲染邏輯，將子應(yīng)用頁面掛載到對應(yīng)DIV中，達(dá)到在一個(gè)頁面中掛載多個(gè)相同子應(yīng)用實(shí)例并保持獨(dú)立的功能。

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

本發(fā)明涉及前端應(yīng)用業(yè)務(wù)開發(fā)技術(shù)，具體涉及基于JS入口實(shí)現(xiàn)的，將每一項(xiàng)業(yè)務(wù)作為一個(gè)子應(yīng)用，通過前端運(yùn)行時(shí)遠(yuǎn)程作為一個(gè)組件加載到主應(yīng)用的技術(shù)。

背景技術(shù)

隨著一個(gè)前端應(yīng)用中承接的業(yè)務(wù)也越來越多，應(yīng)用越來越復(fù)雜，并且不同業(yè)務(wù)涉及到不同團(tuán)隊(duì)，其技術(shù)和管理成本都是巨大的，這些往往會導(dǎo)致一個(gè)大型的系統(tǒng)會被拆分細(xì)化。但是分拆對于使用這些業(yè)務(wù)系統(tǒng)的用戶來說，例如在金融領(lǐng)域內(nèi)，業(yè)務(wù)人員會使用會員管理，套保套利，做市商，投資者教育培訓(xùn)等等業(yè)務(wù)，系統(tǒng)分拆后辦理業(yè)務(wù)需要在各個(gè)網(wǎng)站之間來回切換，使用體驗(yàn)下降。用戶對一個(gè)統(tǒng)一而友好的集成式網(wǎng)站的需求及其迫切，而一個(gè)個(gè)業(yè)務(wù)前端的集成涉及到各個(gè)業(yè)務(wù)團(tuán)隊(duì)的溝通配合，架構(gòu)調(diào)整優(yōu)化等工作。

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

以下給出一個(gè)或多個(gè)方面的簡要概述以提供對這些方面的基本理解。此概述不是所有構(gòu)想到的方面的詳盡綜覽，并且既非旨在指認(rèn)出所有方面的關(guān)鍵性或決定性要素亦非試圖界定任何或所有方面的范圍。其唯一的目的是要以簡化形式給出一個(gè)或多個(gè)方面的一些概念以為稍后給出的更加詳細(xì)的描述之序。

本發(fā)明的目的在于解決上述問題，提供了一種基于JS入口的前端運(yùn)行時(shí)遠(yuǎn)程組件共享機(jī)制的方法，使得前端應(yīng)用中的各個(gè)子應(yīng)用能夠獨(dú)立開發(fā)、獨(dú)立部署、獨(dú)立運(yùn)行，在整個(gè)生命周期內(nèi)保持松耦合關(guān)系。

本發(fā)明的技術(shù)方案為：本發(fā)明揭示了一種基于JS入口的前端運(yùn)行時(shí)遠(yuǎn)程組件共享機(jī)制的方法，方法包括構(gòu)建階段的處理和運(yùn)行階段的處理，其中：

構(gòu)建階段的處理包括各子應(yīng)用在構(gòu)建階段生成自身的描述文件和入口文件，入口文件包括JS入口文件和CSS入口文件，將前端應(yīng)用中的HTML元素編譯為JS代碼混入JS資源，將前端應(yīng)用中的CSS資源通過CSS入口文件加載；

運(yùn)行階段的處理流程包括：

步驟1：啟動主應(yīng)用和子應(yīng)用，主應(yīng)用生成一個(gè)全局的EventBus實(shí)例；

步驟2：主應(yīng)用加載子應(yīng)用的描述文件，獲取子應(yīng)用名稱、資源地址、路由信息數(shù)據(jù)；

步驟3：主應(yīng)用啟動加載模塊，其中包括：主應(yīng)用動態(tài)生成一個(gè)DIV標(biāo)簽，主應(yīng)用加載并執(zhí)行子應(yīng)用的JS入口文件和CSS入口文件，子應(yīng)用JS執(zhí)行時(shí)，檢查是否存在全局的EventBus實(shí)例，若存在則使用該EventBus實(shí)例，若不存在則主動生成EventBus實(shí)例并作為全局EventBus實(shí)例，主應(yīng)用通過初始化事件將DIV標(biāo)簽的標(biāo)識號通過事件的方式通知給子應(yīng)用，其中不同的子應(yīng)用監(jiān)聽的事件名稱不同；

步驟4：子應(yīng)用監(jiān)聽初始化事件，收到主應(yīng)用發(fā)送的ID的通知后執(zhí)行渲染邏輯，將JS中的HTML掛載到該ID對應(yīng)的DIV標(biāo)簽中，以使在一個(gè)頁面中掛載多個(gè)相同子應(yīng)用實(shí)例并保持獨(dú)立。

根據(jù)本發(fā)明的基于JS入口的前端運(yùn)行時(shí)遠(yuǎn)程組件共享機(jī)制的方法的一實(shí)施例，描述文件用于供主應(yīng)用在運(yùn)行階段訪問各子應(yīng)用的描述文件，通過識別描述文件信息，獲取各子應(yīng)用的入口文件的地址，其中描述文件包含子應(yīng)用的版本號、子應(yīng)用名稱、資源地址、路由信息在內(nèi)的數(shù)據(jù)。

根據(jù)本發(fā)明的基于JS入口的前端運(yùn)行時(shí)遠(yuǎn)程組件共享機(jī)制的方法的一實(shí)施例，入口文件用于當(dāng)主應(yīng)用加載子應(yīng)用時(shí)，加載子應(yīng)用的入口文件并執(zhí)行入口文件，將子應(yīng)用掛載到主應(yīng)用的指定區(qū)域。