乾坤框架解析 - 对外api介绍

乾坤提供对外api如下：

// 注册的子应用列表
let microApps: RegistrableApp[] = [];

// 框架配置，对加载,挂载应用等的配置
// FrameworkConfiguration：{prefetch,excludesAccessPath,sandbox,singule, {getTemplate,fetch,getPublicPath, urlRerouteOnly}}
export let frameworkConfiguration: FrameworkConfiguration = {};

// 注册子应用，可传入一组子应用以及生命周期钩子，会将load方法以及app应用信息封装并加入到注册表microApps
// load方法加载应用脚本(只加载，不启动挂载)并返回该应用对应的生命周期钩子
export function registerMicroApps<T extends object = {}>(
  apps: Array<RegistrableApp<T>>,
  lifeCycles?: FrameworkLifeCycles<T>,
) {}

// 加载并挂载应用
export function loadMicroApp<T extends object = {}>(
  app: LoadableApp<T>,
  configuration?: FrameworkConfiguration,
  lifeCycles?: FrameworkLifeCycles<T>,
): MicroApp {}

// 启动乾坤框架，预渲染处理，沙箱校验，启动singspa内核，乾坤启动标识置为true
export function start(opts: FrameworkConfiguration = {}) {}

frameworkConfiguration

prefetch：默认为true，start乾坤框架时会将注册的应用预渲染处理

配置为 `true` 则会在第一个微应用 mount 完成后开始预加载其他微应用的静态资源

配置为 `'all'` 则主应用 `start` 后即开始预加载所有微应用静态资源

配置为 `string[]` 则会在第一个微应用 mounted 后开始加载数组内的微应用资源

配置为 `function` 则可完全自定义应用的资源加载时机 (首屏应用及次屏应用)

excludeAssetFilter：(assetUrl: string) => boolean - 可选，指定部分特殊的动态加载的微应用资源（css/js) 不被qiankun 劫持处理

在单实例模式下，你可以使用 `excludeAssetFilter` 参数来放行这部分资源请求，但是注意，被该选项放行的资源会逃逸
出沙箱，由此带来的副作用需要你自行处理。

若在多实例模式下使用 JSONP，单纯使用 `excludeAssetFilter` 并不能取得好的效果，因为各应用被沙箱所隔离；
你可以在主应用提供统一的 JSONP 工具，子应用调用主应用提供的该工具来曲线救国。

sandbox：boolean | { strictStyleIsolation?: boolean, experimentalStyleIsolation?: boolean } - 可选，是否开启沙箱，默认为 true。

 当配置为 `{ strictStyleIsolation: true }` 表示开启严格的样式隔离模式。这种模式下qiankun 会为每个微应用的容器包裹上
一个 [shadow dom](https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_shadow_DOM) 节点，从而
确保微应用的样式不会对全局造成影响。

 而除此以外，qiankun 还提供了一种实验性的方式来支持样式隔离`experimentalStyleIsolation` 被设置为 true 时，
qiankun 将会通过动态改写一个特殊的选择器约束来限制 css 的生效范围，应用的样式会按照如下模式改写：

singule：boolean | ((app: RegistrableApp<any>) => Promise<boolean>); - 可选，是否为单实例场景，单实例指的是同一时间只会渲染一个微应用。默认为 true。

以下是作用于import-html-entry的选项
fetch：Function - 可选，自定义的 fetch 方法，自定义载入模板，脚本

getTemplate: 子应用的html载入后，对该html处理的方法，可通过自己实现的 getTemplate 方法过滤微应用 HTML 模板中的异常脚本

getPublicPath：子应用的html模板中资源路径的处理方法
urlRerouteOnly：暂不知

registerMicroApps

里面核心方法是调用singspa的registerApplication，{name,load,activeWhen,customProps}存入内部应用数组中代表注册该子应用，load方法执行会加载子应用脚本并返回封装好各种逻辑的生命周期钩子

export function registerMicroApps<T extends object = {}>(
  apps: Array<RegistrableApp<T>>,
  lifeCycles?: FrameworkLifeCycles<T>,
) {
  // Each app only needs to be registered once
  // 与注册表里面比对找出还未注册的应用，去掉重名的应用
 // 将注册表更新，未注册的应用先加入到注册表中
  ........
  unregisteredApps.forEach(app => {
    // 名称，激活规则，路径匹配，加载方式，传入应用的数据或者方法
    const { name, activeRule, loader = noop, props, ...appConfig } = app;

    registerApplication({
      name,
      // 这个app的执行会去加载子应用，并返回挂载的方法
      app: async () => {
        // load子应用前端的钩子，这里执行页面loading钩子
        loader(true);
        // 等待框架启动
        await frameworkStartedDefer.promise;

        // 加载app，返回挂载接口，其他应用的配置
        const { mount, ...otherMicroAppConfigs } = await loadApp(
          { name, props, ...appConfig },
          frameworkConfiguration,
          lifeCycles,
        );

        return {
          // load前，一组挂载钩子，load后钩子, 这里处理loading
          mount: [async () => loader(true), ...toArray(mount), async () => loader(false)],
          ...otherMicroAppConfigs,
        };
      },
      activeWhen: activeRule,
      customProps: props,
    });
  });
}

loadMicroApp

加载并直接挂载切换子应用，调用核心方法是mountRootParcel，loadApp

// 加载指定子应用
export function loadMicroApp<T extends object = {}>(
  app: LoadableApp<T>,
  configuration?: FrameworkConfiguration,
  lifeCycles?: FrameworkLifeCycles<T>,
): MicroApp {
  const { props } = app;
  // 传入loadApp方法
  return mountRootParcel(() => loadApp(app, configuration ?? frameworkConfiguration, lifeCycles), {
    domElement: document.createElement('div'),
    ...props,
  });
}

start

启动乾坤框架,
1：正对注册的应用做预渲染处理
2：校验判断沙盒设置是否正确
3：启动singspa内核，里面会对注册好的应用做加载，挂载处理和维护
4：将乾坤框架状态置为true

export function start(opts: FrameworkConfiguration = {}) {
  frameworkConfiguration = { prefetch: true, singular: true, sandbox: true, ...opts };
  // 预渲染，沙盒，urlRerouteOnly，任何导入入口的配置
  const { prefetch, sandbox, singular, urlRerouteOnly, ...importEntryOpts } = frameworkConfiguration;

  // 如果是预渲染
  if (prefetch) {
    doPrefetchStrategy(microApps, prefetch, importEntryOpts);
  }

  // 检查如果设置了沙盒，window.Proxy必须有值
  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;
      }
    }
  }

  // 启动SingleSpa
  startSingleSpa({ urlRerouteOnly });
  // 乾坤状态置为启动状态
  frameworkStartedDefer.resolve();
}