Qiankun面试题基础10问

1. 请简述qiankun的实现原理

qiankun 是一个基于 single-spa 的微前端实现库，它能够帮助我们将多个独立的前端应用聚合成一个整体的应用。它的实现原理是通过监听路由变化，动态加载和卸载微应用，同时通过自定义事件系统来实现微应用之间的通信。

2. 如果让你来设计实现一个微前端框架，你会怎么设计？

主应用和子应用之间的通信：可以通过自定义事件系统来实现，主应用和子应用之间通过自定义事件来进行通信。
子应用的加载和卸载：可以通过监听路由变化，动态加载和卸载微应用。
子应用之间的通信：可以通过自定义事件系统来实现，子应用之间通过自定义事件来进行通信。
样式隔离：可以通过将子应用的样式进行隔离，避免样式冲突。
共享状态：可以通过共享状态来实现，主应用和子应用之间通过共享状态来进行通信。
路由处理：可以通过监听路由变化，动态加载和卸载微应用。
生命周期管理：可以通过监听路由变化，动态加载和卸载微应用。
安全性：可以通过对子应用进行沙箱隔离，避免子应用对主应用的影响。
性能优化：可以通过对子应用进行懒加载，避免一次性加载所有子应用。
部署：可以通过将子应用进行打包，然后通过 CDN 进行部署。

3. 子应用注册阶段需要哪些信息？

子应用注册阶段需要以下信息：

name：子应用的名称，用于在主应用中标识子应用。
entry：子应用的入口文件，用于动态加载子应用。
container：子应用的容器，用于将子应用挂载到主应用中。
activeRule：子应用的激活规则，用于匹配主应用的路由。
props：子应用的属性，用于向子应用传递参数。

4. qiankun主应用如何开启样式隔离？

qiankun 主应用可以通过设置 sandbox 属性来开启样式隔离，sandbox 属性可以设置为 true 或者一个对象，当设置为 true 时，会开启默认的样式隔离，当设置为一个对象时，可以自定义样式隔离的配置。示例：

loadMicroApp({
name: 'sub-app',
entry: '[//localhost:8080](notion://localhost/)',
container: '#sub-app-container',
sandbox: { strictStyleIsolation: true },
});

5. 添加了样式隔离的子应用元素在查看F12有什么区别？

添加了样式隔离的子应用元素在查看 F12 时，会发现子应用的样式被包裹在一个 shadow-root 中，这是由于样式隔离导致的，样式隔离会将子应用的样式包裹在一个 shadow-root 中，避免样式冲突。Qiankun 还会在每个子应用的样式类名前添加一个后缀，后缀的格式为 [data-qiankun="子应用名称"]

6. qiankun微前端框架中，子应用之间是如何通信的？

qiankun 微前端框架中，子应用之间是通过自定义事件系统来进行通信的，子应用之间可以通过自定义事件来进行通信，主应用也可以通过自定义事件来和子应用进行通信。

7. qiankun主子应用、子子应用之间的通信方式有哪些？

qiankun 主子应用、子子应用之间的通信方式有以下几种：

自定义事件：主子应用、子子应用之间可以通过自定义事件来进行通信。
全局变量：主子应用、子子应用之间可以通过全局变量来进行通信。
window 对象：主子应用、子子应用之间可以通过 window 对象来进行通信。
HTML5 通信 API：主子应用、子子应用之间可以通过 HTML5 通信 API 来进行通信，如 postMessage、BroadcastChannel 等。
共享状态：主子应用、子子应用之间可以通过共享状态来进行通信。
跨域通信：主子应用、子子应用之间可以通过跨域通信来进行通信，如 JSONP、CORS 等。
代理：主子应用、子子应用之间可以通过代理来进行通信，如 Nginx 代理、反向代理等。
中间件：主子应用、子子应用之间可以通过中间件来进行通信，如 koa 中间件、express 中间件等。
事件总线：主子应用、子子应用之间可以通过事件总线来进行通信，如 EventBus、EventEmitter 等。
WebSocket：主子应用、子子应用之间可以通过 WebSocket 来进行通信。
服务端：主子应用、子子应用之间可以通过服务端来进行通信，如 RESTful API、GraphQL 等。

8. qiankun微前端框架中，子应用是如何加载的？

qiankun 微前端框架中，子应用是通过 loadMicroApp 方法来加载的，loadMicroApp 方法接收一个配置对象，配置对象包括子应用的名称、入口文件、容器、激活规则等信息，loadMicroApp 方法会根据配置对象动态加载子应用，并将子应用挂载到容器中。

9. qiankun微前端框架中，子应用是如何卸载的？

qiankun 微前端框架中，子应用是通过 unmountMicroApp 方法来卸载的，unmountMicroApp 方法接收一个子应用的名称，unmountMicroApp 方法会根据子应用的名称动态卸载子应用，并将子应用从容器中移除。

10. qiankun子应用如何实现路由跳转？

qiankun 子应用可以通过 history 对象来实现路由跳转，history 对象包括 pushState、replaceState、go、back 等方法，子应用可以通过这些方法来实现路由跳转。代码示例：

history.pushState(null, null, '/path');

金三银四这些qiankun微前端面试题都会了吗