single-spa 源码解析
single-spa 源码解析
single-spa是一种微前端的实现方案。阿里的qiankun其实是基于这个项目做了二次开发，其实是做了个拓展，提供了html解析与js沙盒两个功能。本文从single-spa的代码实现角度解析一下它的实现原理。
前提假设
single-spa首先要求每个子应用需要提供bootstrap,mount,unmount,update这四个方法，这样每个子应用从single-spa的角度而言，就是一个具有四个方法的对象。
实现的大体原理
single-spa是基于路由来决定每个子应用的加载与卸载。所以，它是通过拦截与监听浏览器的路由事件做到的。具体的可以分为以下两个方面。
- 监听浏览器的popstate,hashchange这两个事件，同时它拦截了其他应用对于这两个事件的监听。
- 它也对于改变路由的两个API也进行了更换window.history.pushState(),window.history.replaceState()。这样，路由变化的事件被single-spa接管，改变路由的API也被接管。所以，整个路由都被single-spa接管。这个是single-spa工作的核心。下面是源码的片段
export const routingEventsListeningTo = ["hashchange", "popstate"];
// We will trigger an app change for any routing events.
window.addEventListener("hashchange", urlReroute);
window.addEventListener("popstate", urlReroute);
// Monkeypatch addEventListener so that we can ensure correct timing
const originalAddEventListener = window.addEventListener;
const originalRemoveEventListener = window.removeEventListener;
window.addEventListener = function (eventName, fn) {
if (typeof fn === "function") {
if (
routingEventsListeningTo.indexOf(eventName) >= 0 &&
!find(capturedEventListeners[eventName], (listener) => listener === fn)
) {
capturedEventListeners[eventName].push(fn);
return;
}
}
return originalAddEventListener.apply(this, arguments);
};
window.removeEventListener = function (eventName, listenerFn) {
if (typeof listenerFn === "function") {
if (routingEventsListeningTo.indexOf(eventName) >= 0) {
capturedEventListeners[eventName] = capturedEventListeners[
eventName
].filter((fn) => fn !== listenerFn);
return;
}
}
return originalRemoveEventListener.apply(this, arguments);
};
window.history.pushState = patchedUpdateState(
window.history.pushState,
"pushState"
);
window.history.replaceState = patchedUpdateState(
window.history.replaceState,
"replaceState"
);
工作的核心
single-spa在接管路由后，当路由发生变化，其实也就是popstate,hashchange这两个事件发生的时候。single-spa会去计算更新每个app的状态。代码里面叫reroute()。这个方法的逻辑就是计算每个app的状态，然后，首先卸载inactive的app.接着挂载需要激活的app.同时会发布一些生命周期的事件以及原始的popstate,hashchange事件。下面是最主要的代码片段。忽略了部分细节
function performAppChanges() {
return Promise.resolve().then(() => {
// https://github.com/single-spa/single-spa/issues/545
window.dispatchEvent(
new CustomEvent(
appsThatChanged.length === 0
? "single-spa:before-no-app-change"
: "single-spa:before-app-change",
getCustomEventDetail(true)
)
);
window.dispatchEvent(
new CustomEvent(
"single-spa:before-routing-event",
getCustomEventDetail(true, { cancelNavigation })
)
);
// 在这个时间点，我们是有可能取消这个事件的
if (navigationIsCanceled) {
window.dispatchEvent(
new CustomEvent(
"single-spa:before-mount-routing-event",
getCustomEventDetail(true)
)
);
finishUpAndReturn();
navigateToUrl(oldUrl);
return;
}
// 首先卸载不用的app,其实就调用app.unload 方法
const unloadPromises = appsToUnload.map(toUnloadPromise);
// 摘出不用的app， 调用 app.unmount方法
const unmountUnloadPromises = appsToUnmount
.map(toUnmountPromise)
.map((unmountPromise) => unmountPromise.then(toUnloadPromise));
const allUnmountPromises = unmountUnloadPromises.concat(unloadPromises);
const unmountAllPromise = Promise.all(allUnmountPromises);
// 完成了不用的app 的摘除与卸载， 发布对应的事件
unmountAllPromise.then(() => {
window.dispatchEvent(
new CustomEvent(
"single-spa:before-mount-routing-event",
getCustomEventDetail(true)
)
);
});
//加载使用的app,加载完后调用app.bootstrap(),这些都是异步的
/* We load and bootstrap apps while other apps are unmounting, but we
* wait to mount the app until all apps are finishing unmounting
*/
const loadThenMountPromises = appsToLoad.map((app) => {
return toLoadPromise(app).then((app) =>
tryToBootstrapAndMount(app, unmountAllPromise)
);
});
// bootstrap 并且mount 应该active的app
/* These are the apps that are already bootstrapped and just need
* to be mounted. They each wait for all unmounting apps to finish up
* before they mount.
*/
const mountPromises = appsToMount
.filter((appToMount) => appsToLoad.indexOf(appToMount) < 0)
.map((appToMount) => {
return tryToBootstrapAndMount(appToMount, unmountAllPromise);
});
// 当不用的应用卸载后，我们会通知所有监听popstate,hashchange的监听者。
// 当所有的应用加载后，我们会发布single-spa:app-change, single-spa:routing-event，
return unmountAllPromise
.catch((err) => {
callAllEventListeners();
throw err;
})
.then(() => {
/* Now that the apps that needed to be unmounted are unmounted, their DOM navigation
* events (like hashchange or popstate) should have been cleaned up. So it's safe
* to let the remaining captured event listeners to handle about the DOM event.
*/
callAllEventListeners();
return Promise.all(loadThenMountPromises.concat(mountPromises))
.catch((err) => {
pendingPromises.forEach((promise) => promise.reject(err));
throw err;
})
.then(finishUpAndReturn);
});
});
}
上面就是single-spa工作的最核心的原理。
上面的代码就是针对registerApplicaiton(),start()以后的single-spa的工作流程。是不是非常简单。不过这个思想确实非常的新颖。不过这个里面有个问题，就是它要求所有的应用自己抽象成那四个方法。而且所有的应用都在同一个js的上下文中执行，所有很容易会出现互相打架的情况。qiankun 提供的js沙盒，就是为了这个准备的。对应用之间做了隔离。
