微前端框架 qiankun 全面解析到源码实现

🕗 发布于 2024-10-09 05:51 前端框架状态模式前端

微前端（Micro Frontends）是一种将大型前端应用拆分为多个独立模块的架构设计思想，旨在解决复杂应用开发与维护的难题。qiankun 是目前流行的微前端解决方案之一，基于 single-spa 进行封装，提供了一种简单且完整的微前端架构实践。

微前端概念与优势

什么是微前端

微前端类似于后端的微服务架构，将一个大型的前端应用拆分为多个独立的前端模块，每个模块可以独立开发、测试、部署和运行。每个子应用（微应用）可以使用不同的技术栈，如 React、Vue、Angular 等。

微前端的优势

独立开发：每个微应用可以由独立的团队开发，甚至可以使用不同的技术栈，降低团队间的耦合度。
渐进迁移：在技术更新或重构过程中，可以通过逐步替换微应用来实现平滑迁移，而不是一次性更新整个系统。
独立部署：每个微应用可以独立部署，减少部署时的影响面。
复用性高：微应用可以在不同项目间复用，减少重复开发的工作。

qiankun 简介

qiankun 是基于 single-spa 实现的微前端框架，它通过提供完整的生命周期管理、应用间通信机制以及对沙箱的支持，简化了微前端的开发和集成。

qiankun 特点

简单易用：对 single-spa 进行了封装，开发者不需要关心底层细节，只需按照简单的 API 使用即可。
无技术栈限制：支持任意框架（React、Vue、Angular 等）的微应用接入。
沙箱隔离：通过沙箱机制隔离不同微应用的全局变量、样式，确保互不干扰。
应用通信机制：支持主应用与微应用之间的数据传递与通信，提供灵活的 API。

qiankun 核心概念

主应用（Master App）

主应用是整个微前端系统的宿主应用，负责微应用的注册、加载和调度。主应用通常使用统一的框架（如 React 或 Vue）进行开发。

微应用（Sub App）

微应用是独立开发的前端模块，可以在主应用中注册和运行。每个微应用可以独立运行，也可以在主应用中加载时与其他微应用协同工作。

应用生命周期

qiankun 提供了标准的生命周期钩子，包括 bootstrap、mount、unmount，分别对应应用的初始化、挂载和卸载过程。

沙箱机制

qiankun 通过沙箱机制隔离不同微应用的运行环境，确保它们之间的全局变量和样式互不影响。

应用间通信

qiankun 提供了简单的 API 用于主应用与微应用之间进行数据传递和事件通

基本使用

安装 qiankun

在主应用中安装 qiankun：

npm install qiankun --save

主应用配置

import { registerMicroApps, start } from 'qiankun';

// 注册微应用
registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:7100', // 子应用的访问地址
    container: '#container', // 子应用挂载的 DOM 节点
    activeRule: '/app1', // 子应用激活的路径
  },
  {
    name: 'app2',
    entry: '//localhost:7200',
    container: '#container',
    activeRule: '/app2',
  },
]);

// 启动微前端
start();

微应用配置

在每个微应用中，你需要导出标准的生命周期钩子：

export async function bootstrap() {
  console.log('微应用启动');
}

export async function mount(props) {
  console.log('微应用挂载', props);
}

export async function unmount() {
  console.log('微应用卸载');
}

qiankun 的高级功能

沙箱与样式隔离

qiankun 通过沙箱机制实现对微应用的全局变量和样式隔离，确保不同的微应用不会相互干扰。每个微应用的运行环境是相互独立的。

应用间通信
qiankun 提供了 initGlobalState 和 onGlobalStateChange API，用于微应用与主应用之间共享数据和通信。

// 主应用中创建全局状态
import { initGlobalState } from 'qiankun';
const actions = initGlobalState({ user: 'admin' });

actions.onGlobalStateChange((state, prev) => {
  console.log('状态变化', state, prev);
});

// 微应用中使用全局状态
props.onGlobalStateChange((state, prev) => {
  console.log('子应用状态变化', state, prev);
});

动态加载微应用

qiankun 支持动态注册和加载微应用，可以根据业务需求在运行时决定是否加载某个微应用。

import { loadMicroApp } from 'qiankun';

const microApp = loadMicroApp({
  name: 'app3',
  entry: '//localhost:7300',
  container: '#container',
  props: { someProp: 'someValue' },
});

// 动态卸载微应用
microApp.unmount();

多实例应用

qiankun 支持多实例的微应用，可以在同一页面上运行同一个微应用的多个实例。

源码分析

