前言

本來是想直接去學習下qiankun的源碼，但是qiankun是基于single-spa做的二次封裝，通過解決了single-spa的一些弊端和不足來幫助大家能更簡單、無痛的構建一個生產可用微前端架構系統。

所以我們應該先對single-spa有一個全面的認識和了解，了解它的不足和缺陷，到時候讓我們帶著問題去學習qiankun的底層，會有更大的幫助。

single-spa中文文檔

代碼庫地址 https://github.com/sunlianglife/single-spa-study，可以打開代碼再對照著閱讀，更容易理解

關于微前端

可以分別從single-spa的文檔介紹和qiankun的文檔介紹初步了解

目錄結構及相關文件總覽

我是先在github的clone的qiankun代碼，看了下package.json里面的single-spa的版本是5.9.2的，所以我就clone了對應版本的single-spa的代碼

多寫注釋，做筆記，編寫示例代碼+console調試

1、src/single-spa.js

single-spa的入口文件，其中就是暴露出single-spa的一些屬性和方法

2、src/start.js

應用注冊完之后，調用start()的邏輯

• started——應用是否啟動的標志
• start——開啟應用的方法
• isStarted——判斷應用是否啟動的方法

3、src/jquery-support.js

確保jquery的支持

4、utils

utils里面的工具函數在下一節開始會介紹到

5、src/parcels/mount-parcel.js

沙箱 Parcels
single-spa的一個高級特性，與框架無關，api與注冊應用一致，不同的是：parcel組件需要手動掛載，而不是通過 activity 方法被動激活。
single-spa中的微前端有兩種類型

• single-spa applications: application 模式下，子應用的切換(掛載、卸載)都是由修改路由觸發的，整個切換過程由 single-spa 框架控制，子應用僅需提供正確的生命周期方法即可。
• single-spa parcels: 不受路由控制，渲染組件的微前端。在 parcel 模式下，我們需要使用 single-spa 提供的 mountRootParcel 方法來手動掛載/更新/卸載組件

mountParcel 或 mountRootParcel 將立即掛載parcel并返回這個parcel對象。 需要卸載需要手動調用 parcel的 unmount.
mountRootParcel 和 mountParcel 的用法完全一樣，只不過 mountParcel 方法不能直接從 single-spa 中獲取，需要從子應用/組件的 mount 生命周期方法執行時傳入的 props 中獲取，

6、src/navigation/navigation-events.js

處理導航事件的文件，包括事件監聽，自定義事件創建、事件收集、不同應用之間的跳轉等

• capturedEventListeners——導航事件的收集
• routingEventsListeningTo——監聽到瀏覽器導航變化的兩種事件
• navigateToUrl——導航到對應url，實現在不同注冊應用之前的切換
• patchedUpdateState——當觸發replaceState和pushState方法時，對其進行一個增強
• createPopStateEvent——創建自定義事件
• window.addEventListener——對“hashchange”和“popstate”監聽
• parseUri——創建一個a連接的導航

7、src/navigation/reroute.js

reroute()在整個single-spa中就是負責改變app.status和執行在子應用中注冊的生命周期函數。

8、src/applications/app-errors.js

異常處理的方法文件

9、src/applications/app.helpers.js

• 定義應用各個狀態的常量
• isActive——應用是否加載完畢
• shouldBeActive——當前路由關聯的子應用是否激活
• toName——返回應用的名稱
• isParcel——是否為Parcel模式
• objectType——區分single-spa的兩種模式 parcel || application

10、src/applications/apps.js

注冊子應用的方法就這里面，其他大多數是對參數的一些校驗處理

• registerApplication——注冊子應用
• getAppChanges——將子應用按照狀態拆分
• getMountedApps——獲取已經掛載的應用名稱
• getAppNames——獲取應用的名稱
• getAppStatus——根據名稱獲取應用的狀態
• checkActivityFunctions——將會調用每個應用的 activeWhen 并且返回一個根據當前路徑判斷那些應用應該被掛載的列表
• unregisterApplication——應用卸載
• unloadApplication——移除已注冊的應用的目的是將其設置回 NOT_LOADED 狀態，
• immediatelyUnloadApp——立即卸載應用，調用卸載的生命周期函數
• validateRegisterWithArguments——參數異常處理
• validateRegisterWithConfig——驗證應用的配置信息是否合法，拋出異常
• validCustomProps——驗證注冊子應用的propps
• sanitizeArguments——格式化注冊子應用的屬性參數
• sanitizeLoadApp——驗證注冊子應用是的第二個參數一定是一個返回promise的函數
• sanitizeCustomProps——保證props存在
• sanitizeActiveWhen——得到一個函數，用來判斷當前地址和用戶的給定的baseUrl的比配關系，函數返回boolean
• pathToActiveWhen——函數返回boolean值，判斷當前路由是否匹配用戶給定的路徑
• toDynamicPathValidatorRegex——根據用戶提供的baseURL，生成正則表達式

