demo放最后了。。。

一、微前端

一》微前端概述

????????微前端概念是從微服務(wù)概念擴展而來的，摒棄大型單體方式，將前端整體分解為小而簡單的塊，這些塊可以獨立開發(fā)、測試和部署，同時仍然聚合為一個產(chǎn)品出現(xiàn)在客戶面前?？梢岳斫馕⑶岸耸且环N將多個可獨立交付的小型前端應(yīng)用聚合為一個整體的架構(gòu)風(fēng)格。

二》微前端架構(gòu)核心

1、技術(shù)棧無關(guān)：主框架不限制接入應(yīng)用的技術(shù)棧，微應(yīng)用具備完全自主權(quán)

2、獨立開發(fā)、獨立部署：微應(yīng)用倉庫獨立，前后端可獨立開發(fā)，部署完成后主框架自動完成同步更新

3、增量升級：在面對各種復(fù)雜場景時，我們通常很難對一個已經(jīng)存在的系統(tǒng)做全量的技術(shù)棧升級或重構(gòu)，而微前端是一種非常好的實施漸進(jìn)式重構(gòu)的手段和策略

4、獨立運行：每個微應(yīng)用之間狀態(tài)隔離，運行時狀態(tài)不共享

三》主流的微前端方案

1、iframe

????????iframe 最大的特性就是提供了瀏覽器原生的硬隔離方案，不論是樣式隔離、js 隔離這類問題統(tǒng)統(tǒng)都能被完美解決。

????????但他的最大問題也在于他的隔離性無法被突破，導(dǎo)致應(yīng)用間上下文無法被共享（主要是本地存儲、全局變量和公共插件），兩個項目不同源（跨域）情況下數(shù)據(jù)傳輸需要依賴 postMessage，隨之帶來的開發(fā)體驗、產(chǎn)品體驗的問題。

2、single-spa 方案

????????Single-spa 是一個將多個單頁面應(yīng)用聚合為一個整體應(yīng)用的 JavaScript 微前端框架（GitHub 主頁）。簡單來說就是將子項目的內(nèi)容（包括容器、js）插入到主項目，從而呈現(xiàn)出子項目的內(nèi)容。

????????相對于 iframe，single-spa 讓父子項目屬于同一個 document，這樣做既有好處，也有壞處。好處就是數(shù)據(jù)/文件都可以共享，公共插件共享，子項目加載就更快了，缺點是帶來了 js/css 污染。

????????single-spa 上手并不簡單，也不能開箱即用，開發(fā)部署更是需要修改大量的 webpack 配置，對子項目的改造也非常多。

二、qiankun

一》qiankun是什么

?????????qiankun 是一個基于 single-spa 的微前端實現(xiàn)庫，它在 single-spa 的基礎(chǔ)上，實現(xiàn)了開箱即用，除一些必要的修改外，子項目只需要做很少的改動，就能很容易的接入。

二》qiankun主要特性

1、基于 single-spa 封裝，提供了更加開箱即用的 API。

2、技術(shù)棧無關(guān)，任意技術(shù)棧的應(yīng)用均可 使用/接入，不論是 React/Vue/Angular/JQuery 還是其他等框架。

3、HTML Entry 接入方式，讓我們接入微應(yīng)用像使用 iframe 一樣簡單

4、樣式隔離，確保微應(yīng)用之間樣式互相不干擾。

5、JS 沙箱，確保微應(yīng)用之間 全局變量/事件 不沖突。

6、資源預(yù)加載，在瀏覽器空閑時間預(yù)加載未打開的微應(yīng)用資源，加速微應(yīng)用打開速度。

7、umi 插件，提供了 @umijs/plugin-qiankun 供 umi 應(yīng)用一鍵切換成微前端架構(gòu)系統(tǒng)。

三》single-spa和qiankun的關(guān)系

微前端需要解決的問題分為兩大類:

1、應(yīng)用的加載與切換

????????應(yīng)用的加載與切換要解決的問題包括: 路由問題、應(yīng)用入口、應(yīng)用加載

2、應(yīng)用的隔離與通信

????????應(yīng)用的隔離與通信需要解決的問題包括：js隔離、css樣式隔離、應(yīng)用間通信

?四》原理概述

1、路由

【1】single-spa是通過監(jiān)聽hashChange和popState這兩個原生事件來檢測路由變化的

【2】當(dāng)路由變化時,single-spa會監(jiān)聽到，并觸發(fā)urlReroute

【3】接著它會調(diào)用reroute，該函數(shù)正確設(shè)置各個應(yīng)用的狀態(tài)后調(diào)用getAppChanges獲取 待清除、待卸載、待加載、待掛載4種不通狀態(tài)下應(yīng)用的數(shù)據(jù)。

【4】對不同的數(shù)組執(zhí)行不同的生命周期方法。

流程圖如下：

?

2、應(yīng)用入口

????????只要你的應(yīng)用實現(xiàn)了 bootstrap 、mount 和 unmount 三個生命周期鉤子，有這三個函數(shù)導(dǎo)出，我們的框架應(yīng)用就可以知道如何加載這個子應(yīng)用。這三個鉤子也正好是子應(yīng)用的生命周期鉤子。當(dāng)子應(yīng)用第一次掛載的時候，我們會執(zhí)行 bootstrap 做一些初始化，然后執(zhí)行 mount 將它掛載。當(dāng)你應(yīng)用切換走的時候，我們會執(zhí)行 unmount 把應(yīng)用卸載掉。

?3、應(yīng)用加載

qiankun采用的應(yīng)用加載是在運行是通過加載子應(yīng)用的HTML。

【1】檢查是否有緩存，如果有，直接從緩存中返回

【2】如果沒有則通過fetch函數(shù)去下載配置的html入口、并返回字符串

【3】通過process函數(shù)處理字符串、返回模版、外聯(lián)腳本、外聯(lián)樣式、和應(yīng)用入口腳本。

【4】調(diào)用getEmbedHTML把外聯(lián)的樣式下載下來，并替換到模板內(nèi)，使其變成內(nèi)部樣式

【5】返回一個對象，該對象包含處理后的模板，以及getExternalScripts、getExternalStyleSheets、execScripts等幾個核心方法。

應(yīng)用加載及process函數(shù)處理流程圖：

?4、JS隔離

qiankun的隔離方式有兩種：

?基于proxy對全局window生成一個代理對象

?

?通過快照沙箱在沙箱掛載和卸載的時候記錄快照，在應(yīng)用切換的時候依據(jù)快照恢復(fù)環(huán)境。

?5、樣式隔離

qiankun內(nèi)置了兩種樣式隔離的方法:

?ShadowDOM

?樣式隔離 RFC

?6、應(yīng)用間通信

????????基于一個全局的globalState對象。這個對象由基座應(yīng)用負(fù)責(zé)創(chuàng)建，內(nèi)部包含一組用于通信的變量，以及兩個分別用于修改變量值和監(jiān)聽變量變化的方法：setGlobalState和onGlobalStateChange。

?三、總結(jié)

????????雖然阿里說：“可能是你見過最完善的微前端解決方案??”。但是qiankun 也有一些事情沒有做的。比如沒有對 localStorage 進(jìn)行隔離，如果多個子應(yīng)用都用到 localStorage 就有可能沖突了，除此之外，還有 cookie, indexedDB 的共享等。

附demo

GitHub - 14130110048/qiankun-demo: 微前端-qiankun框架demo文章來源地址http://www.zghlxwxcb.cn/news/detail-412906.html

到了這里，關(guān)于微前端--qiankun原理概述的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！