本文不詳細介紹什麼是整潔架構以及 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 👩💻👨💻