引言
前一段時間, 正好在做微前端的接入和微前端管理平臺的相關事項， 而我們當前使用的微前端框架則是 qiankun, 他是這樣介紹自己的:
qiankun 是一個基于 single-spa 的微前端實作庫，旨在幫助大家能更簡單、無痛的構建一個生產可用微前端架構系統，
所以本文基于 single-spa 原始碼, 來介紹 single-spa
當前使用版本 5.9.4
啟動
在官方 demo 中, 要運行此框架需要做的是有這四步:
- 準備好子應用的檔案, 需要拋出一些生命周期函式
- 一個子應用 app1 的加載函式(可以是 import 異步加載, 也可以是 ajax/fetch 加載)
- 注冊子應用
- 啟動程式
app1.js:
export function bootstrap(props) {
//初始化時觸發
}
export function mount(props) {
// 應用掛載完畢之后觸發
}
export function unmount(props) {
// 應用卸載之后觸發
}
main.js:
import * as singleSpa from 'single-spa'
const name = 'app1';
const app = () => import('./app1/app1.js'); // 一個加載函式
const activeWhen = '/app1'; // 當路由為 app1 時, 會觸發微應用的加載
// 注冊應用
singleSpa.registerApplication({name, app, activeWhen});
// 啟動
singleSpa.start();
檔案結構
single-spa 的檔案結構為:
├── applications
│ ├── app-errors.js
│ ├── app.helpers.js
│ ├── apps.js
│ └── timeouts.js
├── devtools
│ └── devtools.js
├── jquery-support.js
├── lifecycles
│ ├── bootstrap.js
│ ├── lifecycle.helpers.js
│ ├── load.js
│ ├── mount.js
│ ├── prop.helpers.js
│ ├── unload.js
│ ├── unmount.js
│ └── update.js
├── navigation
│ ├── navigation-events.js
│ └── reroute.js
├── parcels
│ └── mount-parcel.js
├── single-spa.js
├── start.js
└── utils
├── assign.js
├── find.js
└── runtime-environment.js
registerApplication
我們先從注冊應用開始看起
function registerApplication(
appNameOrConfig,
appOrLoadApp,
activeWhen,
customProps
) {
// 資料整理, 驗證傳參的合理性, 最后整理得到資料源:
// {
// name: xxx,
// loadApp: xxx,
// activeWhen: xxx,
// customProps: xxx,
// }
const registration = sanitizeArguments(
appNameOrConfig,
appOrLoadApp,
activeWhen,
customProps
);
// 如果有重名,則拋出錯誤, 所以 name 應該是要保持唯一值
if (getAppNames().indexOf(registration.name) !== -1)
throw Error('xxx'); // 這里省略具體錯誤
// 往 apps 中添加資料
// apps 是 single-spa 的一個全域變數, 用來存盤當前的應用資料
apps.push(
assign(
{
// 預留值
loadErrorTime: null,
status: NOT_LOADED, // 默認是 NOT_LOADED , 也就是待加載的狀態
parcels: {},
devtools: {
overlays: {
options: {},
selectors: [],
},
},
},
registration
)
);
// 判斷 window 是否為空, 進入條件
if (isInBrowser) {
ensureJQuerySupport(); // 確保 jq 可用
reroute();
}
}
reroute
reroute 是 single-spa 的核心函式, 在注冊應用時呼叫此函式的作用, 就是將應用的 promise 加載函式, 注入一個待加載的陣列中 等后面正式啟動時再呼叫, 類似于 ()=>import('xxx')
主要流程: 判斷是否符合加載條件 -> 開始加載代碼
export function reroute(pendingPromises = [], eventArguments) {
if (appChangeUnderway) { // 一開始默認是 false
// 如果是 true, 則回傳一個 promise, 在佇列中添加 resolve 引數等等
return new Promise((resolve, reject) => {
peopleWaitingOnAppChange.push({
resolve,
reject,
eventArguments,
});
});
}
const {
appsToUnload,
appsToUnmount,
appsToLoad,
appsToMount,
} = getAppChanges();
// 遍歷所有應用陣列 apps , 根據 app 的狀態, 來分類到這四個陣列中
// 會根據 url 和 whenActive 判斷是否該 load
// unload , unmount, to load, to mount
let appsThatChanged,
navigationIsCanceled = false,
oldUrl = currentUrl,
newUrl = (currentUrl = window.location.href);
// 存盤著一個閉包變數, 是否已經啟動, 在注冊步驟中, 是未啟動的
if (isStarted()) {
// 省略, 當前是未開始的
} else {
// 未啟動, 直接回傳 loadApps, 他的定義在下方
appsThatChanged = appsToLoad;
return loadApps();
}
function cancelNavigation() {
navigationIsCanceled = true;
}
// 回傳一個 resolve 的 promise
// 將需要加載的應用, map 成一個新的 promise 陣列
// 并且用 promise.all 來回傳
// 不管成功或者失敗, 都會呼叫 callAllEventListeners 函式, 進行路由通知
function loadApps() {
return Promise.resolve().then(() => {
// toLoadPromise 主要作用在甲方有講述, 主要來定義資源的加載, 以及對應的回呼
const loadPromises = appsToLoad.map(toLoadPromise);
// 通過 Promise.all 來執行, 回傳的是 app.loadPromise
// 這是資源加載
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;
})
);
});
}
}
toLoadPromise
注冊流程中 reroute 中的主要執行函式
主要功能是賦值 loadPromise 給 app, 其中 loadPromise 函式中包括了: 執行函式、來加載應用的資源、定義加載完畢的回呼函式、狀態的修改、還有加載錯誤的一些處理
export function toLoadPromise(app) {
return Promise.resolve().then(() => {
// 是否重復注冊 promise 加載了
if (app.loadPromise) {
return app.loadPromise;
}
// 剛注冊的就是 NOT_LOADED 狀態
if (app.status !== NOT_LOADED && app.status !== LOAD_ERROR) {
return app;
}
// 修改狀態為, 加載原始碼
app.status = LOADING_SOURCE_CODE;
let appOpts, isUserErr;
// 回傳的是 app.loadPromise
return (app.loadPromise = Promise.resolve()
.then(() => {
// 這里呼叫的了 app的 loadApp 函式(由外部傳入的), 開始加載資源
// getProps 用來判斷 customProps 是否合法, 最后傳值給 loadApp 函式
const loadPromise = app.loadApp(getProps(app));
// 判斷 loadPromise 是否是一個 promise
if (!smellsLikeAPromise(loadPromise)) {
// 省略報錯
isUserErr = true;
throw Error("...");
}
return loadPromise.then((val) => {
// 資源加載成功
app.loadErrorTime = null;
appOpts = val;
let validationErrMessage, validationErrCode;
// 省略對于資源回傳結果的判斷
// 比如appOpts是否是物件, appOpts.mount appOpts.bootstrap 是否是函式, 等等
// ...
// 修改狀態為, 未進入引導
// 同時將資源結果的函式賦值, 以備后面執行
app.status = NOT_BOOTSTRAPPED;
app.bootstrap = flattenFnArray(appOpts, "bootstrap");
app.mount = flattenFnArray(appOpts, "mount");
app.unmount = flattenFnArray(appOpts, "unmount");
app.unload = flattenFnArray(appOpts, "unload");
app.timeouts = ensureValidAppTimeouts(appOpts.timeouts);
// 執行完畢之后洗掉 loadPromise
delete app.loadPromise;
return app;
});
})
.catch((err) => {
// 報錯也會洗掉 loadPromise
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;
}));
});
}
start
注冊完應用之后, 最后是 singleSpa.start(); 的執行
start 的代碼很簡單:
// 一般來說 opts 是不傳什么東西的
function start(opts) {
// 主要作用還是將標記符 started設定為 true 了
started = true;
if (opts && opts.urlRerouteOnly) {
// 使用此引數可以人為地觸發事件 popstate
setUrlRerouteOnly(opts.urlRerouteOnly);
}
if (isInBrowser) {
reroute();
}
}
reroute
上述已經講過注冊時 reroute 的一些代碼了, 這里會忽略已講過的一些東西
function reroute(pendingPromises = [], eventArguments) {
const {
appsToUnload,
appsToUnmount,
appsToLoad,
appsToMount,
} = getAppChanges();
let appsThatChanged,
navigationIsCanceled = false,
oldUrl = currentUrl,
newUrl = (currentUrl = window.location.href);
if (isStarted()) {
// 這次開始執行此處
appChangeUnderway = true;
// 合并狀態需要變更的 app
appsThatChanged = appsToUnload.concat(
appsToLoad,
appsToUnmount,
appsToMount
);
// 回傳 performAppChanges 函式
return performAppChanges();
}
}
performAppChanges
在啟動后,就會觸發此函式 performAppChanges, 并回傳結果
本函式的作用主要是事件的觸發, 包括自定義事件和子應用中的一些事件
function performAppChanges() {
return Promise.resolve().then(() => {
// 觸發自定義事件, 關于 CustomEvent 我們再下方詳述
// 當前事件觸發 getCustomEventDetail
// 主要是 app 的狀態, url 的變更, 引數等等
window.dispatchEvent(
new CustomEvent(
appsThatChanged.length === 0
? "single-spa:before-no-app-change"
: "single-spa:before-app-change",
getCustomEventDetail(true)
)
);
// 省略類似事件
// 除非在上一個事件中呼叫了 cancelNavigation, 才會進入這一步
if (navigationIsCanceled) {
window.dispatchEvent(
new CustomEvent(
"single-spa:before-mount-routing-event",
getCustomEventDetail(true)
)
);
// 將 peopleWaitingOnAppChange 的資料重新執行 reroute 函式 reroute(peopleWaitingOnAppChange)
finishUpAndReturn();
// 更新 url
navigateToUrl(oldUrl);
return;
}
// 準備卸載的 app
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)
)
);
});
// 執行 bootstrap 生命周期, tryToBootstrapAndMount 確保先執行 bootstrap
const loadThenMountPromises = appsToLoad.map((app) => {
return toLoadPromise(app).then((app) =>
tryToBootstrapAndMount(app, unmountAllPromise)
);
});
// 執行 mount 事件
const mountPromises = appsToMount
.filter((appToMount) => appsToLoad.indexOf(appToMount) < 0)
.map((appToMount) => {
return tryToBootstrapAndMount(appToMount, unmountAllPromise);
});
// 其他的部分不太重要, 可省略
});
}
CustomEvent
CustomEvent 是一個原生 API, 這里稍微介紹下
在某些場景中, 我們會經常做出一些模擬點擊的行為, 比如這樣:
<button id="submit" onclick="alert('Click!');">btn</button>
<script>
const btn = document.getElementById('submit');
btn.click()
</script>
通過 CustomEvent 也能實作這種事件:
<button id="submit" onclick="alert('Click!');">btn</button>
<script>
const btn = document.getElementById('submit');
btn.dispatchEvent(new CustomEvent('click'))
// 使用 btn.dispatchEvent(new Event('click')) 也是一樣的
// 區別在于 CustomEvent 可以傳遞自定義引數
</script>
不僅是瀏覽器原生的事件，如'click'，'mousedown'，'change'，'mouseover'，'mouseenter'等可以觸發，任意的自定義名稱的事件也是可以觸發的
document.body.addEventListener('測驗自定義事件', (ev) => {
console.log(ev.detail)
})
document.body.dispatchEvent(new CustomEvent('測驗自定義事件', {
detail: {
foo: 1
}
}))
整體流程
- 在正式環境使用
registerApplication來注冊應用 - 這時候在
single-spa內部會將注冊的資訊, 初始化加載函式 - 使用 url 進行匹配, 是否要加載, 如果需要加載, 則歸類
- 如果匹配上, 開始加載應用的檔案 (即使還沒使用
start) - 最后使用
start, 開始發送各類事件, 呼叫應用的各類生命周期方法
這里用一個簡單的圖來說明下:
總結
single-spa 無疑是微前端的一個重要里程碑,在大型應用場景下, 可支持多類框架, 抹平了框架間的巨大互動成本
他的核心是對子應用進行管理，但還有很多工程化問題沒做，比如JavaScript全域物件覆寫、css加載卸載、公共模塊管理要求只下載一次等等性能問題
這又促成了其他的框架的誕生, 比較出名的就是 qiankun、Isomorphic Layout Composer，
而這些就是另一個話題了，
參考
- https://zh-hans.single-spa.js.org/docs/getting-started-overview
- https://zhuanlan.zhihu.com/p/344145423
- https://www.zhangxinxu.com/wordpress/2020/08/js-customevent-pass-param/
- https://juejin.cn/post/7054454791803502628
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/548247.html
標籤：JavaScript
上一篇：前端設計模式——路由模式
下一篇：前端常用的終端命令