[發(fā)明專利]基于JS入口的前端運行時遠程組件共享機制的方法

在審

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

1.一種基于JS入口的前端運行時遠程組件共享機制的方法，其特征在于，方法包括構建階段的處理和運行階段的處理，其中：

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

運行階段的處理流程包括：

步驟1：啟動主應用和子應用，主應用生成一個全局的EventBus實例；

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

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

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

2.根據權利要求1所述的基于JS入口的前端運行時遠程組件共享機制的方法，其特征在于，描述文件用于供主應用在運行階段訪問各子應用的描述文件，通過識別描述文件信息，獲取各子應用的入口文件的地址，其中描述文件包含子應用的版本號、子應用名稱、資源地址、路由信息在內的數據。

3.根據權利要求1所述的基于JS入口的前端運行時遠程組件共享機制的方法，其特征在于，入口文件用于當主應用加載子應用時，加載子應用的入口文件并執(zhí)行入口文件，將子應用掛載到主應用的指定區(qū)域。

4.根據權利要求1所述的基于JS入口的前端運行時遠程組件共享機制的方法，其特征在于，在構建階段通過webpack打包工具將子應用打包成靜態(tài)資源，生成JS入口文件、CSS入口文件、描述文件，完成上線部署。

5.根據權利要求1所述的基于JS入口的前端運行時遠程組件共享機制的方法，其特征在于，在構建階段的生成入口文件的處理中，通過使用JS立即執(zhí)行函數的方式對JS代碼進行封裝，將子應用的依賴模塊作為JS立即執(zhí)行函數的參數，生成JS入口文件，以使不同的子應用的JS只能訪問該子應用的依賴模塊，避免在主應用中的各個子應用的依賴互相影響。

6.根據權利要求1所述的基于JS入口的前端運行時遠程組件共享機制的方法，其特征在于，在構建階段的生成入口文件的處理中，對子應用的CSS文件進行AST解析，將子應用的名稱添加到CSS選擇器中，生成新的AST，最終將AST轉成CSS入口文件。

7.根據權利要求1所述的基于JS入口的前端運行時遠程組件共享機制的方法，其特征在于，DIV標簽的標識號是隨機數。

8.根據權利要求1所述的基于JS入口的前端運行時遠程組件共享機制的方法，其特征在于，方法還包括：

步驟5：當主應用頁面切換導致子應用不再需要時，主應用啟動卸載子應用流程：一方面，主應用通過事件通知子應用執(zhí)行卸載，然后子應用收到主應用發(fā)出的卸載事件通知后，處理自己的卸載邏輯，完成卸載；另一方面，主應用主動移除子應用CSS資源。