導(dǎo)學(xué)

• 了解微前端
• • 什么是微前端
  • 為什么要學(xué)習(xí)微前端
  • • 關(guān)鍵優(yōu)勢
    • 為什么要學(xué)
    • 手寫一個(gè)框架可以給我們帶來什么
  • 微前端實(shí)現(xiàn)方式對比
  • • iframe
    • • 優(yōu)勢：
      • 劣勢：
    • 基于 SPA 的微前端架構(gòu)
    • • 優(yōu)勢：
      • 劣勢：
    • 確定技術(shù)棧
    • 項(xiàng)目架構(gòu)圖
• 前端架構(gòu)的前世今生
• • • • 初始
      • 后端mvc架構(gòu)
      • 前后端分離架構(gòu)
      • Nodejs的廣泛使用促進(jìn)了前端技術(shù)的飛速發(fā)展
      • 單頁面架構(gòu)
      • 大前端時(shí)代
      • 微前端等新型架構(gòu)--天下大勢合久必分分久必合

了解微前端

什么是微前端

為了解決一整塊兒龐大的前端服務(wù)所帶來的變更和拓展方面的限制，將整體前端服務(wù)拆分成一些更小、更簡單的，能夠獨(dú)立開發(fā)、測試部署的小塊兒。但是在整體表現(xiàn)上還是一個(gè)整體的產(chǎn)品的服務(wù)稱為微前端。

為什么要學(xué)習(xí)微前端

關(guān)鍵優(yōu)勢

每個(gè)分模塊的規(guī)模更小，更利于維護(hù)
松散各個(gè)模塊之間的耦合。
可以實(shí)現(xiàn)增量升級，避免在重構(gòu)的時(shí)候影響整體邏輯
技術(shù)棧無關(guān)，可以在每個(gè)子模塊之間選取合適的技術(shù)棧進(jìn)行開發(fā)
獨(dú)立開發(fā)獨(dú)立部署

為什么要學(xué)

在重構(gòu)項(xiàng)目的時(shí)候，總會有各種各樣的問題，如：

• 項(xiàng)目技術(shù)棧落后，重構(gòu)時(shí)混用多種技術(shù)棧，導(dǎo)致項(xiàng)目技術(shù)棧混雜。
• 各個(gè)模塊之間耦合嚴(yán)重，動一處，可能影響整體項(xiàng)目運(yùn)轉(zhuǎn)
• 因?yàn)楦鞣N歷史問題不得不做出各種妥協(xié)，或者是添加各種兼容條件限制。

當(dāng)你也有以上問題的時(shí)候，不妨考慮使用微前端，不僅可以拜托繁重的歷史包袱，讓你可以進(jìn)行輕松重構(gòu)，而且不會出現(xiàn)重構(gòu)不徹底的情況，可以根據(jù)需求的實(shí)際情況進(jìn)行重構(gòu)工作，而不是基于項(xiàng)目歷史債務(wù)的問題進(jìn)行考慮。

這是需要學(xué)習(xí)微前端一個(gè)很重要的前提，如果你的項(xiàng)目沒有任何歷史包袱，或者說項(xiàng)目是從零開始的，這樣就不推薦你引入微前端這個(gè)東西，這樣或許不能達(dá)到預(yù)期的目的，或許只會加重自己的開發(fā)負(fù)擔(dān)。

手寫一個(gè)框架可以給我們帶來什么

可以從框架作者的角度去考慮，為什么框架的架構(gòu)要這么設(shè)計(jì)，從中學(xué)習(xí)作者的設(shè)計(jì)思想，對于模型概念的理解。

很多同學(xué)都會說一個(gè)問題，現(xiàn)在框架學(xué)都學(xué)不會，怎么還會想著去手動實(shí)現(xiàn)一個(gè)呢。

其實(shí)對于實(shí)現(xiàn)一個(gè)框架來說，對你能力的提升是非常巨大的。

在實(shí)現(xiàn)過程中，我們可以學(xué)會思考一下幾個(gè)內(nèi)容

• 思考一個(gè)語言需要如何使用才能發(fā)揮它最好的性能
• 如何才能讓自己的框架發(fā)揮出最大的優(yōu)勢
• api 如何設(shè)計(jì)，才能讓使用者更加易于使用
• 如何設(shè)計(jì)場景有關(guān)的問題，才能讓框架真正可移植。
• 如何更好的提示開發(fā)者，給他們提供最準(zhǔn)確的錯(cuò)誤提示
• 框架的受眾是什么。明確框架要服務(wù)的對象

這些問題都是在創(chuàng)建一個(gè)框架的時(shí)候需要考慮的問題，只有將這些問題都做的比較好了，那才算是一個(gè)比較好的框架（也許視頻里的框架實(shí)現(xiàn)的并沒有這么完美，還請見諒）。

