微前端 Micro-Frontnds - Single-SPA Application API

微前端 Micro-Frontnds - Single-SPA Application API

Application API

import {
    registerApplication, start } from 'single-spa';
// or
import * as singleSpa from 'single-spa';

registerApplication

使用在 root config 中，用于注册应用
Simple arguments

singleSpa.registerApplication(
	'app-name',
	() => System.import('appName'),
	location => location.pathname.startsWith('app')
)

Arguments
- appName: string 应用的名称
- applicationOrLoadingFn：() => <Function | Promise> 一个返回应用或 Promise 的函数
- activeFn: (location) => boolean 纯函数，以 window.location 为参数，返回true 表示激活该应用，false 表示卸载该应用
- customProps?: Object | () => Object 可选，需要传递给应用生命周期钩子的自定义参数

Configuration Object

singleSpa.registerApplication({
   
	name: 'app-name',
	app: () => System.import('appName'),
	activeWhen: '/app',
	customProps: {
   
		authToken: 'xxxxx'
	}
})

Arguments
- name: string 应用的名称
- app: Application | () => Application | Promise 应用
- activeWhen: string | (location) => boolean | (string | (location) => boolean)[] 什么时候激活应用与上面的一样
- customProps?: Object | () => Object 可选，需要传递给应用生命周期钩子的自定义参数

start

让 single-spa 对应用进行控制，让您可以控制单页应用程序的性能

singleSpa.start()

singleSpa.start({
   
	urlRerouteOnly: true
})

Arguments
一个可选的对象，这个对象有 urlRerouteOnly 属性
urlRerouteOnly：一个默认为false的布尔值。如果设置为true，则除非更改了客户端路由，否则对history.pushState（）和history.replaceState（）的调用将不会触发单spa重新路由。在某些情况下，将此值设置为true可能会更好。

triggerAppChange

手动触发 single-spa 加载应用

singleSpa.triggerAppChange();

navigatToUrl

在已注册的应用之间执行 url 导航，而不需要处理 event.preventDefault() pushState triggerAppChange

// Three ways of using navigateToUrl
singleSpa.navigateToUrl("/new-url");
singleSpa.navigateToUrl(document.querySelector('a'));
document.querySelector('a').addEventListener(singleSpa.navigateToUrl);

Arguments
navigationObj: string | context | DOMEvent
- url 字符串
- 带有 href 属性的标签，例如 a 标签
- 一个具有href属性的DOMElement上的click事件的DOMEvent对象；

getMountedApps

获取挂载（MOUNTED）应用的名字，返回一个字符串数组

const mountedAppNames = singleSpa.getMountedApps();
console.log(mountedAppNames); // ['app1', 'app2', 'navbar']

getAppNames

获取所有注册的应用，与应用的状态无关

const appNames = singleSpa.getAppNames();
console.log(appNames); // ['app1', 'app2', 'app3', 'navbar']

getAppStatus

获取指定应用的状态

const status = singleSpa.getAppStatus('app1');
console.log(status); // one of many statuses (see list below). e.g. MOUNTED

Arguments
appName: string 注册应用的名字

Returns
appStatus: string | null , null 表示应用不存在
- NOT_LOADEDapp ：应用已经注册，但是还没有加载好
- LOADING_SOURCE_CODE：已经获取到源代码
- NOT_BOOTSTRAPPED： 应用已经加载好，但是还没开始初始化
- BOOTSTRAPPING：已经调用 bootstrap 生命周期钩子，但是还没执行完
- NOT_MOUNTED：已经执行好 bootstrap ，但是还没挂载
- MOUNTING：正在执行 mount 钩子
- MOUNTED：应用已经挂载在 DOM 上了
- UNMOUNTING：正在执行 unmount
- UNLOADING：正在执行 unloading
- SKIP_BECAUSE_BROKEN：应用在加载，引导，安装或卸载期间引发了错误，并且由于行为不当而被跳过，因此已被隔离。其他应用将继续正常运行。
- LOAD_ERROR：应用在 loading 方法中返回了 reject 的 Promise，这通常是由于尝试下载应用程序的JavaScript软件包的网络错误。

unloadApplication

卸载已注册的应用程序的目的是将其设置回NOT_LOADED状态，这意味着它将在下次需要安装时重新引导。这样做的主要用例是允许热重载整个已注册的应用程序，但是无论何时您要重新引导应用程序，unloadApplication都会很有用。

// Unload the application right now, without waiting for it to naturally unmount.
singleSpa.unloadApplication('app1');

// Unload the application only after it naturally unmounts due to a route change.
singleSpa.unloadApplication('app1', {
   waitForUnmount: true});

当调用 unloadApplication 后 Single-spa 会执行如下几步
1. 在要卸载的注册应用程序上调用卸载生命周期。
2. 设置 App 状态为 NOT_LOADED
3. 触发重新路由，在这期间 single-spa 会挂载刚卸载的应用
因为调用unloadApplication时可能会挂载已注册的应用程序，所以您可以指定是要立即卸载还是要等待直到不再挂载该应用程序。这是通过waitForUnmount选项完成的。

Arguments
appName: string 应用名称
Options?: { waitForUnmoun: boolean = false} 可选对象参数，默认 single-spa 会立即卸载指定应用，如果设置为 true，single-spa 会等应用不处于 MOUNTED 状态的时候进行卸载。

unregisterApplication

unregisterApplication函数将卸载，卸载和注销应用程序,一旦调用，应用不会再挂载

import {
    unregisterApplication } from 'single-spa';

unregisterApplication('app1')