qiankun微前端原理

一个前端应用能够单独跑，也能被作为一个模块集成到另一个应用里，在 url 变化的时候，加载、卸载对应的子应用。

Qiankun 是一个基于 single-spa 的微前端框架，通过将不同的子应用打包成独立的 JavaScript 包。

升级：使用 html 入口的方式解决了要手动加载子应用的各种资源的麻烦，通过沙箱实现了 JS、CSS 的隔离，还实现了全局的状态管理机制（子应用获取全局状态的方法 getGlobalState 和全局状态变化时的处理函数 onGlobalStateChange）。

Qiankun 主要有几个核心原理：

1. 基于 single-spa 进行封装。single-spa 是一个用于前端微服务化的 JavaScript 框架，提供了生命周期管理、路由管理等核心功能。

2. 使用沙箱（sandbox）进行隔离。把 js 代码包裹了一层 function，代码放在了单独作用域，然后再把内部的 window 用 Proxy 包一层，这样内部的代码就被完全隔离了，这样就实现了一个 JS 沙箱。Qiankun 会为每个子应用创建一个沙箱，保证各个子应用之间的运行环境隔离。CSS 隔离使用 shadow dom ，这是浏览器支持的特性，shadow root 下的 dom 的样式不会影响其他 dom 的样式。

3. 使用 Proxy 对全局变量进行代理。为了防止子应用修改全局变量导致其他子应用受影响，Qiankun 会使用 Proxy 对全局变量进行代理，防止子应用直接修改全局变量。

4. 使用消息通信机制实现数据共享。Qiankun 提供了全局 API 和 props 等方式进行数据共享，同时也支持使用自定义事件或者 pub/sub 等方式实现消息通信。

5. 路由管理和资源加载。Qiankun 会根据路由或者菜单等方式来决定加载哪些子应用，并负责资源的加载和缓存管理。

通过以上的技术原理，Qiankun 实现了多个子应用的协同工作，多个独立的子应用能够共享同一个主应用容器，每个子应用都可以独立开发、部署。

在实现上，qiankun 使用了 Web Components 技术来隔离不同应用的 DOM，使用单独的沙盒来隔离 JavaScript 执行环境，并且使用 postMessage API 来进行跨域通信。

当调用 window.postMessage() 方法的时候，在目标窗口的Window对象上就会触发一个 message 事件

window.addEventListener("message", (event)=>{
   var origin = event.origin;
   // 通常，onmessage()事件处理程序应当首先检测其中的origin属性，忽略来自未知源的消息
   if (origin !== "http://example.org:8080")
     return;
   // ...
}, false);

项目中通信机制的具体应用

方式一：应用传参——通过vuex

把需要更新的值放在主应用的vuex里，主应用通过this.store.commit()触发数据更新，子应用通过this.$root.parentVuex.commit()触发数据更新；

parentVuex：data.store 是子应用main.js里初始化的，子应用全局可以通过this.$root.parentVuex获取

方式二：应用传参——CustomEvent

将自定义事件绑定到document上，

let _this = this;
document.addEventListener("build",function(event){
_this.$store.commit('setCommonData',{ parent: 10 });
// alert("event.detail.dog:" + event.detail.dog + "event.detail.cat:" + event.detail.cat);
},false)

用的时候，创建一个事件对象

/* 创建一个事件对象，名字为newEvent，类型为build */
var newEvent = new CustomEvent('build',{
detail: {
dog: "wo1111",
cat: "mio2222"
}
});

/* 触发自定义事件 */
document.dispatchEvent(newEvent);

项目中遇到的兼容性问题

1.IE浏览器使用GET发送请求时，如果两次请求的地址和参数相同，在不刷新页面的情况下，浏览器会缓存第一次请求的内容。

需要在axios中，给get请求加个时间戳。

2.IE不支持es6语法，需要安装几个依赖，然后在主项目的main.js中引入

"core-js": "^3.6.4",
"custom-event-polyfill": "^1.0.7",
"fetch-polyfill": "^0.8.2",
"whatwg-fetch": "^3.2.0"

// 在主项目的main.js中引入文件
import 'whatwg-fetch';
import 'custom-event-polyfill';
import 'core-js/stable/promise';
import 'core-js/stable/symbol';
import 'core-js/stable/string/starts-with';
import 'core-js/web/url';

3.ie10、11下虚拟dom兼容问题

qiankun源码有bug，在浏览器不支持 shadow dom时，有的地方源码会做自动降级处理和提示，但是，有个地方漏了。应该加一个浏览器支持不的判断

4.路由跳转问题

子项目想要跳转到另一个子项目/主项目页面，要在子项目注册时将主项目的路由实例对象传过去，子项目挂载到全局，用父项目的router 跳转