11、src/applications/timeouts.js

超時的一些處理

12、src/devtools/devtools.js

暴露的屬性和方法，在入口文件中導出

// 暴露的方法集合 // window.__SINGLE_SPA_DEVTOOLS__ single-spa在window中掛載的變量 if (isInBrowser && window.__SINGLE_SPA_DEVTOOLS__) {window.__SINGLE_SPA_DEVTOOLS__.exposedMethods = devtools; }

13、src/lifecycles

這個文件夾下面的文件，從名字就能看出是子應用各個生命周期的執行方法，改變狀態，和src/applications/app.helpers.js中定義的狀態是對應的

源碼分析（摘取部分核心的方法，全部代碼可以去代碼倉庫上去看）

拿到一個陌生的項目，首先需要看的是package.json、README.md、config文件，從目錄能看出來single-spa是用rollup來打包的，打開之后在導出的配置信息里面找到入口文件src/single-spa.js

input: “./src/single-spa.js”

• 先介紹一下utils的工具函數，好多地方會用到
  

• 應用的狀態常量

// App statuses export const NOT_LOADED = "NOT_LOADED"; // single-spa應用注冊了，還未加載。 export const LOADING_SOURCE_CODE = "LOADING_SOURCE_CODE"; // 應用代碼正在被拉取。 export const NOT_BOOTSTRAPPED = "NOT_BOOTSTRAPPED"; // 應用已經加載，還未初始化。 export const BOOTSTRAPPING = "BOOTSTRAPPING"; // 生命周期函數已經執行，還未結束。 export const NOT_MOUNTED = "NOT_MOUNTED"; // 應用已經加載和初始化，還未掛載 export const MOUNTING = "MOUNTING"; // 應用正在被掛載，還未結束。 export const MOUNTED = "MOUNTED"; // 應用目前處于激活狀態，已經掛載到DOM元素上。 export const UPDATING = "UPDATING"; // 更新中 export const UNMOUNTING = "UNMOUNTING"; // 應用正在被卸載，還未結束 export const UNLOADING = "UNLOADING"; // 應用正在被移除，還未結束 export const LOAD_ERROR = "LOAD_ERROR"; // 應用的加載功能返回了一個rejected的Promise。這通常是由于下載應用程序的javascript包時出現網絡錯誤造成的。Single-spa將在用戶從當前路由導航并返回后重試加載應用。 export const SKIP_BECAUSE_BROKEN = "SKIP_BECAUSE_BROKEN"; // 應用在加載、初始化、掛載或卸載過程中拋出錯誤，由于行為不當而被跳過，因此被隔離。其他應用將正常運行。

01｜src/single-spa.js 入口文件

我們先來看single-spa給我們暴露了哪些屬性和方法

