基于微前端技術的電磁態勢前端低耦合架構研究

賀媛媛，何 歡，徐 晶，李武松

（中國電子科技集團公司第二十九研究所，四川 成都 610036）

0 引言

隨著信息化手段的提高和智能化技術的應用，目標偵察的手段不斷增多，雷達探測的范圍急劇擴展，戰場態勢信息呈爆發式增長［1］，傳統依賴功率比拼獲得制電磁權的作戰方式轉變為融合電抗、雷達、通信、制導等多種電磁手段的多維、全域電磁空間斗爭形式［2］，這對電磁態勢展示提出了更高的要求。如何管理、展示各維度作戰數據，協同顯示復雜作戰場景并快速響應各類用戶交互成為新的考驗［3］。

為滿足用戶快速作戰，實現跨平臺、多地熱啟動需求，B/S架構軟件成為了當前態勢系統的主流應用方案。但是，常見的電磁態勢生成框架主要關注態勢系統或者后端架構，例如JDL（Joint Directors of Labo?ratories）模型聚焦電磁態勢全系統［4］；戰場電磁態勢生成體系架構［5］定義了數據可視化展示業務要素和處理算法；臧維明等［6］研究了電磁態勢的大數據挖掘分析架構，曠生玉等［7］研究了電磁數據云霧端融合的體系架構。均缺少針對前端開發框架的技術指導與約束。常用的電磁態勢前端框架往往直接套用已有的Web前端架構，例如React、VUE或Angular等，這些不同技術棧開發的應用頁面之間存在天然的交互壁壘，跨技術棧、跨頁面通信困難，用戶體驗差。而且電磁態勢的多類具體業務需要頻繁地與底層GIS交互，業務模塊之間耦合度較深，導致各業務模塊很難獨立拆分，系統升級、維護難度較大。

針對上述前端架構現狀，本文首先分析了電磁態勢前端框架的典型需求，然后提出了基于qiankun微前端技術的復雜電磁態勢的前端低耦合應用架構，最后結合實際工程項目驗證了本文提出的前端低耦合應用框架的有效性，旨在為電磁態勢前端框架的研究提供參考。

1 典型需求分析

當前，電磁態勢前端框架在跨技術棧與跨頁面通信、多專業動態加載與實時交互以及并行開發與集成部署三個方面面臨巨大挑戰。

1） 跨技術棧與跨頁面通信

由于武器裝備系統的發展演進機制，當前存在大量跨技術棧、跨平臺開發的應用，而且此類應用往往需要跨頁面共享實時數據，因此只有高效地解決跨技術棧、跨頁面交互問題，才能在態勢顯示層向下兼容和復用已有系統。

2） 多專業動態加載與實時交互

電磁態勢需要可視化展示地理信息系統和各類專業業務，不同頁面間需要共享數據，實時刷新，如果在Web服務啟動期就同時加載各專業業務界面，將大大優化瀏覽器的性能，降低用戶的響應速度。因此急需解決各專業業務間的實時交互與動態加載問題，在態勢顯示層實現作戰態勢信息共享、作戰策略共建。

3） 并行開發與集成部署

電磁態勢需要接入多家單位的底層數據、服務和通信機制，如何建立并行開發機制，降低不同業務、計算資源庫和態勢底座的耦合程度，用統一的標準集成、打包、部署、維護態勢服務是影響電磁態勢整體研發效率和用戶使用體驗的關鍵。

2 微前端架構設計

針對上述三類挑戰，本文提出的電磁態勢前端低耦合應用框架如圖1所示，主要包含三大部分，分別為項目底座、計算資源公共庫和業務插件開發。電磁態勢前端低耦合應用框架將一個復雜Web應用拆分為多個獨立子應用，子應用間采用輕量級通信機制，可以獨立于其他子應用開發、測試和部署，所有子應用公用一個最小型的集中式項目底座［8］。項目底座無需載入整個計算資源公共庫和業務開發插件，只需要載入基礎公共組件、核心插件接入模塊和公共庫接入模塊。然后通過工具庫接入模塊以軟鏈接方式管理計算資源公共庫，實現項目與第三方庫的同步開發、迭代。通過核心插件接入模塊在編譯時遠程動態注入、管理各類業務插件。通過公共組件融合器統一管理公共組件樣式和自定義樣式，實現不同技術棧開發的服務界面風格統一。

圖1 電磁態勢微前端框架

2.1 項目底座設計

典型的電磁態勢包括地理信息系統、聲明式的菜單欄、頭部標題、基本用戶操作欄和消息提示等模塊，具體的項目底座設計框架如圖2所示。在項目啟動時首先動態讀取插件配置文件，判斷插件是啟動即加載還是延遲加載。針對啟動即加載的基本組件，采用模塊化管理、組合方式生成交互界面，并與自定義樣式融合處理，最終在界面以統一風格顯示。針對需要延遲加載的組件，包括核心業務組件和公共工具庫，利用核心插件接入模塊追蹤用戶操作，管理待加載業務插件的樣式、生命周期、通信調用關系并實時監聽用戶操作、監測狀態變化。利用工具庫接入模塊使用軟鏈接方式加載所需公共庫，允許調用處于開發階段的公共庫，實現了業務插件與第三方庫的并發編程。

圖2 項目底座設計框架

2.2 計算資源公共庫

