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