规范
系统名/模块名/页面名、CSS类名、事件名、本地存储、Cookies命名规则
能标识出根系统、系统级公共代码、子系统之间兼容性的版本号命名规则
子系统领域划分
按导航菜单(业务)
按集中的发包情况(变更频率)
按权限组(组织结构)
跟后端一致
实现方式
1. 使用http服务器(nginx反向代理)重定向路由<br>
2. 使用iframe嵌套以及自定义的消息通信(陈旧技术)
3. 使用纯web components 构建应用(适合新的项目)<br>
4. 使用single-spa的方式来实现<br>
5. 使用single-spa结合web components的结合方式(待定)
qiankunDemo问题清单
系统载入
时间太久--2s
留白停留时间过长(上述时间)
添加过度动画
左侧菜单迁到跟子系统上,无数据时保留高度--(需要做菜单的数据通信--子系统->主应用)
数据共享
各系统store独立
都是初始化时从localStorage读取的,若运行时数据改变则无法同步--子系统之间的信息同步
未存储到localStorage的无法共享--跨系统的数据通信问题
路由
页面路径无法载入子系统页面,只会进入根系统(主系统->子系统的通信--顶部栏的运单搜索)
跟系统路由匹配所有子系统(已解决)
子系统无法使用根系统路由,只能刷新整个页面--子系统跳转到登录页/首页
根系统一级路由跳页时会有样式丢失、页面混乱(待查找)
根系统找不到路由时会变成空白页--待处理
缓存
跨系统切换没缓存系统组件内容--页面缓存问题(重要!!!)
跨系统切换没激活旧菜单,而是进入首页--路由定向问题,页面缓存问题(重要!!!)
样式
各系统样式文件重复引用后又单独打包
公共样式在跟系统引用就行
公共组件类库
各系统无法按需引入
改为npm引入,第三方包公共类库自行关联
将所有组件类库单独抛出,逐个注册而非批量注册
avue组件库拆分过程需要重构其他非avue组件的代码(重要)
没有版本管理--npm组件版本控制
没有统一一的跨系统消息监听响应管理
打包编译
包较大--公共库抽取到npm私服
各系统公共代码重复打包--公共库抽取到npm私服
开发过程热更新(针对主应用+子应用 / 独立子应用 的热更新)
运行部署
在nginx上根系统报错
可能是公共代码库未编译--已解决
找不到子系统
设置代理和和不同服务器环境的请求地址--根据uri标识做反向代理
git仓库划分
编程思想
创建型
工厂模式
拼装法
设计一个公共基类
在工厂类实现基类
工厂类依据创建参数增强基类后返回
直接反馈法
写出多个需求类
工厂类依据创建参数实现对应需求类后直接返回
单例模式
结构型
外观模式(门面模式)
通过高级接口对低级接口进行组合封装
职责链模式
将问题处理一个个逐级传递直到有人接收并处理该问题
行为型
观察者(监听)模式
让发布者决定代码什么时候执行,使用者只需订阅
适配器模式
一个转接口,将不匹配的转换成匹配的,将复杂的转成简单的
代理模式
同过对原有对象进行修改加强成一个新的代理对象
建造 单例 工厂 享元 访问 桥接 中介 适配器 代理 门面 组合 策略 备忘录(历史缓存) 模版 观察(监视) 职责链 迭代器
插件选择与使用
准备方案二,并时刻备份
灰度发布:先轻后重,先少后多
小改大加
MVC
六大设计原则