qiankun 是基于 single-spa 封装的微前端解决方案，旨在提供更加简单、开箱即用的微前端架构。通过对 qiankun 源码的分析，能帮助我们更好地理解其工作原理及微前端的核心思想。本文将逐步分析 qiankun 源码的核心部分，包括微应用的注册、加载、沙箱机制、应用间通信等。

源码结构概览

qiankun 的核心代码主要包括以下模块：

registerMicroApps：微应用的注册、管理模块。
start：微前端的启动模块。
loadMicroApp：微应用的动态加载模块。
沙箱机制：隔离微应用的全局变量和样式。
应用间通信：主应用和微应用之间的状态管理。

src
├── globalState // 应用间状态管理
├── interfaces  // 类型声明和接口定义
├── sandbox     // 沙箱隔离机制
├── utils       // 工具方法
├── index.ts    // 核心注册与启动代码
├── start.ts    // start 函数，启动微前端
└── register.ts // registerMicroApps 函数，注册微前端应用

registerMicroApps 是 qiankun 的核心 API，负责将微应用注册到主应用中。其源码位于 register.ts 文件。

export function registerMicroApps(
  apps: Array<RegistrableApp<any>>,
  lifeCycles?: FrameworkLifeCycles<any>,
) {
  // 对微应用的配置进行标准化
  const unmountPromises = apps.map((app) => {
    return validateRegistrableApp(app);
  });

  // 传递到 single-spa 中注册微应用
  unmountPromises.forEach((promise) => {
    promise.then((appConfig) => {
      registerApplication(appConfig);
    });
  });
}

启动微前端：start

在 start.ts 文件中，start 方法用于启动微前端环境。它会触发微应用的加载，并控制应用的生命周期。

export function start(opts: StartOptions = {}) {
  // 启动 single-spa
  startSingleSpa(opts);

  // 初始化沙箱
  if (opts.sandbox) {
    initializeSandbox(opts.sandbox);
  }

  // 启动全局状态管理
  if (opts.globalState) {
    initializeGlobalState(opts.globalState);
  }
}

qiankun 使用 single-spa 管理应用的生命周期，而 start 方法会通过 startSingleSpa 启动整个微前端架构，并根据配置初始化沙箱机制和全局状态管理。

沙箱机制

沙箱机制是 qiankun 的核心之一，它通过隔离不同微应用的全局变量和样式，确保应用之间互不干扰。qiankun 的沙箱模块位于 src/sandbox 中，主要包括 ProxySandbox 和 LegacySandbox 两种沙箱实现。
proxySandbox 使用现代浏览器的 Proxy API 来隔离全局对象。这是 qiankun 默认的沙箱实现方式。

export class ProxySandbox {
  private updatedValueSet = new Set<string>();
  private sandboxRunning = false;
  private proxy: WindowProxy;

  constructor() {
    const rawWindow = window;
    const fakeWindow = Object.create(null);

    this.proxy = new Proxy(fakeWindow, {
      get(target, key) {
        return key in target ? target[key] : rawWindow[key];
      },
      set(target, key, value) {
        target[key] = value;
        if (this.sandboxRunning) {
          this.updatedValueSet.add(key);
        }
        return true;
      }
    });
  }

  // 启动沙箱
  activate() {
    this.sandboxRunning = true;
  }

  // 停止沙箱
  deactivate() {
    this.sandboxRunning = false;
  }
}

激活沙箱：调用 activate() 方法时，Proxy 开始拦截对 window 对象的修改。
停止沙箱：调用 deactivate() 方法后，所有全局对象的修改将不再生效。

LegacySandbox

LegacySandbox 是为不支持 Proxy 的浏览器设计的沙箱实现。它通过手动保存和恢复全局变量的方式来实现隔离。

export class LegacySandbox {
  private originalWindowProperties: Map<string, any>;

  constructor() {
    this.originalWindowProperties = new Map();
  }

  // 记录原始全局变量
  recordOriginalState() {
    Object.keys(window).forEach((key) => {
      this.originalWindowProperties.set(key, window[key]);
    });
  }

  // 恢复原始全局变量
  restoreOriginalState() {
    this.originalWindowProperties.forEach((value, key) => {
      window[key] = value;
    });
  }
}

这类沙箱实现比较粗糙，性能上不如 ProxySandbox，但能兼容旧浏览器。

应用间通信

qiankun 提供了全局状态管理器 GlobalState，用于主应用和微应用之间的数据通信。
initGlobalState 用于初始化全局状态，并提供 setGlobalState 和 onGlobalStateChange 方法，用于跨应用通信。

