微前端解析
2024-07-13 15:25:36 14 举报AI智能生成
分布式 微服务 前端
作者其他创作
大纲/内容
根系统
路由管理
注册子系统
注册子系统路由
路由加载（子系统）
无缝刷新（得提前缓存）
去缓存（新发版本能在线同步）
在线切换路由
容错
子系统、子路由的移除或异常不影响外界
实现方法
single-spa+systemJS
Iframe+反向代理（nginx）
监听URL手动修改子窗口路由
Web Components
组件化子系统
消息通讯
消息收发
单向
双向
转发
实现方法
路由传参-url地址的query参数
数据存储（单向，按需自提）-localStorage、sessionStorage
多窗口消息监听和发送（window.postMessage）
vuex、redux--使用局限性较高，适用数据复用、通信
rxjs
子系统管理
同步皮肤
共享数据
用户信息
权限信息
后端数据字典
多语言
缓存清理
功能页
导航菜单
登录页
设置页
子系统
消息通讯
发消息
其他子系统
根系统
响应
触发事件
触发路由
模块级公共代码
公共类库
公共组件
公共接口
样式隔离
规范命名
vue类名前缀
全局变量隔离
子系统不能定义window变量
规范
系统名/模块名/页面名、CSS类名、事件名、本地存储、Cookies命名规则
能标识出根系统、系统级公共代码、子系统之间兼容性的版本号命名规则
子系统领域划分
按导航菜单（业务）
按集中的发包情况（变更频率）
按权限组（组织结构）
跟后端一致
实现方式
1. 使用http服务器（nginx反向代理）重定向路由
2. 使用iframe嵌套以及自定义的消息通信（陈旧技术）
3. 使用纯web components 构建应用（适合新的项目）
4. 使用single-spa的方式来实现
5. 使用single-spa结合web components的结合方式（待定）
系统级公共代码（多版本）
公共组件
公共类库
http请求代理类
公共接口
工具类
Mixins
公共样式
公共资源
图片
字体
图标
公共配置
前端数据字典
表单正则
请求配置（域名、状态码）
版本化
仅对改动的一类型文件设置版本合并打包发布
修改整个项目版本，打包后的各文件名固定
开发部署
打包
异步加载
离线应用
共享代码
实现方法
SystemJS
git
一个项目文件夹下多个独立git仓库
已发布版有对应版本标签标识
本地开发
本地开发能与线上版本联调
一键安装所有系统package包
一键运行所有系统
各子系统能链接独立git仓库的公共代码
配置化
请求路径配置
各系统访问地址配置
期望
1. 子系统可以独立打包部署
2. 减少单个项目的协作人员的代码冲突
3. 优化打包速度
前提
1. 工程项目过大
2. 打包速度过慢
3. 团队协作人员多，代码冲突多
4. 每次发版都是全量发布，影响用户
5. 技术栈单一，不能使用多中技术栈（待定）
qiankunDemo任务拆分
技术选型
平台
single-spa
qiankun
qiankunTestByWu
coexisting-vue-microfrontends-master
飞冰
初始化各个git仓库
抽出系统级公共代码
假链接导入其他项目
开发根系统
按需引入第三方包
按需引入公共代码库和静态资源
CDN
npm
用single-spa启动Vue
迁入登陆页、导航页、左侧菜单页
消息通讯类
开发2个子系统demo
新增两个菜单
消息提示和弹窗支持遮罩住整个页面
支持子系统触发跳转到其他子系统
支持子系统切换缓存
消息通讯类
实现各子系统消息通讯和跳页demo
打包部署demo
运维服务器配置
实现自动群发
实现去缓存更新
支持子系统备份回滚和全系统备份回滚
webpack优化
一件启动所有项目
支持本地开发与线上版本联调
打包去除重复文件
制定开发方式和规范
并入所有子系统及其页面
发布到dev、test
待处理问题
1. 子系统切换后的缓存处理
qiankunDemo问题清单
系统载入
时间太久--2s
留白停留时间过长（上述时间）
添加过度动画
左侧菜单迁到跟子系统上，无数据时保留高度--（需要做菜单的数据通信--子系统->主应用）
数据共享
各系统store独立
都是初始化时从localStorage读取的，若运行时数据改变则无法同步--子系统之间的信息同步
未存储到localStorage的无法共享--跨系统的数据通信问题
路由
页面路径无法载入子系统页面，只会进入根系统（主系统->子系统的通信--顶部栏的运单搜索）
跟系统路由匹配所有子系统（已解决）
子系统无法使用根系统路由，只能刷新整个页面--子系统跳转到登录页/首页
根系统一级路由跳页时会有样式丢失、页面混乱（待查找）
根系统找不到路由时会变成空白页--待处理
缓存
跨系统切换没缓存系统组件内容--页面缓存问题（重要！！！）
跨系统切换没激活旧菜单，而是进入首页--路由定向问题，页面缓存问题（重要！！！）
样式
各系统样式文件重复引用后又单独打包
公共样式在跟系统引用就行
样式未隔离
抽离公共样式，页面样式开启作用域
公共组件类库
各系统无法按需引入
改为npm引入，第三方包公共类库自行关联
将所有组件类库单独抛出，逐个注册而非批量注册
avue组件库拆分过程需要重构其他非avue组件的代码（重要）
没有版本管理--npm组件版本控制
没有统一一的跨系统消息监听响应管理
打包编译
包较大--公共库抽取到npm私服
各系统公共代码重复打包--公共库抽取到npm私服
开发过程热更新（针对主应用+子应用 / 独立子应用 的热更新）
运行部署
在nginx上根系统报错
可能是公共代码库未编译--已解决
找不到子系统
设置代理和和不同服务器环境的请求地址--根据uri标识做反向代理
git仓库划分
编程思想
创建型
工厂模式
拼装法
设计一个公共基类
在工厂类实现基类
工厂类依据创建参数增强基类后返回
直接反馈法
写出多个需求类
工厂类依据创建参数实现对应需求类后直接返回
建造者模式
模块化地实现一个类
单例模式
结构型
桥接模式
将抽象部分和现实部分分离开
访问者模式
若A要调用B就把A当成参数交给B处理
外观模式（门面模式）
通过高级接口对低级接口进行组合封装
策略模式
依据参数执行不同的逻辑代码
模版法
父类通过控制子类重构的函数来实现类的功能
组合模式
将各个元素的同一操作组合在一起处理
迭代器模式
依照某一规则访问聚合元素内的属性
备忘录模式（缓存模式）
将数据缓存以便再次使用
享元模式
共享某一元素，或重复引用某元素
职责链模式
将问题处理一个个逐级传递直到有人接收并处理该问题
行为型
观察者（监听）模式
让发布者决定代码什么时候执行，使用者只需订阅
适配器模式
一个转接口，将不匹配的转换成匹配的，将复杂的转成简单的
代理模式
同过对原有对象进行修改加强成一个新的代理对象
中介模式
为各个需求方选择和返回各个供应方的结果
建造 单例 工厂 享元 访问 桥接 中介 适配器 代理 门面 组合 策略 备忘录（历史缓存） 模版 观察（监视） 职责链 迭代器
插件选择与使用
准备方案二，并时刻备份
灰度发布：先轻后重，先少后多
小改大加
控制反转（Ioc，又称依赖注入DI）
强内聚，弱耦合
内聚
耦合
MVVM
M控制层
V视图层
VM视图模型
将视图和模型分离
MVC
六大设计原则
0 条评论
下一页
