qiankun 原理
一、概述
qiankun 是一个微前端框架，它提供了一种将多个独立的前端应用集成到一个整体中的解决方案。通过 qiankun，我们可以将多个前端应用组合成一个完整的应用程序，这些应用程序可以是不同的技术栈、不同的团队开发、不同的发布周期等等，而且它们之间还可以相互通信和共享数据。
二、微前端架构
1. 什么是微前端
微前端是一种将多个独立的前端应用集成到一个整体中的架构模式。与传统单体式应用不同，每个独立的前端应用都有自己独立的代码库、构建流程和部署方式，它们之间通过接口进行通信和协作。
2. 微前端优势
-
技术栈无关：不同团队可以使用不同技术栈进行开发；
- 独立部署：每个子系统都可以独立部署，避免了整体发布带来的风险；
- 灵活扩展：新增子系统只需要添加对应模块即可；
- 前后端分离：后台服务提供 API 接口，前台只负责 UI 展示和业务逻辑。
3. 微前端实现方式
- iframe：每个子系统都嵌套在一个 iframe 中，通过 postMessage 进行通信；
- Web Components：使用 Web Components 技术实现子系统的封装和复用；
- 路由分发：将不同的路由映射到不同的子系统中，通过路由跳转实现页面切换。
4. qiankun 实现方式
qiankun 使用路由分发的方式实现微前端架构。它将整个应用程序拆分成多个子应用，每个子应用都有自己独立的代码库、构建流程和部署方式。主应用负责管理所有子应用，将不同
的路由映射到不同的子应用中，并通过通信机制使得它们之间可以相互协作。
三、qiankun 原理
1. 主应用iframe参数传递
主应用是整个微前端架构中的核心，它负责管理所有子应用。主应用需要做以下几件事情：
- 注册子应用：主应用需要知道有哪些子应用可供选择；
- 加载子应用：当用户访问某个页面时，主应用需要根据当前路由加载对应的子应用；
- 路由映射：主应用需要将不同的路由映射到不同的子应用中；
- 通信机制：主应用需要提供一种通信机制，使得子应用之间可以相互协作。
2. 子应用
子应用是整个微前端架构中的组成部分，每个子应用都有自己独立的代码库、构建流程和部署方式。在 qiankun 中，子应用需要做以下几件事情：
- 导出生命周期钩子：每个子应用需要导出一些生命周期钩子，主应用会在合适的时机调用这些钩子；
- 注册路由表：每个子应用需要注册自己的路由表；
- 导出通信机制：每个子应用需要导出一些方法或变量，供其他子应用调用。
3. 路由映射
在 qiankun 中，主应用负责将不同的路由映射到不同的子应用中。具体实现方式如下：
- 主应用通过 history.pushState 或者 hashchange 事件监听路由变化；
- 当路由发生变化时，主应用根据当前路由判断该加载哪个子应用；
- 主应用会向已经加载的子应用发送一个事件（比如 sendToChild），告诉它们当前路由发生了变化；
- 子应用收到 sendToChild 事件后，根据传递过来的参数判断是否要显示当前页面。
4. 通信机制
在 qiankun 中，主应用和子应用之间可以通过以下几种方式进行通信：
- window 对象：主应用和子应用共享同一个 window 对象，可以通过 window.parent 或者 window.frames 访问对方；
- postMessage：主应用和子应用可以通过 postMessage 方法发送消息给对方；
- 自定义事件：主应用和子应用可以通过自定义事件相互通信。
5. 生命周期钩子
在 qiankun 中，每个子应用都需要导出一些生命周期钩子，主应用会在合适的时机调用这些钩子。具体的生命周期钩子如下：
- bootstrap：在加载微前端系统之前执行的函数；
- mount：在微前端系统挂载到 DOM 上之后执行的函数；
-
unmount：在微前端系统从 DOM 上卸载之前执行的函数。
四、总结
qiankun 是一个优秀的微前端框架，它能够将多个独立的前端应用集成到一个整体中，并且实现了路由分发、通信机制等功能。通过 qiankun，我们可以将不同技术栈、不同团队开发、不同发布周期等多个独立的前端应用组合成一个完整的应用程序。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。