項目底座通過工具庫接入模塊管理計算資源公共庫，計算資源公共庫根據用戶操作判斷是否需要更新公共庫。計算資源公共庫的設計框架如圖3所示，如果某公共庫已經加載進公共組件緩存池則可以直接調用，如未加載則需通過軟鏈接接口按需調用。軟鏈接接口使得業務插件與公共庫可以異步并行開發、更新，公共庫開發人員可以實時發布最新的庫，以便業務開發人員實時訪問。基于軟鏈接接口的公共庫加載和管理機制輕量化了體量龐大的公共庫和項目底座，提高了服務的加載與響應速度，提高了大型復雜項目的開發效率。

圖3 計算資源公共庫設計框架

2.3 業務插件開發

項目底座基于模塊自動分割技術實時監聽用戶請求，通過lazyImport延遲加載模塊實時加載被請求的業務插件，通過插件化編譯/解析器返回編譯解析好的待加載插件。業務插件的具體開發框架如圖4所示，針對不同技術棧，如React、Vue實現的業務界面，前端低耦合應用框架采用基于signal?spa的qiankun微前端技術實現跨技術棧交互，通過共享內存數據庫實現跨屏幕交互，利用基于webpack的打包部署技術實現插件分離與注入。基于插件分離與注入技術，支持開發人員對每個獨立的業務應用單獨打包、部署和測試［9］；支持在態勢系統運行時通過腳手架功能將業務插件代碼動態注入到框架底座，實現組件對框架的依賴倒轉；支持使用webpack?dev?server為打包生成的資源文件提供web服務，包括為靜態文件提供服務和自動刷新熱替換服務，使得前端代碼修改后webpack自動重新打包，瀏覽器立即響應代碼變化并自動刷新頁面，降低了業務插件的更新與部署壓力。

圖4 業務插件開發框架

3 工程應用

3.1 應用注冊

基于微前端技術的前端框架首先會創建一個配置文件以注冊各子應用的基本信息，如技術棧類型、唯一標識、服務地址、服務名稱、服務的物理地址、服務是否延遲加載、服務在主界面的顯示位置、大小等信息。然后在項目啟動和頁面刷新時主應用動態讀取該配置文件，通過裝飾器模式，自動裝飾接管需要加載的子應用的顯示樣式與主頁面。待子應用成功啟動后，子應用接管自己的生命周期；若子應用不能成功啟動，也不影響主應用的使用。該模式不僅解決了跨技術棧多插件按需加載問題，提高了主應用的響應速度，更實現了主應用項目底座與各子應用專業業務插件的解耦，提高了復雜系統的穩定性。

3.2 應用通信

微前端技術框架通過實現一個與框架無關的發布訂閱系統來支持不同技術棧、不同屏幕內應用之間的通信（包括主應用與子應用或者子應用之間的通信）。具體的微前端實時通信過程如圖5所示，實時通信模塊利用webSocket接口實時監聽、發布服務端至應用端的通信信息，各子應用模塊實時監聽webSocket轉發的服務端通信數據與用戶操作數據，判斷每一條數據的狀態信息需要跨技術棧發布還是跨屏幕發布。基于qiankun底層架構封裝的跨技術棧通信模塊選擇性注入跨技術棧發布消息，基于indexedDB的跨屏幕通信模塊通過操作瀏覽器自帶的lo?calStorage緩存選擇性注入跨屏幕發布消息，實現界面視圖與狀態數據的實時共享與一一對應。

圖5 業務通信過程

3.3 動態加載與部署

微前端技術框架基于Redux應用架構，按照用戶交互需求，采用插件延遲加載策略動態加載、更新子應用。lazyImport延遲加載模塊首先判斷組件的類型，然后判斷該組件是否已加載，若組件未加載，確認加載組件；若組件已加載，只需要更新組件的狀態數據，不需要重新加載組件。該方法保證了屏幕刷新和服務啟動時只需啟動輕量級的主服務，提高了瀏覽器的響應速度并成功保留了用戶的歷史操作數據，即使用戶切換界面也不會丟失該用戶的歷史操作信息。同時，本框架使用webpack構建應用，通過約定插件、配置等手段，讓每個應用在開發、構建、部署階段都不需要用戶再做改動，從而實現“零成本”接入。

4 效果驗證

基于qiankun微前端技術的前端低耦合應用框架在某電磁態勢演示驗證系統中進行了工程應用驗證，其工作過程如圖6所示。首先，應用啟動或者刷新時，主應用獲取配置文件。主應用在獲取到配置文件后，依次注冊需要顯示的子應用并為其綁定生命周期。主應用監聽用戶執行的交互操作，動態加載需要新顯示的子應用。主應用和子應用之間通過發布/訂閱機制通信，利用 dispatch（），on（），remove（）方法具體執行數據交互。然后主應用繼續監聽各用戶執行的操作以便更新、隱藏或者卸載子應用。

圖6 前端架構詳細工作過程圖

基于qiankun微前端技術的某電磁態勢演示驗證項目成果如圖7所示。經項目驗證，本文設計的基于qiankun微前端技術的前端低耦合應用框架支持獨立開發、獨立部署和獨立運行，在復用性、隔離性、改造成本等方面優勢突出。

圖7 項目效果圖

當前主流前端框架的優缺點對比表如表1所示，本文提出的qiankun微前端框架的優點突出，更加適合行業用戶使用。

表1 前端框架特點對比表

5 結束語

基于微前端技術的復雜電磁態勢前端低耦合應用框架解決了大型項目不同單位、不同開發平臺、多技術棧的并行開發問題和業務插件按需加載、實時通信的難點，實現了電磁態勢全域感知、實時展示要求。并且該框架讓平臺與業務插件解耦合，使得業務插件易遷移、可復用、易擴展，為后期項目的更新迭代及業務的擴充奠定了基礎。