《基于微前端技术的电磁态势前端低耦合架构研究》由会员分享，可在线阅读，更多相关《基于微前端技术的电磁态势前端低耦合架构研究（8页珍藏版）》请在金锄头文库上搜索。
1、 基于微前端技术的电磁态势前端低耦合架构研究 贺媛媛，何 欢，徐 晶，李武松（中国电子科技集团公司第二十九研究所，四川 成都 610036）0 引言随着信息化手段的提高和智能化技术的应用，目标侦察的手段不断增多，雷达探测的范围急剧扩展，战场态势信息呈爆发式增长1，传统依赖功率比拼获得制电磁权的作战方式转变为融合电抗、雷达、通信、制导等多种电磁手段的多维、全域电磁空间斗争形式2，这对电磁态势展示提出了更高的要求。如何管理、展示各维度作战数据，协同显示复杂作战场景并快速响应各类用户交互成为新的考验3。为满足用户快速作战，实现跨平台、多地热启动需求，B/S架构软件成为了当前态势系统的主流应用方案。但
2、是，常见的电磁态势生成框架主要关注态势系统或者后端架构，例如JDL（Joint Directors of Laboratories）模型聚焦电磁态势全系统4；战场电磁态势生成体系架构5定义了数据可视化展示业务要素和处理算法；臧维明等6研究了电磁态势的大数据挖掘分析架构，旷生玉等7研究了电磁数据云雾端融合的体系架构。均缺少针对前端开发框架的技术指导与约束。常用的电磁态势前端框架往往直接套用已有的Web前端架构，例如React、VUE或Angular等，这些不同技术栈开发的应用页面之间存在天然的交互壁垒，跨技术栈、跨页面通信困难，用户体验差。而且电磁态势的多类具体业务需要频繁地与底层GIS交互，业
3、务模块之间耦合度较深，导致各业务模块很难独立拆分，系统升级、维护难度较大。针对上述前端架构现状，本文首先分析了电磁态势前端框架的典型需求，然后提出了基于qiankun微前端技术的复杂电磁态势的前端低耦合应用架构，最后结合实际工程项目验证了本文提出的前端低耦合应用框架的有效性，旨在为电磁态势前端框架的研究提供参考。1 典型需求分析当前，电磁态势前端框架在跨技术栈与跨页面通信、多专业动态加载与实时交互以及并行开发与集成部署三个方面面临巨大挑战。1） 跨技术栈与跨页面通信由于武器装备系统的发展演进机制，当前存在大量跨技术栈、跨平台开发的应用，而且此类应用往往需要跨页面共享实时数据，因此只有高效地解决
4、跨技术栈、跨页面交互问题，才能在态势显示层向下兼容和复用已有系统。2） 多专业动态加载与实时交互电磁态势需要可视化展示地理信息系统和各类专业业务，不同页面间需要共享数据，实时刷新，如果在Web服务启动期就同时加载各专业业务界面，将大大优化浏览器的性能，降低用户的响应速度。因此急需解决各专业业务间的实时交互与动态加载问题，在态势显示层实现作战态势信息共享、作战策略共建。3） 并行开发与集成部署电磁态势需要接入多家单位的底层数据、服务和通信机制，如何建立并行开发机制，降低不同业务、计算资源库和态势底座的耦合程度，用统一的标准集成、打包、部署、维护态势服务是影响电磁态势整体研发效率和用户使用体验的关
5、键。2 微前端架构设计针对上述三类挑战，本文提出的电磁态势前端低耦合应用框架如图1所示，主要包含三大部分，分别为项目底座、计算资源公共库和业务插件开发。电磁态势前端低耦合应用框架将一个复杂Web应用拆分为多个独立子应用，子应用间采用轻量级通信机制，可以独立于其他子应用开发、测试和部署，所有子应用公用一个最小型的集中式项目底座8。项目底座无需载入整个计算资源公共库和业务开发插件，只需要载入基础公共组件、核心插件接入模块和公共库接入模块。然后通过工具库接入模块以软链接方式管理计算资源公共库，实现项目与第三方库的同步开发、迭代。通过核心插件接入模块在编译时远程动态注入、管理各类业务插件。通过公共组件
6、融合器统一管理公共组件样式和自定义样式，实现不同技术栈开发的服务界面风格统一。图1 电磁态势微前端框架2.1 项目底座设计典型的电磁态势包括地理信息系统、声明式的菜单栏、头部标题、基本用户操作栏和消息提示等模块，具体的项目底座设计框架如图2所示。在项目启动时首先动态读取插件配置文件，判断插件是启动即加载还是延迟加载。针对启动即加载的基本组件，采用模块化管理、组合方式生成交互界面，并与自定义样式融合处理，最终在界面以统一风格显示。针对需要延迟加载的组件，包括核心业务组件和公共工具库，利用核心插件接入模块追踪用户操作，管理待加载业务插件的样式、生命周期、通信调用关系并实时监听用户操作、监测状态变化
7、。利用工具库接入模块使用软链接方式加载所需公共库，允许调用处于开发阶段的公共库，实现了业务插件与第三方库的并发编程。图2 项目底座设计框架2.2 计算资源公共库项目底座通过工具库接入模块管理计算资源公共库，计算资源公共库根据用户操作判断是否需要更新公共库。计算资源公共库的设计框架如图3所示，如果某公共库已经加载进公共组件缓存池则可以直接调用，如未加载则需通过软链接接口按需调用。软链接接口使得业务插件与公共库可以异步并行开发、更新，公共库开发人员可以实时发布最新的库，以便业务开发人员实时访问。基于软链接接口的公共库加载和管理机制轻量化了体量庞大的公共库和项目底座，提高了服务的加载与响应速度，提高
8、了大型复杂项目的开发效率。图3 计算资源公共库设计框架2.3 业务插件开发项目底座基于模块自动分割技术实时监听用户请求，通过lazyImport延迟加载模块实时加载被请求的业务插件，通过插件化编译/解析器返回编译解析好的待加载插件。业务插件的具体开发框架如图4所示，针对不同技术栈，如React、Vue实现的业务界面，前端低耦合应用框架采用基于signalspa的qiankun微前端技术实现跨技术栈交互，通过共享内存数据库实现跨屏幕交互，利用基于webpack的打包部署技术实现插件分离与注入。基于插件分离与注入技术，支持开发人员对每个独立的业务应用单独打包、部署和测试9；支持在态势系统运行时通过
9、脚手架功能将业务插件代码动态注入到框架底座，实现组件对框架的依赖倒转；支持使用webpackdevserver为打包生成的资源文件提供web服务，包括为静态文件提供服务和自动刷新热替换服务，使得前端代码修改后webpack自动重新打包，浏览器立即响应代码变化并自动刷新页面，降低了业务插件的更新与部署压力。图4 业务插件开发框架3 工程应用3.1 应用注册基于微前端技术的前端框架首先会创建一个配置文件以注册各子应用的基本信息，如技术栈类型、唯一标识、服务地址、服务名称、服务的物理地址、服务是否延迟加载、服务在主界面的显示位置、大小等信息。然后在项目启动和页面刷新时主应用动态读取该配置文件，通过装
10、饰器模式，自动装饰接管需要加载的子应用的显示样式与主页面。待子应用成功启动后，子应用接管自己的生命周期；若子应用不能成功启动，也不影响主应用的使用。该模式不仅解决了跨技术栈多插件按需加载问题，提高了主应用的响应速度，更实现了主应用项目底座与各子应用专业业务插件的解耦，提高了复杂系统的稳定性。3.2 应用通信微前端技术框架通过实现一个与框架无关的发布订阅系统来支持不同技术栈、不同屏幕内应用之间的通信（包括主应用与子应用或者子应用之间的通信）。具体的微前端实时通信过程如图5所示，实时通信模块利用webSocket接口实时监听、发布服务端至应用端的通信信息，各子应用模块实时监听webSocket转发
11、的服务端通信数据与用户操作数据，判断每一条数据的状态信息需要跨技术栈发布还是跨屏幕发布。基于qiankun底层架构封装的跨技术栈通信模块选择性注入跨技术栈发布消息，基于indexedDB的跨屏幕通信模块通过操作浏览器自带的localStorage缓存选择性注入跨屏幕发布消息，实现界面视图与状态数据的实时共享与一一对应。图5 业务通信过程3.3 动态加载与部署微前端技术框架基于Redux应用架构，按照用户交互需求，采用插件延迟加载策略动态加载、更新子应用。lazyImport延迟加载模块首先判断组件的类型，然后判断该组件是否已加载，若组件未加载，确认加载组件；若组件已加载，只需要更新组件的状态数
12、据，不需要重新加载组件。该方法保证了屏幕刷新和服务启动时只需启动轻量级的主服务，提高了浏览器的响应速度并成功保留了用户的历史操作数据，即使用户切换界面也不会丢失该用户的历史操作信息。同时，本框架使用webpack构建应用，通过约定插件、配置等手段，让每个应用在开发、构建、部署阶段都不需要用户再做改动，从而实现“零成本”接入。4 效果验证基于qiankun微前端技术的前端低耦合应用框架在某电磁态势演示验证系统中进行了工程应用验证，其工作过程如图6所示。首先，应用启动或者刷新时，主应用获取配置文件。主应用在获取到配置文件后，依次注册需要显示的子应用并为其绑定生命周期。主应用监听用户执行的交互操作，
13、动态加载需要新显示的子应用。主应用和子应用之间通过发布/订阅机制通信，利用 dispatch（），on（），remove（）方法具体执行数据交互。然后主应用继续监听各用户执行的操作以便更新、隐藏或者卸载子应用。图6 前端架构详细工作过程图基于qiankun微前端技术的某电磁态势演示验证项目成果如图7所示。经项目验证，本文设计的基于qiankun微前端技术的前端低耦合应用框架支持独立开发、独立部署和独立运行，在复用性、隔离性、改造成本等方面优势突出。图7 项目效果图当前主流前端框架的优缺点对比表如表1所示，本文提出的qiankun微前端框架的优点突出，更加适合行业用户使用。表1 前端框架特点对比表5 结束语基于微前端技术的复杂电磁态势前端低耦合应用框架解决了大型项目不同单位、不同开发平台、多技术栈的并行开发问题和业务插件按需加载、实时通信的难点，实现了电磁态势全域感知、实时展示要求。并且该框架让平台与业务插件解耦合，使得业务插件易迁移、可复用、易扩展，为后期项目的更新迭代及业务的扩充奠定了基础。 -全文完-
