1、目標

2、前端架構的前世今生

① 初始：無架構，前端代碼內嵌到后端應用中

② 后端 MVC 架構：將視圖層、數據層、控制層做分離

缺點：重度依賴開發環境，代碼混淆嚴重（在調試時，需要啟動后端所有代碼和依賴，比較麻煩）

③ 前后端分離架構

將前端代碼從后端環境中提煉出來（?ajax?促進了前后端分離架構的發展）多頁面架構，使其能夠通過瀏覽器動態獲取數據；

缺點：前端缺乏獨立部署能力，整體流程依賴后端環境

④?Nodejs 的廣泛使用促進了前端技術的飛速發展

各種打包、構建工具應運而生；

誕生了多元化前端開發方式，使得前端開發可以脫離整體后端環境；

⑤ 單頁面架構

優勢：

切換頁面無刷新瀏覽器，用戶體驗好；

組件化開發方式，極大提升了代碼復用率；

缺點：

不利于 SEO，首次渲染會出現較長時間的白屏(可解決)

⑥ 大前端架構

總結：

過于靈活的實現也導致了前端應用拆分過多，維護困難；
往往一個功能或需求會跨兩三個項目進行開發。

3、微前端架構

1）優勢?

① 與技術棧無關

技術棧使用 Vue/angular/react 或者原生都可以?

②?主框架不限制接入應用的技術棧，微應用具備完全自主權?

③??獨立開發、獨立部署

④ 增量升級

⑤?微前端是一種非常好的實施漸進式重構的手段和策略

⑥ 所有微應用之間倉庫獨立，前后端可獨立開發，主框架自動完成同步更新

⑦?獨立運行時

⑧ 每個微應用之間狀態隔離，運行時狀態不共享?

2）缺點

① 接入難度較高

② 應用場景 - 移動端少、管理端多

4、軟件設計原則

① 單一職責原則

② 開放封閉原則

③ 里氏替換原則

④ 最少知識原則

⑤ 接口隔離原則

⑥ 依賴倒置原則

總結：

⑦ 其它原則：

?

5、軟件設計分層

特點：難點遞減?

① 系統級

應用在整個系統內，如與后臺服務如何通信，與第三方系統如何集成。

② 應用級

腳手架、模式庫、設計系統?

③ 模塊級

④ 代碼級

規范與原則；

6、開發中的注意