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

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

0 引言

隨著信息化手段的提高和智能化技術(shù)的應(yīng)用，目標(biāo)偵察的手段不斷增多，雷達(dá)探測的范圍急劇擴(kuò)展，戰(zhàn)場態(tài)勢信息呈爆發(fā)式增長［1］，傳統(tǒng)依賴功率比拼獲得制電磁權(quán)的作戰(zhàn)方式轉(zhuǎn)變?yōu)槿诤想娍?、雷達(dá)、通信、制導(dǎo)等多種電磁手段的多維、全域電磁空間斗爭形式［2］，這對電磁態(tài)勢展示提出了更高的要求。如何管理、展示各維度作戰(zhàn)數(shù)據(jù)，協(xié)同顯示復(fù)雜作戰(zhàn)場景并快速響應(yīng)各類用戶交互成為新的考驗(yàn)［3］。

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

針對上述前端架構(gòu)現(xiàn)狀，本文首先分析了電磁態(tài)勢前端框架的典型需求，然后提出了基于qiankun微前端技術(shù)的復(fù)雜電磁態(tài)勢的前端低耦合應(yīng)用架構(gòu)，最后結(jié)合實(shí)際工程項(xiàng)目驗(yàn)證了本文提出的前端低耦合應(yīng)用框架的有效性，旨在為電磁態(tài)勢前端框架的研究提供參考。

1 典型需求分析

當(dāng)前，電磁態(tài)勢前端框架在跨技術(shù)棧與跨頁面通信、多專業(yè)動(dòng)態(tài)加載與實(shí)時(shí)交互以及并行開發(fā)與集成部署三個(gè)方面面臨巨大挑戰(zhàn)。

1） 跨技術(shù)棧與跨頁面通信

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

2） 多專業(yè)動(dòng)態(tài)加載與實(shí)時(shí)交互

電磁態(tài)勢需要可視化展示地理信息系統(tǒng)和各類專業(yè)業(yè)務(wù)，不同頁面間需要共享數(shù)據(jù)，實(shí)時(shí)刷新，如果在Web服務(wù)啟動(dòng)期就同時(shí)加載各專業(yè)業(yè)務(wù)界面，將大大優(yōu)化瀏覽器的性能，降低用戶的響應(yīng)速度。因此急需解決各專業(yè)業(yè)務(wù)間的實(shí)時(shí)交互與動(dòng)態(tài)加載問題，在態(tài)勢顯示層實(shí)現(xiàn)作戰(zhàn)態(tài)勢信息共享、作戰(zhàn)策略共建。

3） 并行開發(fā)與集成部署

電磁態(tài)勢需要接入多家單位的底層數(shù)據(jù)、服務(wù)和通信機(jī)制，如何建立并行開發(fā)機(jī)制，降低不同業(yè)務(wù)、計(jì)算資源庫和態(tài)勢底座的耦合程度，用統(tǒng)一的標(biāo)準(zhǔn)集成、打包、部署、維護(hù)態(tài)勢服務(wù)是影響電磁態(tài)勢整體研發(fā)效率和用戶使用體驗(yàn)的關(guān)鍵。

2 微前端架構(gòu)設(shè)計(jì)

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

圖1 電磁態(tài)勢微前端框架

2.1 項(xiàng)目底座設(shè)計(jì)

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

圖2 項(xiàng)目底座設(shè)計(jì)框架

2.2 計(jì)算資源公共庫

項(xiàng)目底座通過工具庫接入模塊管理計(jì)算資源公共庫，計(jì)算資源公共庫根據(jù)用戶操作判斷是否需要更新公共庫。計(jì)算資源公共庫的設(shè)計(jì)框架如圖3所示，如果某公共庫已經(jīng)加載進(jìn)公共組件緩存池則可以直接調(diào)用，如未加載則需通過軟鏈接接口按需調(diào)用。軟鏈接接口使得業(yè)務(wù)插件與公共庫可以異步并行開發(fā)、更新，公共庫開發(fā)人員可以實(shí)時(shí)發(fā)布最新的庫，以便業(yè)務(wù)開發(fā)人員實(shí)時(shí)訪問?；谲涙溄咏涌诘墓矌旒虞d和管理機(jī)制輕量化了體量龐大的公共庫和項(xiàng)目底座，提高了服務(wù)的加載與響應(yīng)速度，提高了大型復(fù)雜項(xiàng)目的開發(fā)效率。

圖3 計(jì)算資源公共庫設(shè)計(jì)框架

2.3 業(yè)務(wù)插件開發(fā)

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

圖4 業(yè)務(wù)插件開發(fā)框架

3 工程應(yīng)用

3.1 應(yīng)用注冊

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

3.2 應(yīng)用通信

微前端技術(shù)框架通過實(shí)現(xiàn)一個(gè)與框架無關(guān)的發(fā)布訂閱系統(tǒng)來支持不同技術(shù)棧、不同屏幕內(nèi)應(yīng)用之間的通信（包括主應(yīng)用與子應(yīng)用或者子應(yīng)用之間的通信）。具體的微前端實(shí)時(shí)通信過程如圖5所示，實(shí)時(shí)通信模塊利用webSocket接口實(shí)時(shí)監(jiān)聽、發(fā)布服務(wù)端至應(yīng)用端的通信信息，各子應(yīng)用模塊實(shí)時(shí)監(jiān)聽webSocket轉(zhuǎn)發(fā)的服務(wù)端通信數(shù)據(jù)與用戶操作數(shù)據(jù)，判斷每一條數(shù)據(jù)的狀態(tài)信息需要跨技術(shù)棧發(fā)布還是跨屏幕發(fā)布?；趒iankun底層架構(gòu)封裝的跨技術(shù)棧通信模塊選擇性注入跨技術(shù)棧發(fā)布消息，基于indexedDB的跨屏幕通信模塊通過操作瀏覽器自帶的lo?calStorage緩存選擇性注入跨屏幕發(fā)布消息，實(shí)現(xiàn)界面視圖與狀態(tài)數(shù)據(jù)的實(shí)時(shí)共享與一一對應(yīng)。

圖5 業(yè)務(wù)通信過程

3.3 動(dòng)態(tài)加載與部署

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

4 效果驗(yàn)證

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

圖6 前端架構(gòu)詳細(xì)工作過程圖

基于qiankun微前端技術(shù)的某電磁態(tài)勢演示驗(yàn)證項(xiàng)目成果如圖7所示。經(jīng)項(xiàng)目驗(yàn)證，本文設(shè)計(jì)的基于qiankun微前端技術(shù)的前端低耦合應(yīng)用框架支持獨(dú)立開發(fā)、獨(dú)立部署和獨(dú)立運(yùn)行，在復(fù)用性、隔離性、改造成本等方面優(yōu)勢突出。

圖7 項(xiàng)目效果圖

當(dāng)前主流前端框架的優(yōu)缺點(diǎn)對比表如表1所示，本文提出的qiankun微前端框架的優(yōu)點(diǎn)突出，更加適合行業(yè)用戶使用。

表1 前端框架特點(diǎn)對比表

5 結(jié)束語

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