本文不詳細介紹什么是整潔架構以及 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 變成回應式的；造輪子 - 發布訂閱模式