qiankun中的数据通讯方式源码分析

2023-12-20 20:07:36

前言

在微前端架构中，由于子应用与主应用是独立运行的，因此数据共享和通信成为了一项重要挑战。qiankun作为一款微前端框架，提供了多种数据通信方式，帮助开发者轻松实现跨域数据传递。本文将深入分析qiankun中的数据通信方式源码，揭秘其背后的实现原理。

一、qiankun的数据通信方式

qiankun提供了几种数据通信方式，包括：

props方式 ：通过在子应用中使用props属性接收主应用传递的数据。
全局状态共享 ：通过在主应用中定义全局状态，然后在子应用中通过props获取该状态。
自定义通信协议 ：通过在子应用和主应用中约定一套通信协议，实现数据的发送和接收。

二、props方式的源码分析

props方式是qiankun中最简单的数据通信方式。其源码位于qiankun的packages/qiankun-child目录下的lifeCycle.ts文件中。

在该文件中，qiankun提供了createPropsGetter方法，用于生成一个获取props的函数。该函数接收子应用的props作为参数，并返回一个新的props对象。新的props对象包含了主应用通过props传递的数据。

export const createPropsGetter = (rawProps: RawProps) => {
  return (name: string) => {
    // 从props中获取对应的数据
    const value = rawProps[name];

    // 如果数据不存在，则返回undefined
    if (value === undefined) {
      return undefined;
    }

    // 如果数据是函数，则直接返回
    if (typeof value === 'function') {
      return value;
    }

    // 如果数据是对象，则深拷贝一份数据并返回
    if (typeof value === 'object') {
      return JSON.parse(JSON.stringify(value));
    }

    // 如果数据是其他类型，则直接返回
    return value;
  };
};

在子应用中，可以使用createPropsGetter方法生成一个获取props的函数，然后通过该函数获取主应用传递的数据。

const propsGetter = createPropsGetter(this.props);

// 获取主应用传递的数据
const data = propsGetter('data');

三、全局状态共享的源码分析

全局状态共享是qiankun提供的一种更强大的数据通信方式。其源码位于qiankun的packages/qiankun-parent目录下的globalState.ts文件中。

在该文件中，qiankun提供了defineGlobalState方法，用于定义一个全局状态。全局状态是一个对象，可以存储任何类型的数据。

export const defineGlobalState = <T>(initialState?: T): IGlobalState<T> => {
  const state = reactive<T>(initialState);

  const actions = {};
  const getters = {};

  return {
    state,
    actions,
    getters,
  };
};

在主应用中，可以使用defineGlobalState方法定义一个全局状态。然后在子应用中通过props获取该状态。

// 在主应用中定义全局状态
const globalState = defineGlobalState({
  count: 0,
});

// 在子应用中获取全局状态
const globalState = this.props.globalState;

// 获取全局状态中的数据
const count = globalState.state.count;

四、自定义通信协议的源码分析

自定义通信协议是qiankun提供的一种更加灵活的数据通信方式。其源码位于qiankun的packages/qiankun-parent目录下的communication.ts文件中。

在该文件中，qiankun提供了registerMicroAppCommunication方法，用于注册一个自定义通信协议。自定义通信协议是一个函数，接收主应用和子应用的通信数据作为参数。

export const registerMicroAppCommunication = (name: string, communication: CommunicationHandler) => {
  if (!communications[name]) {
    communications[name] = [];
  }

  communications[name].push(communication);
};

在主应用和子应用中，可以使用registerMicroAppCommunication方法注册一个自定义通信协议。然后在主应用和子应用中通过该通信协议发送和接收数据。

// 在主应用中注册自定义通信协议
registerMicroAppCommunication('my-communication', (data: any) => {
  // 处理从子应用接收到的数据
});

// 在子应用中注册自定义通信协议
registerMicroAppCommunication('my-communication', (data: any) => {
  // 处理从主应用接收到的数据
});

// 在主应用中发送数据
microApp.sendMessage('my-communication', {
  data: 'hello from main app',
});

// 在子应用中发送数据
window.parent.postMessage({
  type: 'my-communication',
  data: 'hello from child app',
}, '*');