這也是我們要學(xué)著手動實(shí)現(xiàn)一個(gè)框架的原因。

微前端實(shí)現(xiàn)方式對比

iframe

優(yōu)勢：

天生支持沙箱隔離，這是最大的優(yōu)勢。不用做任何沙箱的處理。

劣勢：

無法預(yù)加載緩存 iframe
無法共享基礎(chǔ)庫
事件通信限制較多
快捷鍵劫持
事件無法冒泡到頂層
跳轉(zhuǎn)路徑無法保持統(tǒng)一
登錄狀態(tài)無法共享
iframe 加載失敗，主應(yīng)用無法感知
性能問題難以計(jì)算

基于 SPA 的微前端架構(gòu)

優(yōu)勢：

可以規(guī)避 iframe 現(xiàn)存的問題點(diǎn)：
可緩存和預(yù)加載
共享登錄狀態(tài)
主應(yīng)用感知加載狀態(tài)
快捷鍵劫持
通信設(shè)計(jì)
共享基礎(chǔ)庫

劣勢：

實(shí)現(xiàn)難度較高。需要實(shí)現(xiàn)以下幾項(xiàng)內(nèi)容：
路由系統(tǒng)
沙箱隔離
樣式隔離
通信
html 加載和 js 解析能力
調(diào)試開發(fā)能力

確定技術(shù)棧

使用 SPA 架構(gòu)模式實(shí)現(xiàn)微前端架構(gòu)。

項(xiàng)目架構(gòu)圖

前端架構(gòu)的前世今生

初始

無架構(gòu)，前端代碼內(nèi)嵌到后端應(yīng)用中，html、js代碼融合在后端代碼中，所有交互功能是通過后端來實(shí)現(xiàn)的，數(shù)據(jù)也是通過后端進(jìn)行注入的

后端mvc架構(gòu)

將前端渲染體系從后端的服務(wù)體系中拆解出去，將視圖層、數(shù)據(jù)層、控制層做分離，后端服務(wù)集中在控制層和數(shù)據(jù)層；
缺點(diǎn)：重度依賴開發(fā)環(huán)境，代碼混淆嚴(yán)重

前后端分離架構(gòu)

將前端代碼從后端環(huán)境中提煉出來（ajax促進(jìn)了前后端分離架構(gòu)的發(fā)展）多頁面架構(gòu)；
缺點(diǎn)：前端缺乏獨(dú)立部署能力，整體流程依賴后端環(huán)境

Nodejs的廣泛使用促進(jìn)了前端技術(shù)的飛速發(fā)展

各種構(gòu)建、打包工具應(yīng)運(yùn)而生；
誕生了多元化前端開發(fā)方式，使得前端開發(fā)可以脫離整體后端環(huán)境，可以只部署或者只打包前端的依賴

單頁面架構(gòu)

打包：gulp、rollup、webpack、vite。。。
框架：vue/react/angular/。。。；
ui庫：antd/iview/elementui/minitui。。。；
優(yōu)勢：
切換頁面無刷新瀏覽器，用戶體驗(yàn)好
組件化開發(fā)方式，極大提升了代碼復(fù)用率
劣勢：
不利于SEO，首次渲染會出現(xiàn)較長時(shí)間的白屏（可解決）

大前端時(shí)代

后端框架：express，koa
包管理工具：npm，yarn
node版本管理工具：nvm
過于靈活的實(shí)現(xiàn)也導(dǎo)致了前端應(yīng)用拆分過多，維護(hù)困難
往往一個(gè)功能或需求會跨兩三個(gè)項(xiàng)目進(jìn)行開發(fā)

微前端等新型架構(gòu)–天下大勢合久必分分久必合

優(yōu)勢：
技術(shù)棧無關(guān)
主框架不限制接入應(yīng)用的技術(shù)棧，微應(yīng)用具備完全自主權(quán)
獨(dú)立開發(fā)，獨(dú)立部署
支持增量升級
微前端是一種非常好的實(shí)施漸進(jìn)式重構(gòu)的手段和策略
微應(yīng)用倉庫獨(dú)立，前后端可獨(dú)立開發(fā)，主框架自動完成同步更新
獨(dú)立運(yùn)行時(shí)，每一個(gè)子應(yīng)用都是可以獨(dú)立運(yùn)行的
每個(gè)微應(yīng)用之間狀態(tài)隔離，運(yùn)行時(shí)狀態(tài)不共享，如果需要共享可以通過主應(yīng)用進(jìn)行共享

劣勢：
接入難度較高
應(yīng)用場景–移動端少，管理端多

總結(jié)

以上是生活随笔為你收集整理的（一）导学的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。