single-spa 源码解读
2023-07-16 17:44:11 6 举报AI智能生成
登录查看完整内容
single-spa 源码解读，对核心函数的运行机制进行罗列
作者其他创作
大纲/内容
监听 hashchange、popstate 事件，两者触发将调用 reroute 方法
如果已调用 start api，手动发布 popstate 事件触发 reroute 方法
如果未调用 start api，调用 reroute 方法
如果 urlRerouteOnly: false 或跳转前后路由不相同
重写 window.history.pushState、window.history.replaceState 方法（patchedUpdateState）
监听路由部分
window.singleSpaNavigate = navigateToUrl
apps=[]
validateRegisterWithConfig、validateRegisterWithArguments 校验参数是否符合要求
sanitizeLoadApp、sanitizeCustomProps、sanitizeActiveWhen 格式化参数值
name 微应用名称
loadApp 一个函数，返回 Promise，Promise 值应为生命周期
customProps 对象，基座传给微应用
activeWhen 路由匹配函数，返回布尔值
返回 registration 对象
sanitizeArguments 处理 registerApplication 的入参
校验是否有重名，有则抛出错误
registration
合并对象
apps.push
调用 reroute 方法
registerApplication 注册微应用
状态为 NOT_BOOTSTRAPPED、NOT_MOUNTED 且路由不活跃和调用 unloadApplication api 卸载的组件
appsToUnload
状态为 MOUNTED 且路由不活跃的
appsToUnmount
状态为 LOAD_ERROR 且路由活跃、符合超时重载的
状态为 NOT_LOADED、LOADING_SOURCE_CODE 且路由活跃的
appsToLoad
状态为 NOT_BOOTSTRAPPED、NOT_MOUNTED 且路由活跃的
appsToMount
getAppChanges 对 apps 进行分类
清除 appsToUnload 中的微应用
微应用状态变更为 UNMOUNTING
调用 unmount 生命周期函数
如果成功状态变更为 NOT_MOUNTED
如果失败状态变更为 SKIP_BECAUSE_BROKEN
卸载 appsToUnmount 中的微应用
把微应用状态变更为 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
如果加载失败
加载 appsToLoad 中的微应用
调用 mount 生命周期钩子
如果成功，状态变更为 MOUNTED
如果失败，状态变更为 MOUNTED，方便 toUnmountPromise 卸载它，并把状态变更为 SKIP_BECAUSE_BROKEN
挂载 appsToMount 中的微应用
调用 performAppChanges，处理 getAppChanges 返回的所有微应用
已调用 start api
调用 loadApps，处理 appsToLoad 预加载路由活跃的微应用
未调用 start api
是否已调用 start api
reroute 根据微应用状态进行分类处理
如果 urlRerouteOnly: true，则路由相同的情况下不会调用 reroute，以节省性能
5 秒内没调用 start 将会抛出警告
start 启用 single-spa
single-spa 源码解读
reroute 是一个管理 apps 的状态机，所有微应用的变更都由该函数触发
apps 用于存放所有微应用
提供给用户手动跳转路由，该属性也可以作为判断微应用的环境是独立运行还是 single-spa 运行的依据
收藏
收藏
0 条评论
回复 删除
下一页