export function initGlobalState(initialState: Record<string, any>) {
  let state = initialState;

  function setGlobalState(newState: Record<string, any>) {
    state = { ...state, ...newState };
    // 通知所有订阅者
    subscribers.forEach((listener) => listener(state));
  }

  function onGlobalStateChange(listener: (state: any) => void) {
    subscribers.push(listener);
    return () => {
      subscribers = subscribers.filter((item) => item !== listener);
    };
  }

  return {
    setGlobalState,
    onGlobalStateChange,
  };
}

setGlobalState: 设置新的全局状态，所有应用会自动收到更新。
onGlobalStateChange: 订阅状态变化的监听器，微应用可以通过它获取主应用的数据更新。

loadMicroApp 动态加载微应用

loadMicroApp 是 Qiankun 提供的用于动态加载微应用的方法，允许在运行时按需加载微应用，而不需要在应用启动时注册。

export function loadMicroApp(
  appConfig: LoadableApp<any>,
  opts?: FrameworkConfiguration,
) {
  // 加载微应用
  const microApp = loadApp(appConfig, opts);

  // 启动微应用
  microApp.mount();

  return microApp;
}

通过 loadMicroApp，开发者可以在特定场景下按需加载微应用，而无需一开始就注册所有应用。这样可以减小主应用的初始加载体积，提升性能。

原文地址：https://blog.csdn.net/qq_34820371/article/details/142747933

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：【算法】- 查找 - 多路查找树（B树）
下一篇：数据结构单向链表

计算机毕业设计 | SpringBoot 房屋租赁网租房买房卖房平台(附源码)
Springboot房屋租赁网，项目功能：用户：房源搜索，房源查看，房屋租赁，房源发布，个人信息管理，管理员：用户管理，房源管理
阅读更多2024-10-09
第一章建设工程基本法律知识 1.4-1.7
1.建设工程基本法律知识1.4 建设工程侵权责任制度1.4.1 侵权责任主体和损害赔偿1.侵权责任主体侵权行为归责原则过错责任原则：行为人因过错侵害他人民事权益造成损害的无过错责任原则:不论行为人有无
阅读更多2024-10-09
Python中的数据可视化艺术：用Matplotlib和Seaborn讲故事
Matplotlib是Python中最基础的绘图库之一，灵活且功能强大，几乎可以绘制任何类型的图表。它的API相对底层，意味着用户可以完全控制图表的各个方面。虽然Matplotlib功能强大，但在美观
阅读更多2024-10-09
单片机（学习）2024.10.8
计算机基础（io逻辑，计算机组成，总线，ALU，指令集，CPU组成），单片机基础，STM32简介，ARM体系结构
阅读更多2024-10-09
点可云ERP进销存V8版本—转账单的使用操作
转账单用于资金在不同账户之间转移的财务单据，可以从资金账户A中转账到资金账户B中的操作，选择转出、转入账户、填写结算金额、结算号等数据，保存生成，审核之后资金数据生效。导出功能需要在列表中勾选单据再在
阅读更多2024-10-09
使用YOLO11实例分割模型进行人物分割【附完整源码】
使用YOLO11实例分割模型进行人物分割【附完整源码】
阅读更多2024-10-09
宠物咖啡馆数字化平台：SpringBoot框架的实现策略
如果采用电子化的存储方式就会带来很大的改善，而且给用户的查询带来了很大便利，因此设计一个基于Spring Boot的宠物咖啡馆平台的设计与实现刻不容缓，能够提高信息的管理水平。开发合适的基于Sprin
阅读更多2024-10-09
竹壳天气时钟（一）使用数组保存扫描到的WiFi列表信息
准备用基于esp8266的nodemcu开发板做一个天气时钟。一步一步记录代码编写过程。/*竹壳天气时钟使用基于esp8266的NodeMCU制作。计划用竹子做最后成品的外壳，所以才有了这个名称。第一
阅读更多2024-10-09
Vue vben admin开源库中table组件tips
Vue vben admin开源库
阅读更多2024-10-09
【python3】tornado高性能编程
【代码】【python3】tornado高性能编程。
阅读更多2024-10-09

微前端框架 qiankun 全面解析到源码实现

微前端概念与优势

什么是微前端

微前端的优势

qiankun 简介

qiankun 特点

qiankun 核心概念

主应用（Master App）

微应用（Sub App）

应用生命周期

沙箱机制

应用间通信

基本使用

安装 qiankun

主应用配置

微应用配置

qiankun 的高级功能

沙箱与样式隔离

应用间通信

动态加载微应用

多实例应用

源码分析

源码结构概览

启动微前端：start

沙箱机制

LegacySandbox

应用间通信

loadMicroApp 动态加载微应用

相关文章