聚数整体架构图
2022-04-10 18:22:15 0 举报前端架构
作者其他创作
大纲/内容
快速访问
update
微应用microServiceStore(插件)
nodejs服务调用wechat-robot
触发
基座
注册子系统，启动qiankun
子项目视图更新
触发data改变，数据绑定视图改变
父子事件发布订阅
有无依赖系统
删除事件
resourceStore
$microServiceStore.$emit去发布对应事件
微应用（子）
vue响应式包装，内部维护一份_state
生命周期里接收props，存为state
接入插件
子系统公共逻辑
qiankun
基座microServiceStore(插件)
根据错误分类生成告警message
发生错误
用户初次访问
获取对应系统配置
fetch
setGlobalState，传入passState
用户访问唯一入口
接入插件，传入state
加载应用
对应组件接收到事件，触发data改变逻辑
打包
Nacos系统配置中心
子系统B
主工程-基座应用（父）
将_state对应systemState里的key改为value
全局注入$microServiceStore对象
获取passState里的eventInfo对象
拉取资源
有
用户hover导航栏
获取系统注册信息
通过bus或者其他全局事件触发对应更新事件
nacos配置中心
Micro App
监听onGlobalStateChange
$microServiceStore.$off
分类：接口错误，js执行错误，静态资源加载错误，vue执行错误。 message内容：错误分类，触发用户，对应页面地址，对应api，具体时间，对应负责人
企业微信告警群
用户访问B
子系统C
子系统...
获取passState里的state对象，同步到内部响应式_state
触发setGloablState
匹配事件
取出state，拆分出需要的data
错误告警插件
微前端插件
绑定$microServiceStore的响应式state到视图
事件错误捕获
存储事件
$microServiceStore.$on
_subscribers
window.addEventListerner('error')vue.config.errorHandlerunhandledrejectionXMLHttpRequest.prototype.send劫持
整合_state作为一个state属性到一个passState中，passState的eventType置为'state'关键字
提供props
解绑
Nacos资源静态资源中心
子系统D
假设为B，传入B
........
事件函数
将data合并到qiankun父子约定的state
commonScript
子系统注册模块
对应系统信息
父子响应式数据共享
静态资源列表
登录页
传入系统A
订阅
接入
主工程-基座应用
资源预加载
jdp-update-nacos脚本
整合eventInfo到passState中，passState的eventType置为'event'关键字
公共逻辑如登陆，告警等等
接入插件，传入系统标识，qiankun的props
子系统A
全局注入$microServiceStore对象，提供$on，$emit，$off
全局注入$microServiceStore对象，提供$on，$emit，$off方法
某子系统A
接入插件，传入系统标识
微应用
未登陆
prefetch方法（参数为系统标识）
0 条评论
下一页
