Single-spa 源碼淺析

来源:https://www.cnblogs.com/Grewer/archive/2023/03/26/17259732.html
-Advertisement-
Play Games

引言 前一段時間, 正好在做微前端的接入和微前端管理平臺的相關事項。 而我們當前使用的微前端框架則是 qiankun, 他是這樣介紹自己的: qiankun 是一個基於 single-spa 的微前端實現庫，旨在幫助大家能更簡單、無痛的構建一個生產可用微前端架構系統。 所以本文基於 single-s ...


引言

前一段時間, 正好在做微前端的接入和微前端管理平臺的相關事項。 而我們當前使用的微前端框架則是 qiankun, 他是這樣介紹自己的:

qiankun 是一個基於 single-spa 的微前端實現庫，旨在幫助大家能更簡單、無痛的構建一個生產可用微前端架構系統。

所以本文基於 single-spa 源碼, 來介紹 single-spa

當前使用版本 5.9.4

啟動

在官方 demo 中, 要運行此框架需要做的是有這四步:

  1. 準備好子應用的文件, 需要拋出一些生命周期函數
  2. 一個子應用 app1 的載入函數(可以是 import 非同步載入, 也可以是 ajax/fetch 載入)
  3. 註冊子應用
  4. 啟動程式

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
    }
}))

整體流程

  1. 在正式環境使用 registerApplication 來註冊應用
  2. 這時候在 single-spa 內部會將註冊的信息, 初始化載入函數
  3. 使用 url 進行匹配, 是否要載入, 如果需要載入, 則歸類
  4. 如果匹配上, 開始載入應用的文件 (即使還沒使用 start)
  5. 最後使用 start, 開始發送各類事件, 調用應用的各類生命周期方法

這裡用一個簡單的圖來說明下:

image

總結

single-spa 無疑是微前端的一個重要里程碑,在大型應用場景下, 可支持多類框架, 抹平了框架間的巨大交互成本

他的核心是對子應用進行管理，但還有很多工程化問題沒做。比如JavaScript全局對象覆蓋、css載入卸載、公共模塊管理要求只下載一次等等性能問題

這又促成了其他的框架的誕生, 比較出名的就是 qiankun、Isomorphic Layout Composer。

而這些就是另一個話題了。

引用


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 常用Linux系統命令、vim編輯命令彙總（看一遍用時候來查）
    基本操作 pwd命令 作用：顯示當前工作目錄 用法：pwd cd命令 作用：改變目錄位置 用法：cd [option] [dir] cd 目錄路徑 -進入指定目錄 cd .. -返回父目錄 cd / -進入根目錄 cd或cd ~ -進入用戶主目錄 ls命令 用法：ls [option] [file] ...
  • signal
    signal源碼位置：、 信號集合../sched/signal.h 信號結構體：../signal_types.h signal函數：..\kernel\signal.c sigio的概述流程 對於網路IO來說，一旦收到數據，信號機制會發送sigio這個信號 簡單使用sigio，udp可以使用，t ...
  • 解決Mariadb設置密碼無效，可以直接登錄
    問題 搭建Typecho的時候使用的是Mariadb資料庫，建立在Debian伺服器上，正常aptitude install mariadb-server，安裝好之後顯示success沒有任何報錯，出於習慣第一次用資料庫之前我都會mysql_secure_installation命令將其初始化避免一 ...
  • Mysql資料庫詳細筆記(跟隨b站韓順平教程)
    Mysql資料庫 一、資料庫 mysql服務啟動,在cmd輸入net start mysql #創建資料庫 CREATE DATABASE hsp_db01; #創建一個使用 utf8 字元集的 hsp_db02 資料庫 CREATE DATABASE hsp_db02 CHARACTER SET ...
  • P3 創建資料庫
    P3 創建資料庫 CHARACTER SET：指定資料庫採用的字元集，如果不指定字元集，預設utf8 COLLATE：指定資料庫字元集的校對規則（常用的 utf8_bin[區分大小寫]、utf8_general_ci[不區分大小寫]，註意預設是utf8_general_ci） 創建指令：CREATE ...
  • Mysql 查詢指定節點的所有子節點
    原文鏈接：https://www.zhoubotong.site/post/92.html 通常我們直接通過遞歸查詢來達到實現子節點數據獲取的需求，這裡不談存儲過程的實現，存儲過程普通賬號有許可權限制，通常也不易於開發者維護，這裡介紹下純mysql遞歸實現的方式：測試數據可以通過之前的一篇文章來模擬。 ...
  • MySQL與Java常用數據類型的對應關係
    一、字元串數據類型: MySQL類型名 大小 用途 對應Java類名 char 0-255 bytes 定長字元串 （姓名、性別、學號） String varchar 0-65535 bytes 變長字元串（比上面更長一點的那種） String tinytext 0-255 bytes 比較短的那種 ...
  • 支持10倍訂單增長，攜程資料庫架構升級實踐
    隨著機票訂單業務的不斷增長，當前訂單處理系統的架構已經不能滿足日益增長的業務需求，系統性能捉襟見肘，主要體現在以下方面： 資料庫CPU資源在業務高峰期經常達到50%以上，運行狀況亮起了黃燈； 磁碟存儲空間嚴重不足，需要經常清理磁碟數據騰挪可用空間； 系統擴容能力不足，如果需要提升處理能力只能更換配置... ...