export { start } from "./start.js"; // 啟動的方法 export { ensureJQuerySupport } from "./jquery-support.js"; // 確保jquery支持，可以外部傳入 export {setBootstrapMaxTime, // 全局配置初始化超時時間。setMountMaxTime, // 全局配置掛載超時時間。setUnmountMaxTime, // 全局配置卸載超時時間setUnloadMaxTime, // 全局配置移除超時時間。 } from "./applications/timeouts.js"; export {registerApplication, // 注冊子應用的方法unregisterApplication, // 卸載子應用getMountedApps, // 返回當前已經掛載的子應用的名稱getAppStatus, // 參數：注冊應用的名字，返回：應用的狀態unloadApplication, // 移除已注冊的應用checkActivityFunctions, // 將會調用每個應用的 mockWindowLocation 并且返回一個根據當前路判斷那些應用應該被掛載的列表。getAppNames, // 獲取應用的名稱(任何狀態)pathToActiveWhen, // 判斷應用的前綴url，返回：boolean } from "./applications/apps.js"; export { navigateToUrl } from "./navigation/navigation-events.js"; // 實現在不同注冊應用之前的切換 export { triggerAppChange } from "./navigation/reroute.js"; // 返回一個Promise對象，當所有應用掛載/卸載時它執行 resolve/reject 方法，它一般被用來測試single-spa，在生產環境可能不需要。 export {addErrorHandler, // 添加異常處理，拋出錯誤removeErrorHandler, // 刪除給定的錯誤處理程序函數 } from "./applications/app-errors.js"; export { mountRootParcel } from "./parcels/mount-parcel.js"; // 將會創建并掛載一個 single-spa parcel.// 應用的狀態，已備注到app.helpers.js中 export {NOT_LOADED,LOADING_SOURCE_CODE,NOT_BOOTSTRAPPED,BOOTSTRAPPING,NOT_MOUNTED,MOUNTING,UPDATING,LOAD_ERROR,MOUNTED,UNMOUNTING,SKIP_BECAUSE_BROKEN, } from "./applications/app.helpers.js";import devtools from "./devtools/devtools"; // 暴露的方法集合 import { isInBrowser } from "./utils/runtime-environment.js"; // 判斷瀏覽器環境// 暴露的方法集合 // window.__SINGLE_SPA_DEVTOOLS__ single-spa在window中掛載的變量 if (isInBrowser && window.__SINGLE_SPA_DEVTOOLS__) {window.__SINGLE_SPA_DEVTOOLS__.exposedMethods = devtools; }

上面導出的和掛載到window上的都是我們可以在開發階段獲取到的
single-spa官網api解析

02｜注冊子應用 registerApplication ——src/applications/apps.js

