single-spa 源码解读
2023-07-16 17:44:11 6 举报AI智能生成
single-spa 源码解读，对核心函数的运行机制进行罗列
作者其他创作
大纲/内容
监听路由部分
监听 hashchange、popstate 事件，两者触发将调用 reroute 方法
重写 window.history.pushState、window.history.replaceState 方法（patchedUpdateState）
如果 urlRerouteOnly: false 或跳转前后路由不相同
如果已调用 start api，手动发布 popstate 事件触发 reroute 方法
如果未调用 start api，调用 reroute 方法
window.singleSpaNavigate = navigateToUrl
apps=[]
registerApplication 注册微应用
sanitizeArguments 处理 registerApplication 的入参
validateRegisterWithConfig、validateRegisterWithArguments 校验参数是否符合要求
sanitizeLoadApp、sanitizeCustomProps、sanitizeActiveWhen 格式化参数值
返回 registration 对象
name 微应用名称
loadApp 一个函数，返回 Promise，Promise 值应为生命周期
customProps 对象，基座传给微应用
activeWhen 路由匹配函数，返回布尔值
校验是否有重名，有则抛出错误
apps.push
合并对象
{
loadErrorTime: null,
status: NOT_LOADED,
parcels: {},
devtools: {
overlays: {
options: {},
selectors: [],
},
},
}
loadErrorTime: null,
status: NOT_LOADED,
parcels: {},
devtools: {
overlays: {
options: {},
selectors: [],
},
},
}
registration
调用 reroute 方法
reroute 根据微应用状态进行分类处理
getAppChanges 对 apps 进行分类
appsToUnload
状态为 NOT_BOOTSTRAPPED、NOT_MOUNTED 且路由不活跃和调用 unloadApplication api 卸载的组件
appsToUnmount
状态为 MOUNTED 且路由不活跃的
appsToLoad
状态为 LOAD_ERROR 且路由活跃、符合超时重载的
状态为 NOT_LOADED、LOADING_SOURCE_CODE 且路由活跃的
appsToMount
状态为 NOT_BOOTSTRAPPED、NOT_MOUNTED 且路由活跃的
是否已调用 start api
已调用 start api
调用 performAppChanges，处理 getAppChanges 返回的所有微应用
清除 appsToUnload 中的微应用
卸载 appsToUnmount 中的微应用
微应用状态变更为 UNMOUNTING
调用 unmount 生命周期函数
如果成功状态变更为 NOT_MOUNTED
如果失败状态变更为 SKIP_BECAUSE_BROKEN
加载 appsToLoad 中的微应用
把微应用状态变更为 LOADING_SOURCE_CODE
调用 app.loadApp，把 props 作为 loadApp 的参数传入，使用户进一步处理 props，根据返回结果配置微应用生命周期
如果加载成功把微应用状态变更为 NOT_BOOTSTRAPPED
如果加载失败
用户自定义的 loadApp 没有返回 Promise，状态变更为 SKIP_BECAUSE_BROKEN
loadApp 返回的 Promise 结果没有包含 bootstrap、mount、unmount 其中之一，状态变更为 SKIP_BECAUSE_BROKEN
单纯的加载失败，状态变更为 LOAD_ERROR
挂载 appsToMount 中的微应用
调用 mount 生命周期钩子
如果成功，状态变更为 MOUNTED
如果失败，状态变更为 MOUNTED，方便 toUnmountPromise 卸载它，并把状态变更为 SKIP_BECAUSE_BROKEN
未调用 start api
调用 loadApps，处理 appsToLoad 预加载路由活跃的微应用
start 启用 single-spa
调用 reroute 方法
如果 urlRerouteOnly: true，则路由相同的情况下不会调用 reroute，以节省性能
5 秒内没调用 start 将会抛出警告
收藏
收藏
0 条评论
下一页
