Situation
- 希望内部平台能够统一管理，将不同框架集成进一个统一管理平台，天狼星平台
- 希望能够统一走sso内部账号登录
- 提供开发、打包、发布于一体的后台
Task
- 将整个天狼星平台，CICD发布，整合成一个中台！
Action
- 与小伙伴一起，进行整个业务生态的开发。其中我主要包括，微前端的基座（提供统一登陆、对接各个部门的老项目，不管是react、vue，）、vm脚手架（提供本地结合当前分支打包不同环境打包部署能力，本地新增微前端直接模板模板）、sdk（提供比如像子应用之间的跳转方法，切换路由等方法）、发布管理平台（主要管理子应用的更新同步）
Result
- 将公司业务部分平台整合在天狼星平台上。
微前端原理
- 路由劫持
- 沙箱隔离
- 应用加载
- 生命周期
路由劫持：
由于pushState和replaceState会导致路由的变更，但不会触发对应的事件，所以会重写逻辑来主动触发处理
沙箱隔离：
一个网页主要由js,html,css三部分组成，如果这三者在同一个上下文中执行，那么不可避免的会产生各种冲突,因此需要一个沙箱机制来隔离冲突
js隔离
js隔离： js沙箱proxy，通过代理对象
js
复制代码
<script>
class SnapshotSandbox{
constructor(){
this.proxy = window // window的属性
this.modifypropsMap = {} // 记录在window上的修改
this.active()
}
active(){
this.windowSnapshot ={}; // 拍照
for(const prop in window){
if(window.hasOwnProperty(prop)){
this.windowSnapshot[prop] = window[prop]
}
}
Object.keys(this.modifypropsMap).forEach((p) =>{
window[p] = this.modifypropsMap[p]
})
}
inactive(){
for(const prop in window){
if(window.hasOwnProperty(prop)){
if(window[prop] !== this.windowSnapshot[prop]){
this.modifypropsMap[prop] = window[prop]
window[prop] = this.windowSnapshot[prop]
}
}
}
}
}
let sandbox = new SnapshotSandbox();
(
(window)=>{
window.a = 1;
window.b = 2;
console.log(window.a,window.b);
sandbox.inactive();
console.log(window.a,window.b);
sandbox.active();
console.log(window.a,window.b);
}
)(sandbox.proxy)
</script>
css隔离
-
css 不同的应用采不同的标识，通过postcss给不同的应用增加前缀，防止污染全局
