本文不詳細介紹什么是整潔架構以及 MVP 模式，自行查看文章結尾相關鏈接文章，
整潔架構粗略介紹
下圖為整潔架構最原始的結構圖：
- Entities/Models：物體層，官方說法就是封裝了企業里最通用的一部分邏輯，也可以叫 Models, 可能是只包含資料欄位的物件，也可能包含方法，具有一部分業務邏輯，更加深入就是領域驅動（DDD）開發相關的內容，
- Use Case/Service：包含核心業務邏輯，
- Interface Adapter：適配層/膠水層，負責內圈的 entity 和 use case 同外圈的 external interfaces 之間的資料轉化，需要把外層服務的資料轉化成內層 entity 和 usecase 可以消費的資料，反之亦然，
- External Interfaces：依賴的外部服務，第三方框架，以及需要糊的頁面 UI 都歸屬在這一層，這一層完全不感知內圈的任何邏輯，所以無論這一層怎么變( 組件庫由 Element UI 改為 Ant Design Vue ，資料庫由 MySQL 改為 PostgreSQL )，都不應該影響到內圈，
這不就是后端的 mvc 嗎?
好處
- 更好的做單元測驗：業務邏輯可以在沒有 UI、資料庫、Web 服務器或任何其他外部基礎設施的情況下被測驗，
- 減少對UI框架的依賴：跨端開發，業務邏輯層可以直接復用，只需要做 UI 層的適配，
- 基礎設施無關性：內層業務邏輯不需要關心資料來自哪里，提交到哪里，比如 LocalStroage、IndexedDB、Web SQL、JSbridge、HTTP、WebSocket，
轉化為適用于前端工程的結構
Service，Model 都為純 JS 類/物件，與框架無關，
基礎服務虛線表示并不是直接呼叫相應的 API，而是封裝在工具庫或者函式中，
如何真正的落地？
presenter/controller 創建 model，service 實體，并且將 model 注入 service 中，service 中使用 model 做業務邏輯計算，同時 presenter/controller 內呼叫 service 方法處理 view 事件，同時將 model 回傳到 view 層中做資料系結
問題：model 是純 JS 物件，如何讓 model 資料變更的時候觸發 view 的更新？
mobx，@formily/reactive 將 model 變成回應式的；造輪子 - 發布訂閱模式
如何在實際專案中落地
使用 vue composition api 或者 react hooks 構建 model，所以 model 就是一個自定義 hooks，
presenter/controller 也是一個自定義 hooks，內部可以呼叫我們自己定義的 hooks，以及第三方開源的 hooks 庫，比如 ahooks，vueuse
因為 model 是一個自定義 hooks ，當內部的 state 更新的時候，就會促發視圖 view 的更新，
參考文章
前端架構 101（六）：整潔（Clean Architecture）架構是歸宿 - 知乎 (zhihu.com)
Clean Frontend Architecture：整潔前端架構 | clean-frontend (phodal.github.io)
干貨 | 攜程機票 React Native 整潔架構實踐 (qq.com)
干貨 | Trip.com 機票React Native整潔架構2.0實踐 - 騰訊云開發者社區-騰訊云 (tencent.com)
Moving away from ReactJs and VueJs on front-end using Clean Architecture - DEV Community ??????????
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/503019.html
標籤：其他
上一篇：[設計模式]單例模式
下一篇：[設計模式]單例模式