此篇文章只简单梳理思路，不会源码逐行分析，看此文章前请熟悉qiankun和single-spa的使用最好
暴露出的API, 从index.ts文件可以看出下面暴露的API
export { loadMicroApp, registerMicroApps, start } from './apis';
export { initGlobalState } from './globalState';
export * from './errorHandler';
export * from './effects';
export * from './interfaces';
export { prefetchApps } from './prefetch';
1. 注册子应用 registerMicroApps
注册子应用的接口， 基本原理是内部有一个子应用数组，可以注册多个子应用，遍历数组调用single-spa的registerApplication函数进行注册, 此API用法如下, 可以参考 https://single-spa.js.org/docs/api
registerApplication
注意此函数的第二个参数applicationOrLoadingFn,返回一个resolved的应用或者一个promise，注意这里的 the resolved application其实是single-spa定义的一个概念，一个应用的概念，具体参考https://single-spa.js.org/docs/building-applications
说白了就是要返回一个如下的对象，带有名字，声明周期方法, 这就是qiankun要求你子应用必须声明这些声明周期函数的目的，返回给single-spa
{
name: "applicationName",
bootstrap: [ bootstrap function array],
mount: [ mount function array],
unmount: [ unmount function array]
}
registerMicroApps里面关键的代码如下，注意这个loadApp才是真正封装的返回应用的地方
unregisteredApps.forEach(app => {
const { name, activeRule, props, ...appConfig } = app;
registerApplication({
name,
app: async () => {
await frameworkStartedDefer.promise;
return loadApp({ name, props, ...appConfig }, frameworkConfiguration, lifeCycles);
},
activeWhen: activeRule,
customProps: props,
});
});
加载子应用内部函数 loadApp
下面着重看下这个加载子应用函数，分几个小步骤看下
-
加载入口文件 importEntry： 加载指定的html文本，和脚本用来执行，这就是你在qiankun中传入
entry: '//localhost:7100'类似参数的用途，用此路劲来加载你子应用的入口文件,和手动执行html中的脚本 - 创建子应用DOM render: 如果你注册的时候加入了render方法，此处会调用执行，否则找到container元素，把渲染的内容插入节点中
- 创建沙箱 sandbox： 此处是qiankun的核心，创建了js的沙箱进行子应用之间和主应用的隔离, 此处不展开分析，原理就是window对象的属性劫持，内部用一个对象缓存子应用window下面属性方法，达到隔离的目的，下面代码可以看出，支持proxy的就用proxy代理的沙箱隔离，否则用SnapshotSandbox，简单来说就是内部备份，diff 方式记录， SingularProxySandbox是老沙箱方式实现，说是稳定了再用统一的ProxySandbox
if (window.Proxy) {
sandbox = singular ? new LegacySandbox(appName) : new ProxySandbox(appName);
} else {
sandbox = new SnapshotSandbox(appName);
}
- 执行加载前事件 beforeLoad： 利用execHooksChain函数归并执行函数，简单来说就是类似redux中的compose洋葱模型，上一次函数的返回值作为下一个函数的参数，包裹执行，也是中间件原理，后面的一些加载声明周期函数与此类似
- 执行入口文件的脚本 execScripts： 此步骤就是获取子应用指定的主脚本，执行并且获取子应用的bootstrap,mount, unmount等声明周期函数
- 返回应用并执行内部的一些钩子周期函数： 此时就可以返回一个满足single-spa的应用了，同时在mount和unmount之前会执行一些内部定义的生命周期钩子
到此为止，基本整个注册，加载流程清楚了
2. 动态加载应用 loadMicroApp
qiankun提供了动态加载子应用的方式，简单代码如下, 动态调用了single-spa的mountRootParcel方法和qiankun内部loadApp来实现应用加载
export function loadMicroApp<T extends object = {}>(
app: LoadableApp<T>,
configuration = frameworkConfiguration,
): MicroApp {
const { props, ...appConfig } = app;
return mountRootParcel(() => loadApp(appConfig, configuration), {
domElement: document.createElement('div'),
...props,
});
}
3. 启动应用 start
start的代码也没有几行，如下主要就是调用single-spa内部的start来启动应用，对应的为startSingleSpa此函数
export function start(opts: FrameworkConfiguration = {}) {
frameworkConfiguration = opts;
const {
prefetch = true,
sandbox = true,
singular = true,
urlRerouteOnly,
...importEntryOpts
} = frameworkConfiguration;
if (prefetch) {
prefetchApps(microApps, prefetch, importEntryOpts);
}
if (sandbox) {
if (!window.Proxy) {
console.warn('[qiankun] Miss window.Proxy, proxySandbox will degenerate into snapshotSandbox');
// 快照沙箱不支持非 singular 模式
if (!singular) {
console.error('[qiankun] singular is forced to be true when sandbox enable but proxySandbox unavailable');
frameworkConfiguration.singular = true;
}
}
}
startSingleSpa({ urlRerouteOnly });
frameworkStartedDefer.resolve();
}
网友评论