勵志

勵志人生知識庫

乾坤微前端原理

乾坤微前端框架的原理主要基於以下幾個方面:

基於single-spa進行封裝:乾坤微前端框架是建立在single-spa框架之上的,single-spa是一個用於前端微服務化的JavaScript框架,它提供了生命周期管理、路由管理等核心功能。

使用沙箱進行隔離:乾坤通過使用沙箱技術來隔離不同的子套用。JavaScript代碼被包裹在一個函式中,形成一個單獨的作用域,同時內部的window對象被Proxy代理,從而實現了JS代碼的隔離。對於CSS的隔離,乾坤使用了shadow dom,這是瀏覽器支持的特性,可以確保shadow root下的DOM樣式不會影響其他DOM的樣式。

全局變數的代理和訊息通信機制:為了防止子套用修改全局變數影響其他子套用,乾坤使用Proxy對全局變數進行代理。此外,乾坤提供了全局API和props等方式進行數據共享,並支持使用自定義事件或pub/sub等方式實現訊息通信。

路由管理和資源載入:乾坤會根據路由或選單等方式來決定載入哪些子套用,並負責資源的載入和快取管理。

微前端架構的套用拆分:微前端架構借鑑了微服務的理念,將前端套用拆分為多個獨立的小型套用,這些套用可以獨立開發、測試和部署,同時聚合為一個整體套用展示給用戶。

通過上述技術原理,乾坤微前端框架實現了多個子套用的協同工作,每個子套用都可以獨立開發、部署,並且能夠在同一個主套用容器中共享,從而提升了開發體驗和產品體驗。