一周排行
    -Advertisement-
    Play Games
  • .NET 6 Entity Framework Core Db First（1） 創建模型
    .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 實測可以完整運行在 win7sp1/win10/win11. 如果用其他工具打包,還可以運行在mac/linux下, 傳送門BlazorHybrid 發佈為無依賴包方式 安裝 WebView2Runtime 1.57 M ...
  • 資料庫升級PostgreSql+Garnet
    目錄前言PostgreSql安裝測試額外Nuget安裝Person.cs模擬運行Navicate連postgresql解決方案Garnet為什麼要選擇Garnet而不是RedisRedis不再開源Windows版的Redis是由微軟維護的Windows Redis版本老舊，後續可能不再更新Garne ...
  • 如何基於surging架設流媒體視頻推流（視頻講解）
    C#TMS系統代碼-聯表報表學習 領導被裁了之後很快就有人上任了，幾乎是無縫銜接，很難讓我不想到這早就決定好了。我的職責沒有任何變化。感受下來這個系統封裝程度很高，我只要會調用方法就行。這個系統交付之後不會有太多問題，更多應該是做小需求，有大的開發任務應該也是第二期的事，嗯？怎麼感覺我變成運維了？而 ...
  • EAV模型（實體-屬性-值）的設計和低代碼的處理方案（2）--數據的查詢處理
    我在隨筆《EAV模型（實體-屬性-值）的設計和低代碼的處理方案（1）》中介紹了一些基本的EAV模型設計知識和基於Winform場景下低代碼（或者說無代碼）的一些實現思路，在本篇隨筆中，我們來分析一下這種針對通用業務，且只需定義就能構建業務模塊存儲和界面的解決方案，其中的數據查詢處理的操作。 ...
  • C# 程式集、模塊和類型概念及關係
    對某個遠程伺服器啟用和設置NTP服務(Windows系統) 打開註冊表 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\TimeProviders\NtpServer 將 Enabled 的值設置為 1，這將啟用NTP伺服器功 ...
  • Django信號與擴展：深入理解與實踐
    title: Django信號與擴展：深入理解與實踐 date: 2024/5/15 22:40:52 updated: 2024/5/15 22:40:52 categories: 後端開發 tags: Django 信號 松耦合 觀察者 擴展 安全 性能 第一部分：Django信號基礎 Djan ...
  • Django3.2安裝源碼xadmin2步驟以及遇到的問題
    使用xadmin2遇到的問題&解決 環境配置： 使用的模塊版本： 關聯的包 Django 3.2.15 mysqlclient 2.2.4 xadmin 2.0.1 django-crispy-forms >= 1.6.0 django-import-export >= 0.5.1 django-r ...
  • 原創->CommonsCollections1-DefaultMap鏈
    今天我打算整點兒不一樣的內容，通過之前學習的TransformerMap和LazyMap鏈，想搞點不一樣的，所以我關註了另外一條鏈DefaultedMap鏈，主要調用鏈為： 調用鏈詳細描述： ObjectInputStream.readObject() DefaultedMap.readObject ...
  • 05-應用級開發者 AI 時代破局點
    後端應用級開發者該如何擁抱 AI GC？就是在這樣的一個大的浪潮下，我們的傳統的應用級開發者。我們該如何選擇職業或者是如何去快速轉型，跟上這樣的一個行業的一個浪潮? 0 AI金字塔模型 越往上它的整個難度就是職業機會也好，或者說是整個的這個運作也好,它的難度會越大,然後越往下機會就會越多,所以這是一 ...
  • Java面試題：讓依賴註入變得簡單，面對@Autowired和@Resource，該如何選擇？
    @Autowired是Spring框架提供的註解，@Resource是Java EE 5規範提供的註解。 @Autowired預設按照類型自動裝配，而@Resource預設按照名稱自動裝配。 @Autowired支持@Qualifier註解來指定裝配哪一個具有相同類型的bean，而@Resourc... ...
所有分類