【qiankun】主应用css隔离、js隔离、日常通信机制

qiankun是一个微前端框架，它提供了多种机制来确保主应用与子应用之间的独立性，包括CSS隔离、JS隔离以及日常通信等。以下是对这些机制的详细解释：

一、CSS隔离

qiankun通过以下方式实现CSS隔离：

1. 自动添加命名空间：
   • 当子应用被注册到qiankun中时，qiankun会根据子应用的名称自动为其CSS选择器添加一个唯一的前缀。
   • 这样，即使不同的子应用使用了相同的CSS类名，也不会造成样式冲突，因为它们的类名在DOM中实际上是唯一的。
2. 使用Shadow DOM：
   • Shadow DOM是一种浏览器内置的Web标准技术，它允许开发者创建一个封闭的DOM和样式作用域。
   • qiankun可以利用Shadow DOM将子应用的HTML和CSS封装在一个独立的作用域内，从而避免样式冲突。

二、JS隔离

qiankun通过以下方式实现JS隔离：

1. 沙箱（Sandbox）机制：
   • qiankun为每个子应用创建了一个独立的沙箱环境，确保子应用中的全局变量、函数等不会影响到主应用或其他子应用。
   • 沙箱机制主要通过Proxy代理和快照技术来实现。Proxy代理可以拦截对全局变量的访问和修改，而快照技术可以在子应用加载和卸载时记录并恢复全局变量的状态。
2. 事件监听隔离：
   • qiankun通过事件委托和自定义事件的方式来实现事件监听的隔离。
   • 子应用可以监听自定义事件，并通过事件委托将事件处理函数绑定到主应用的某个元素上，从而避免直接绑定到全局元素上导致的冲突。
3. 资源加载隔离：
   • qiankun通过动态加载子应用的JavaScript、CSS等资源来实现资源加载的隔离。
   • 当子应用被激活时，qiankun会加载其所需的资源；当子应用被卸载时，qiankun会卸载其资源，避免资源之间的冲突和浪费。

三、日常通信机制

qiankun提供了多种通信机制来确保主应用与子应用之间的日常通信：

1. props传递：
   • 主应用可以通过props的方式向子应用传递数据、方法或回调函数。
   • 子应用可以在其生命周期函数中接收这些props，并根据需要进行处理。
2. 自定义事件：
   • 主应用和子应用可以通过自定义事件进行通信。
   • 自定义事件可以跨微应用进行事件广播，从而实现不同微应用之间的通信。
3. 全局状态管理：
   • 主应用和子应用可以共享一个全局状态管理工具（如Redux、Vuex等），来实现跨微应用的状态共享。
   • 通过全局状态管理工具，主应用和子应用可以方便地读取和更新共享状态。
4. 本地存储：
   • 对于一些不需要实时通信但需要共享持久数据的场景，主应用和子应用可以使用本地存储（如LocalStorage、SessionStorage等）来共享数据。

综上所述，qiankun通过CSS隔离、JS隔离以及日常通信等机制来确保主应用与子应用之间的独立性。这些机制共同构成了qiankun微前端框架的核心功能，使得多个前端应用可以在一个统一的平台上无缝集成和协同工作。