/*** * @param {*} appNameOrConfig 子應用的名稱* @param {*} appOrLoadApp 應用的加載方法，返回一個應用或者promise* @param {*} activeWhen 純函數，返回應用是否激活的boolean* @param {*} customProps 傳遞給子應用的props* 每注冊一個子應用 registerApplication方 法就需要調用一次*/ export function registerApplication(appNameOrConfig,appOrLoadApp,activeWhen,customProps ) {// 格式化注冊子應用的參數const registration = sanitizeArguments(appNameOrConfig,appOrLoadApp,activeWhen,customProps);// 子應用注冊的防重復校驗if (getAppNames().indexOf(registration.name) !== -1)throw Error(formatErrorMessage(21,__DEV__ &&`There is already an app registered with name ${registration.name}`,registration.name));// 將各個應用的配置信息存儲到apps數組中apps.push(assign({loadErrorTime: null,status: NOT_LOADED,parcels: {},devtools: {overlays: {options: {},selectors: [],},},},registration));// 瀏覽器環境運行if (isInBrowser) {ensureJQuerySupport();reroute();} }

這里注意最后調用的方法reroute()后面會說到

能看出來注冊方法做的事情不多，就是對接受的參數做一個格式化校驗，然后將各個應用的配置信息存儲到apps數組中，最后執行reroute()方法。

文件里面的其他方法及屬性在第一節總覽里面有介紹，在具體的可以去代碼倉庫看詳細的，源碼分析這一塊只摘了大流程相關的

03｜啟動應用start()——src/start.js

在start被調用之前，應用先被下載，但不會初始化/掛載/卸載。

/*** reroute // reroute在整個single-spa就是負責改變app.status和執行在子應用中注冊的生命周期函數。* formatErrorMessage 格式化異常信息* setUrlRerouteOnly // 路由的變化，應用是否從定向* isInBrowser 是否是瀏覽器環境*/ import { reroute } from "./navigation/reroute.js"; import { formatErrorMessage } from "./applications/app-errors.js"; import { setUrlRerouteOnly } from "./navigation/navigation-events.js"; import { isInBrowser } from "./utils/runtime-environment.js";// 應用啟動的標志 let started = false;// 開啟的方法 /*** 必須在你single spa的配置中調用！在調用 start 之前, 應用會被加載, 但不會初始化，掛載或卸載。 * start 的原因是讓你更好的控制你單頁應用的性能。* 舉個栗子，你想立即聲明已經注冊過的應用（開始下載那些激活應用的代碼），* 但是實際上直到初始化AJAX（或許去獲取用戶的登錄信息）請求完成之前不會掛載它們 。 * 在這個例子里，立馬調用 registerApplication 方法，完成AJAX后再去調用 start方法會獲得最佳性能。* * @param {*} opts 屬性對象，可選 示例： {urlRerouteOnly: true}* urlRerouteOnly：默認為false的布爾值。如果設置為true，* 對history.pushState（）和history.replaceState（）的調用將不會觸發單個spa重新定向路由，* 除非客戶端路由已更改。在某些情況下，將此設置為true可以提高性能。有關更多信息，請閱讀https://github.com/single-spa/single-spa/issues/484。*/ export function start(opts) {started = true;if (opts && opts.urlRerouteOnly) {setUrlRerouteOnly(opts.urlRerouteOnly);}if (isInBrowser) {reroute();} }// 返回應用是否啟動的boolean值 export function isStarted() {return started; }// 在瀏覽器環境中 if (isInBrowser) {setTimeout(() => {// 如果應用注冊了，沒有調用start方法，拋出異常，“single-spa應用加載5000后尚未調用start方法。。。。”if (!started) {console.warn(formatErrorMessage(1,__DEV__ && // 是否是開發環境`singleSpa.start() has not been called, 5000ms after single-spa was loaded. Before start() is called, apps can be declared and loaded, but not bootstrapped or mounted.`));}}, 5000); }

這里重點只看start()方法：更改應用啟動的標志之后，也調用了reroute()方法

04｜以reroute()為切入點——src/navigation/reroute.js

reroute在整個single-spa就是負責改變app.status和執行在子應用中注冊的生命周期函數。

export function reroute(pendingPromises = [], eventArguments) {// ....省略展示if (isStarted()) {appChangeUnderway = true;appsThatChanged = appsToUnload.concat(appsToLoad,appsToUnmount,appsToMount);return performAppChanges();} else {appsThatChanged = appsToLoad;return loadApps();}// .... 省略展示 }

在調用start方法之前會執行loadApps()方法， 調用start方法之后執行performAppChanges()方法

1、調用start之前的邏輯

• 調用start之前也就是注冊應用時觸發的rerote方法

import { toLoadPromise } from "../lifecycles/load.js"; export function reroute(pendingPromises = [], eventArguments) {// ....省略展示const {appsToUnload, // 需要移除appsToUnmount, // 需要卸載appsToLoad, // 需要加載appsToMount, // 需要掛載} = getAppChanges(); // 得到各個狀態的應用return loadApps();// 加載注冊的子應用function loadApps() {return Promise.resolve().then(() => {const loadPromises = appsToLoad.map(toLoadPromise);return (Promise.all(loadPromises).then(callAllEventListeners)// there are no mounted apps, before start() is called, so we always return [].then(() => []).catch((err) => {callAllEventListeners(); // 遍歷執行路由收集的函數throw err;}));});} }

• getAppChanges()方法

// 將應用按照狀態拆分 export function getAppChanges() {const appsToUnload = [], // 需要移除的appsToUnmount = [], // 需要卸載的appsToLoad = [], // 需要加載的appsToMount = []; // 需要掛載的// We re-attempt to download applications in LOAD_ERROR after a timeout of 200 milliseconds// 超時200毫秒后，重新嘗試在LOAD_ERROR中下載應用程序const currentTime = new Date().getTime();apps.forEach((app) => {// 確保應用沒有被隔離 && 應用已激活const appShouldBeActive =app.status !== SKIP_BECAUSE_BROKEN && shouldBeActive(app);switch (app.status) {case LOAD_ERROR: // 加載錯誤，可能由于網絡原因if (appShouldBeActive && currentTime - app.loadErrorTime >= 200) {appsToLoad.push(app);}break;case NOT_LOADED:case LOADING_SOURCE_CODE:if (appShouldBeActive) {appsToLoad.push(app);}break;case NOT_BOOTSTRAPPED:case NOT_MOUNTED: // 掛載結束if (!appShouldBeActive && getAppUnloadInfo(toName(app))) {appsToUnload.push(app);} else if (appShouldBeActive) {appsToMount.push(app);}break;case MOUNTED:if (!appShouldBeActive) {appsToUnmount.push(app);}break;// all other statuses are ignored}});return { appsToUnload, appsToUnmount, appsToLoad, appsToMount }; }

• toLoadPromise

// 應用代碼正在被拉取的生命周期 /*** 通過微任務加載子應用，最終是return了一個promise出行，在注冊了加載子應用的微任務.* 更改app.status為LOAD_SOURCE_CODE => NOT_BOOTSTRAP，當然還有可能是LOAD_ERROR* 執行加載函數，并將props傳遞給加載函數，給用戶處理props的一個機會,因為這個props是一個完備的props* 驗證加載函數的執行結果，必須為promise，且加載函數內部必須return一個對象* 這個對象是子應用的，對象中必須包括各個必須的生命周期函數* 然后將生命周期方法通過一個函數包裹并掛載到app對象上* app加載完成，刪除app.loadPromise* @param {*} app */ export function toLoadPromise(app) {return Promise.resolve().then(() => {if (app.loadPromise) {// app已經在被加載return app.loadPromise;}// 狀態為NOT_LOADED和LOAD_ERROR的app才可以被加載if (app.status !== NOT_LOADED && app.status !== LOAD_ERROR) {return app;}app.status = LOADING_SOURCE_CODE;let appOpts, isUserErr;return (app.loadPromise = Promise.resolve().then(() => {// 執行app的加載函數，并給子應用傳遞props => 用戶自定義的customProps和內置的比如應用的名稱、singleSpa實例const loadPromise = app.loadApp(getProps(app));if (!smellsLikeAPromise(loadPromise)) {// The name of the app will be prepended to this error message inside of the handleAppError functionisUserErr = true;throw Error(formatErrorMessage(33,__DEV__ &&`single-spa loading function did not return a promise. Check the second argument to registerApplication('${toName(app)}', loadingFunction, activityFunction)`,toName(app)));}return loadPromise.then((val) => {app.loadErrorTime = null;// window.singleSpaappOpts = val;let validationErrMessage, validationErrCode;if (typeof appOpts !== "object") {validationErrCode = 34;if (__DEV__) {validationErrMessage = `does not export anything`;}}// 必須導出bootstrap生命周期函數 if (// ES Modules don't have the Object prototypeObject.prototype.hasOwnProperty.call(appOpts, "bootstrap") &&!validLifecycleFn(appOpts.bootstrap)) {validationErrCode = 35;if (__DEV__) {validationErrMessage = `does not export a valid bootstrap function or array of functions`;}}// 必須導出mount生命周期函數 if (!validLifecycleFn(appOpts.mount)) {validationErrCode = 36;if (__DEV__) {validationErrMessage = `does not export a mount function or array of functions`;}}// 必須導出unmount生命周期函數 if (!validLifecycleFn(appOpts.unmount)) {validationErrCode = 37;if (__DEV__) {validationErrMessage = `does not export a unmount function or array of functions`;}}const type = objectType(appOpts);if (validationErrCode) {let appOptsStr;try {appOptsStr = JSON.stringify(appOpts);} catch {}console.error(formatErrorMessage(validationErrCode,__DEV__ &&`The loading function for single-spa ${type} '${toName(app)}' resolved with the following, which does not have bootstrap, mount, and unmount functions`,type,toName(app),appOptsStr),appOpts);handleAppError(validationErrMessage, app, SKIP_BECAUSE_BROKEN);return app;}if (appOpts.devtools && appOpts.devtools.overlays) {app.devtools.overlays = assign({},app.devtools.overlays,appOpts.devtools.overlays);}app.status = NOT_BOOTSTRAPPED;// 在app對象上掛載生命周期方法，每個方法都接收一個props作為參數，方法內部執行子應用導出的生命周期函數，并確保生命周期函數返回一個promiseapp.bootstrap = flattenFnArray(appOpts, "bootstrap");app.mount = flattenFnArray(appOpts, "mount");app.unmount = flattenFnArray(appOpts, "unmount");app.unload = flattenFnArray(appOpts, "unload");app.timeouts = ensureValidAppTimeouts(appOpts.timeouts);delete app.loadPromise;return app;});}).catch((err) => {delete app.loadPromise;let newStatus;if (isUserErr) {newStatus = SKIP_BECAUSE_BROKEN;} else {newStatus = LOAD_ERROR;app.loadErrorTime = new Date().getTime();}handleAppError(err, app, newStatus);return app;}));}); }

2、調用start之后

• reroute

import { toLoadPromise } from "../lifecycles/load.js"; export function reroute(pendingPromises = [], eventArguments) {// ....省略展示const {appsToUnload, // 需要移除appsToUnmount, // 需要卸載appsToLoad, // 需要加載appsToMount, // 需要掛載} = getAppChanges(); // 得到各個狀態的應用appChangeUnderway = true;appsThatChanged = appsToUnload.concat(appsToLoad,appsToUnmount,appsToMount);return performAppChanges(); }

• performAppChanges

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;}// 移除應用 => 更改應用狀態，執行unload生命周期函數，執行一些清理動作// 其實一般情況下這里沒有真的移除應用const unloadPromises = appsToUnload.map(toUnloadPromise);// 卸載應用，更改狀態，執行unmount生命周期函數const unmountUnloadPromises = appsToUnmount.map(toUnmountPromise)// 卸載完然后移除，通過注冊微任務的方式實現.map((unmountPromise) => unmountPromise.then(toUnloadPromise));const allUnmountPromises = unmountUnloadPromises.concat(unloadPromises);const unmountAllPromise = Promise.all(allUnmountPromises);// 卸載全部完成后觸發一個事件unmountAllPromise.then(() => {window.dispatchEvent(new CustomEvent("single-spa:before-mount-routing-event",getCustomEventDetail(true)));});/* We load and bootstrap apps while other apps are unmounting, but we* wait to mount the app until all apps are finishing unmounting* 這個原因其實是因為這些操作都是通過注冊不同的微任務實現的，而JS是單線程執行，* 所以自然后續的只能等待前面的執行完了才能執行* 這里一般情況下其實不會執行，只有手動執行了unloadApplication方法才會二次加載*/const loadThenMountPromises = appsToLoad.map((app) => {return toLoadPromise(app).then((app) =>tryToBootstrapAndMount(app, unmountAllPromise));});/* 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);});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);});});}

05｜監聽路由變化

其實說了這么多，到底是在哪里監聽的路由變化呢，看這個文件src/navigation/navigation-events.js

if (isInBrowser) {// We will trigger an app change for any routing events.// 在瀏覽器環境對 hashchange 和 popstate的觸發做一個監聽window.addEventListener("hashchange", urlReroute);window.addEventListener("popstate", urlReroute);// Monkeypatch addEventListener so that we can ensure correct timingconst 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");if (window.singleSpaNavigate) {console.warn(formatErrorMessage(41,__DEV__ &&"single-spa has been loaded twice on the page. This can result in unexpected behavior."));} else {/* For convenience in `onclick` attributes, we expose a global function for navigating to* whatever an <a> tag's href is.*/window.singleSpaNavigate = navigateToUrl;} }

這段代碼不是放在方法里面導出調用的，而是直接這樣寫，是什么意思呢

文件通過引入建立依賴關系，在最后打包輸出為bundle文件時，這段代碼是存在全局作用域的，所用當引入single-spa的時候這些會自動執行

在使用 window.history 時，如果執行 pushState(repalceState) 方法，是不會觸發 popstate 事件的，而 single-spa 通過一種巧妙的方式，實現了執行 pushState(replaceState) 方法可觸發 popstate 事件

/*** 因為上面只對hashChange和popState事件做了監聽，所以當觸發replaceState和pushState方法時，對其進行一個增強，保證其內部邏輯不變的同時，執行自定義事件* @param {*} updateState ｜ 瀏覽器的replaceState和pushState方法觸發* @param {*} methodName ｜ 字符串 ‘replaceState‘ || 'pushState'* @returns */ function patchedUpdateState(updateState, methodName) {return function () {// 跳轉之前的urlconst urlBefore = window.location.href;// 劫持使用傳入的updateState方法，保證原來的功能不失效const result = updateState.apply(this, arguments);const urlAfter = window.location.href;if (!urlRerouteOnly || urlBefore !== urlAfter) {if (isStarted()) {// fire an artificial popstate event once single-spa is started,// so that single-spa applications know about routing that// occurs in a different application// 如過開啟了start方法，則不會調用reroute方法// window.dispatchEvent 觸發自定義事件，window.dispatchEvent(// 創建自定義事件createPopStateEvent(window.history.state, methodName));} else {// do not fire an artificial popstate event before single-spa is started,// since no single-spa applications need to know about routing events// outside of their own router.reroute([]);}}return result;}; }/*** 創建自定義事件* @param {*} state window.history.state* @param {*} originalMethodName 方法名 replaceState || pushState* @returns */ function createPopStateEvent(state, originalMethodName) {// https://github.com/single-spa/single-spa/issues/224 and https://github.com/single-spa/single-spa-angular/issues/49// We need a popstate event even though the browser doesn't do one by default when you call replaceState, so that// all the applications can reroute. We explicitly identify this extraneous event by setting singleSpa=true and// singleSpaTrigger=<pushState|replaceState> on the event instance.let evt;try {// 創建 popstate 自定義事件，當觸發 replaceState || pushState 時， 監聽popstate就能觸發evt = new PopStateEvent("popstate", { state });} catch (err) {// IE 11 compatibility https://github.com/single-spa/single-spa/issues/299// https://docs.microsoft.com/en-us/openspecs/ie_standards/ms-html5e/bd560f47-b349-4d2c-baa8-f1560fb489ddevt = document.createEvent("PopStateEvent");evt.initPopStateEvent("popstate", false, false, state);}evt.singleSpa = true;evt.singleSpaTrigger = originalMethodName;return evt; }

之所以能在執行 pushState、replaceState 方法時，觸發 popstate 事件，是因為 single-spa在這里 重寫了 window.history 的 pushState 和 replaceState 方法。在執行 pushState、replaceState 方法時，會通過原生方法 – PopStateEvent 構建一個事件對象，然后調用 window.dispatchEvent 方法，手動觸發 popState 事件。

06｜流程梳理

當我們啟動應用時，會調用registerApplication注冊子應用和start開啟應用，這兩個方法內部都調用了reroute函數

• 其中registerApplication注冊子應用，對應用的信息進行配置包裹到apps中
• start方法執行時通過urlRerouteOnly判斷是否要監聽url路由變化，然后調用reroute方法
• 與此同時全局對瀏覽器的hashchange 和 popstate的觸發做一個監聽，并通過createPopStateEvent自定義popstate事件的方式對replaceState和pushState進行重寫。所以我們通過history.replaceState或者history.pushState本質上還是觸發了我們監聽的popstate事件，從而觸發reroute。
• reroute方法內部調用getAppChanges，該方法會遍歷apps應用數組，根據shouldBeActive方法判斷window.location匹配的app激活規則判斷子應用是已激活，返回不同狀態的應用
• 然后reroute方法根據started變量的狀態走了兩個分支，如果started是未開啟狀態會調用loadApps函數執行app.loadApp來實際加載子應用。再調用callAllEventListeners遍歷執行路由收集的函數
• 如果started是開啟狀態則調用performAppChanges方法先卸載需要卸載的應用，再執行appsToLoad、appsToMount加載啟動掛載應用，期間子應用的生命周期函數會掛載到app配置對象的屬性上，在指定的情況下執行

關注的點 Q&A

1、single-spa 是如何工作的

single-spa 有兩種使用模式：application 和 parcel

• application

  application 模式下，先通過 registerApplication 注冊子應用，然后在基座應用掛載完成以后執行 start 方法, 這樣基座應用就可以根據 url 的變化來進行子應用切換，激活對應的子應用。

• parcel
  取到組件的生命周期方法，然后通過 mountRootParcel 方法直接掛載。

  mountRootParcel 方法會返回一個 parcel 實例對象，內部包含 update、unmount 方法。當我們需要更新組件時，直接調用 parcel 對象的 update 方法，就可以觸發組件的 update 生命周期方法；當我們需要卸載組件時，直接調用 parcel 對象的 unmount 方法。
  在執行 mountRootParcel 方法時，傳入的第二個參數，會作為組件 mount 生命周期方法的入參；在執行 parcel.update 方法時，傳入的參數，會作為組件 update 生命周期方法的入參。

2、如何通信

父組件 —— parcel

父組件通過props透傳

具體的前面也有簡單提到：在執行 mountRootParcel 方法時，傳入的第二個參數，會作為組件 mount 生命周期方法的入參；在執行 parcel.update 方法時，傳入的參數，會作為組件 update 生命周期方法的入參。
就像平時開發組件：子組件回調伏組件某個方法這種方式，我們在父組件定一個方法傳給parcel組件，parcel組件就可以在需要的時候執行這個方法通知父組件更新

parcel組件之間的通信

這種其實也是 parcel 組件和父組件之間的通信。 parcel 組件可以通過父組件傳遞的方法，觸發父組件的更新，父組件更新以后，在觸發另一個parcel 組件的更新。

基座應用和子應用的通信

在基座應用注冊子應用的時候，可以給每個子應用定義一個customProps，這個會作為mount方法的入參數，里面也可以包裹回調的方法，當子應用需要通知基座應用更新時，可以執行這個方法

子應用的通信

也是基于和基座應用通信的這種方式

3、為什么子應用導出的生命周期函數都是一個promise

子應用使用

export function mount(props) {return Promise.resolve().then(() => {// 子應用/組件具體的掛載邏輯...}) }

single-spa——src/lifecycles/mount.js中執行邏輯

// 應用掛載完的生命周期 export function toMountPromise(appOrParcel, hardFail) {return Promise.resolve().then(() => {if (appOrParcel.status !== NOT_MOUNTED) {return appOrParcel;}// single-spa其實在不同的階段提供了相應的自定義事件，讓用戶可以做一些事情if (!beforeFirstMountFired) {window.dispatchEvent(new CustomEvent("single-spa:before-first-mount"));beforeFirstMountFired = true;}// 執行子應用的生命周期方法return reasonableTime(appOrParcel, "mount").then(() => {appOrParcel.status = MOUNTED;if (!firstMountFired) {window.dispatchEvent(new CustomEvent("single-spa:first-mount"));firstMountFired = true;}return appOrParcel;}).catch((err) => {// If we fail to mount the appOrParcel, we should attempt to unmount it before putting in SKIP_BECAUSE_BROKEN// We temporarily put the appOrParcel into MOUNTED status so that toUnmountPromise actually attempts to unmount it// instead of just doing a no-op.appOrParcel.status = MOUNTED;return toUnmountPromise(appOrParcel, true).then(setSkipBecauseBroken,setSkipBecauseBroken);function setSkipBecauseBroken() {if (!hardFail) {handleAppError(err, appOrParcel, SKIP_BECAUSE_BROKEN);return appOrParcel;} else {throw transformErr(err, appOrParcel, SKIP_BECAUSE_BROKEN);}}});}); }

4、single-spa 生命周期 hooks

single-spa 定義了一些生命周期 hooks，可以幫助我們在子應用/組件生命周期中執行自定義操作，這些 hooks 包括:

• single-spa:before-first-mount：第一次掛載子應用/組件之前觸發，之后就不會再觸發
• single-spa:first-mount：第一次掛載子應用/組件之后觸發，之后就不會再觸發
• single-spa:before-no-app-change：application 模式下，修改 url 會觸發子應用的切換。如果路由注冊表中沒有匹配當前 url 的子應用，那么 single-spa:before-no-app-change 事件會觸發
• single-spa:before-app-change：修改 url 導致子應用切換時，如果路由注冊表中有匹配當前 url 的子應用， single-spa:before-app-change 事件會觸發。
• single-spa:before-routing-event：application 模式下， hashchange、popstate 觸發以后，single-spa:before-routing-event 事件就會觸發。
• single-spa:before-mount-routing-event：application 模式下, 舊的子應用卸載完成之后，新的子應用掛載之前觸發。
• single-spa:no-app-change：application 模式下，執行performAppChanges方法里面，在single-spa:before-app-change觸發以后觸發
• single-spa:app-change：application 模式下，執行performAppChanges方法里面，在single-spa:before-app-change觸發以后觸發
• single-spa:routing-event：application 模式下， single-spa:app-change / single-spa:no-app-change 觸發以后， single-spa:routing-event 觸發。

例如：single-spa——src/lifecycles/mount.js

// single-spa其實在不同的階段提供了相應的自定義事件，讓用戶可以做一些事情if (!beforeFirstMountFired) {window.dispatchEvent(new CustomEvent("single-spa:before-first-mount"));beforeFirstMountFired = true;}

這樣我們可以自定義使用

window.addEventListener('single-spa:before-first-mount', event => {...})

不足

• single-spa 采用 JS Entry 的方式接入微應用，對微應用的入侵太強
  ○ 微應用路由改造，添加一個特定的前綴
  ○ 微應用入口改造，掛載點變更和生命周期函數導出
  ○ 打包工具配置更改
• 通信問題
  通過注冊微應用時給微應用注入一些狀態信息，剩下的只能用戶自己去實現，實現方式上面也有提到幾種通信方式
• 資源預加載
  single-spa會將微應用打包成一個js文件
• js隔離
  js全局對象污染的問題
• 樣式隔離問題
  只能通過約定命名的方式去做規范實現

結尾

single-spa是一個很好的微前端基礎框架，阿里的qiankun就是基于single-spa實現的，在它的基礎上做了一層封裝和解決了一些缺陷。接下來會去學習下qiankun的源碼。

總結

以上是生活随笔為你收集整理的微前端——single-spa源码学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。