如果你無(wú)法接受 TypeScript，不建議繼續(xù)閱讀此系列文章
本文不詳細(xì)介紹什么是整潔架構(gòu)以及 MVP 模式臂寝，自行查看文章結(jié)尾相關(guān)鏈接文章。
整潔架構(gòu)粗略介紹
下圖為整潔架構(gòu)最原始的結(jié)構(gòu)圖：
- Entities/Models：實(shí)體層，官方說法就是封裝了企業(yè)里最通用的一部分邏輯也糊，也可以叫 Models, 可能是只包含數(shù)據(jù)字段的對(duì)象毫玖，也可能包含方法掀虎，具有一部分業(yè)務(wù)邏輯。更加深入就是領(lǐng)域驅(qū)動(dòng)（DDD）開發(fā)相關(guān)的內(nèi)容付枫。
- Use Case/Service：包含核心業(yè)務(wù)邏輯烹玉。
- Interface Adapter：適配層/膠水層，負(fù)責(zé)內(nèi)圈的 entity 和 use case 同外圈的 external interfaces 之間的數(shù)據(jù)轉(zhuǎn)化阐滩。需要把外層服務(wù)的數(shù)據(jù)轉(zhuǎn)化成內(nèi)層 entity 和 usecase 可以消費(fèi)的數(shù)據(jù)二打，反之亦然。
- External Interfaces：依賴的外部服務(wù)掂榔，第三方框架继效，以及需要糊的頁(yè)面 UI 都?xì)w屬在這一層症杏，這一層完全不感知內(nèi)圈的任何邏輯，所以無(wú)論這一層怎么變( 組件庫(kù)由 Element UI 改為 Ant Design Vue 莲趣，數(shù)據(jù)庫(kù)由 MySQL 改為 PostgreSQL )鸳慈，都不應(yīng)該影響到內(nèi)圈。
這不就是后端的 mvc 嗎?
好處
- 更好的做單元測(cè)試：業(yè)務(wù)邏輯可以在沒有 UI喧伞、數(shù)據(jù)庫(kù)走芋、Web 服務(wù)器或任何其他外部基礎(chǔ)設(shè)施的情況下被測(cè)試。
- 減少對(duì)UI框架的依賴：跨端開發(fā)潘鲫，業(yè)務(wù)邏輯層可以直接復(fù)用翁逞，只需要做 UI 層的適配。
- 基礎(chǔ)設(shè)施無(wú)關(guān)性：內(nèi)層業(yè)務(wù)邏輯不需要關(guān)心數(shù)據(jù)來(lái)自哪里溉仑，提交到哪里挖函，比如 LocalStroage、IndexedDB浊竟、Web SQL怨喘、JSbridge、HTTP振定、WebSocket必怜。
轉(zhuǎn)化為適用于前端工程的結(jié)構(gòu)
Service，Model 都為純 JS 類/對(duì)象后频，與框架無(wú)關(guān)梳庆。
基礎(chǔ)服務(wù)虛線表示并不是直接調(diào)用相應(yīng)的 API，而是封裝在工具庫(kù)或者函數(shù)中卑惜。
如何真正的落地膏执？
presenter/controller 創(chuàng)建 model，service 實(shí)例露久，并且將 model 注入 service 中更米。service 中使用 model 做業(yè)務(wù)邏輯計(jì)算。同時(shí) presenter/controller 內(nèi)調(diào)用 service 方法處理 view 事件毫痕，同時(shí)將 model 返回到 view 層中做數(shù)據(jù)綁定
問題：model 是純 JS 對(duì)象壳快，如何讓 model 數(shù)據(jù)變更的時(shí)候觸發(fā) view 的更新？
mobx镇草，@formily/reactive 將 model 變成響應(yīng)式的眶痰；造輪子 - 發(fā)布訂閱模式
如何在實(shí)際項(xiàng)目中落地
使用 vue composition api 或者 react hooks 構(gòu)建 model，所以 model 就是一個(gè)自定義 hooks梯啤。
presenter/controller 也是一個(gè)自定義 hooks竖伯，內(nèi)部可以調(diào)用我們自己定義的 hooks，以及第三方開源的 hooks 庫(kù)，比如 ahooks七婴，vueuse
因?yàn)?model 是一個(gè)自定義 hooks 祟偷，當(dāng)內(nèi)部的 state 更新的時(shí)候，就會(huì)促發(fā)視圖 view 的更新打厘。
參考文章
前端架構(gòu) 101（六）：整潔（Clean Architecture）架構(gòu)是歸宿 - 知乎 (zhihu.com)
Clean Frontend Architecture：整潔前端架構(gòu) | clean-frontend (phodal.github.io)
干貨 | 攜程機(jī)票 React Native 整潔架構(gòu)實(shí)踐 (qq.com)
干貨 | Trip.com 機(jī)票React Native整潔架構(gòu)2.0實(shí)踐 - 騰訊云開發(fā)者社區(qū)-騰訊云 (tencent.com)
Moving away from ReactJs and VueJs on front-end using Clean Architecture - DEV Community ????????
