本文不詳細介紹什麼是整潔架構以及 MVP 模式，自行查看文章結尾相關鏈接文章。 整潔架構粗略介紹 下圖為整潔架構最原始的結構圖： Entities/Models：實體層，官方說法就是封裝了企業里最通用的一部分邏輯，也可以叫 Models, 可能是只包含數據欄位的對象，也可能包含方法，具有一部分業務邏 ...
本文不詳細介紹什麼是整潔架構以及 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
