Android UI 架構(gòu)演進(jìn)：從 MVC 到 MVP、MVVM、MVI

前言

為了優(yōu)化代碼設(shè)計(jì)，業(yè)界先后提出了 MVC、MVP、MVVM 和 MVI 等架構(gòu)設(shè)計(jì)。這四個(gè)模式討論是 “如何管理 UI” 這個(gè)話題，采用的手段都是 “關(guān)注點(diǎn)分離”，只是實(shí)現(xiàn)的細(xì)節(jié)不同。最開始是沒有采用任何模式的狀態(tài)，不管是視圖代碼還是表現(xiàn)邏輯全都寫在 Activity 里面，很明顯這樣的代碼耦合度非常高，難以進(jìn)行維護(hù)和測試，可讀性也不好。

提示：耦合度高是現(xiàn)象，關(guān)注點(diǎn)分離是手段，易維護(hù)性和易測試性是結(jié)果，模式是可復(fù)用的經(jīng)驗(yàn)。

1. MVC

MVC 其實(shí)是 Android 默認(rèn)的設(shè)計(jì)，MVC 里將代碼分為三個(gè)部分：

  • View： Layout XML 文件；
  • Model： 負(fù)責(zé)管理業(yè)務(wù)數(shù)據(jù)邏輯，如網(wǎng)絡(luò)請求、數(shù)據(jù)庫處理；
  • Controller： Activity 負(fù)責(zé)處理表現(xiàn)邏輯。

MVC 初步解決了 Activity 代碼太多的問題，但也有缺點(diǎn)：我們的初衷 Activity / Fragment 是只處理表現(xiàn)邏輯的部分 ，但現(xiàn)實(shí)是 Activity 天然不可避免要處理 UI，也要處理用戶交互，說明 Activity 本身天然承擔(dān)了 View 的角色。那么這個(gè)架構(gòu)就會(huì)造成 Activity 里糅合了視圖和業(yè)務(wù)的代碼，分離程度不夠。

2. MVP

為了將 Activity 中的表現(xiàn)邏輯徹底分離出來，業(yè)界提出了 MVP 的設(shè)計(jì)。MVP 同樣將代碼劃分為三個(gè)部分：

  • View： Activity 和 Layout XML 文件；
  • Model： 負(fù)責(zé)管理業(yè)務(wù)數(shù)據(jù)邏輯，如網(wǎng)絡(luò)請求、數(shù)據(jù)庫處理；
  • Presenter： 負(fù)責(zé)處理表現(xiàn)邏輯。

在實(shí)現(xiàn)細(xì)節(jié)上，View 和 Presenter 中間會(huì)定義一個(gè)協(xié)議接口 Contract，這個(gè)接口會(huì)約定 View 如何向 Presenter 發(fā)指令和 Presenter 如何 Callback 給 View。這樣的架構(gòu)里 Activity 不再有表現(xiàn)邏輯的部分，Activity 作為 View 的角色只處理和 UI 有關(guān)的事情。但還是存在一些缺點(diǎn)：

  • 雙向依賴： View 和 Presenter 是雙向依賴的，一旦 View 層做出改變，相應(yīng)地 Presenter 也需要做出調(diào)整。在業(yè)務(wù)語境下，View 層變化是大概率事件；
  • 內(nèi)存泄漏風(fēng)險(xiǎn)： Presenter 持有 View 層的引用，當(dāng)用戶關(guān)閉了 View 層，但 Model 層仍然在進(jìn)行耗時(shí)操作，就會(huì)有內(nèi)存泄漏風(fēng)險(xiǎn)。雖然有解決辦法，但還是存在風(fēng)險(xiǎn)點(diǎn)和復(fù)雜度（弱引用 / onDestroy() 回收 Presenter）。
  • 協(xié)議接口類膨脹： View 層和 Presenter 層的交互需要定義接口方法，當(dāng)交互非常復(fù)雜時(shí)，需要定義很多接口方法和回調(diào)方法，也不好維護(hù)。

3. MVVM

MVVM 模式改動(dòng)在于中間的 Presenter 改為 ViewModel，MVVM 同樣將代碼劃分為三個(gè)部分：

  • View： Activity 和 Layout XML 文件，與 MVP 中 View 的概念相同；
  • Model： 負(fù)責(zé)管理業(yè)務(wù)數(shù)據(jù)邏輯，如網(wǎng)絡(luò)請求、數(shù)據(jù)庫處理，與 MVP 中 Model 的概念相同；
  • ViewModel： 存儲(chǔ)視圖狀態(tài)，負(fù)責(zé)處理表現(xiàn)邏輯，并將數(shù)據(jù)設(shè)置給可觀察數(shù)據(jù)容器。

在實(shí)現(xiàn)細(xì)節(jié)上，View 和 Presenter 從雙向依賴變成 View 可以向 ViewModel 發(fā)指令，但 ViewModel 不會(huì)直接向 View 回調(diào)，而是讓 View 通過觀察者的模式去監(jiān)聽數(shù)據(jù)的變化，有效規(guī)避了 MVP 雙向依賴的缺點(diǎn)。但 MVVM 本身也存在一些缺點(diǎn)：

  • 多數(shù)據(jù)流： View 與 ViewModel 的交互分散，缺少唯一修改源，不易于追蹤；
  • LiveData 膨脹： 復(fù)雜的頁面需要定義多個(gè) MutableLiveData，并且都需要暴露為不可變的 LiveData。

DataBinding、ViewModel 和 LiveData 等組件是 Google 為了幫助我們實(shí)現(xiàn) MVVM 模式提供的架構(gòu)組件，它們并不是 MVVM 的本質(zhì)，只是實(shí)現(xiàn)上的工具。

  • Lifecycle： 生命周期狀態(tài)回調(diào)；
  • LiveData： 可觀察的數(shù)據(jù)存儲(chǔ)類；
  • databinding： 可以自動(dòng)同步 UI 和 data，不用再 findviewById()；
  • ViewModel： 存儲(chǔ)界面相關(guān)的數(shù)據(jù)，這些數(shù)據(jù)不會(huì)在手機(jī)旋轉(zhuǎn)等配置改變時(shí)丟失。

4. MVI

MVI 模式的改動(dòng)在于將 View 和 ViewModel 之間的多數(shù)據(jù)流改為基于 ViewState 的單數(shù)據(jù)流。MVI 將代碼分為以下四個(gè)部分：

  • View： Activity 和 Layout XML 文件，與 MVVM 中 View 的概念相同；
  • Intent： 定義數(shù)據(jù)操作，是將數(shù)據(jù)傳到 Model 的唯一來源，相比 MVVM 是新的概念；
  • ViewModel： 存儲(chǔ)視圖狀態(tài)，負(fù)責(zé)處理表現(xiàn)邏輯，并將 ViewState 設(shè)置給可觀察數(shù)據(jù)容器；
  • ViewState： 一個(gè)數(shù)據(jù)類，包含頁面狀態(tài)和對應(yīng)的數(shù)據(jù)。

在實(shí)現(xiàn)細(xì)節(jié)上，View 和 ViewModel 之間的多個(gè)交互（多 LiveData 數(shù)據(jù)流）變成了單數(shù)據(jù)流。無論 View 有多少個(gè)視圖狀態(tài)，只需要訂閱一個(gè) ViewState 便可以獲取所有狀態(tài)，再根據(jù) ViewState 去響應(yīng)。當(dāng)然，實(shí)踐中應(yīng)該根據(jù)狀態(tài)之間的關(guān)聯(lián)程度來決定數(shù)據(jù)流的個(gè)數(shù)，不應(yīng)該為了使用 MVI 模式而強(qiáng)行將多個(gè)無關(guān)的狀態(tài)壓縮在同一個(gè)數(shù)據(jù)流中。

  • 唯一可信源： 數(shù)據(jù)只有一個(gè)來源（ViewModel），與 MVVM 的思想相同；
  • 單數(shù)據(jù)流： View 和 ViewModel 之間只有一個(gè)數(shù)據(jù)流，只有一個(gè)地方可以修改數(shù)據(jù)，確保數(shù)據(jù)是安全穩(wěn)定的。并且 View 只需要訂閱一個(gè) ViewState 就可以獲取所有狀態(tài)和數(shù)據(jù)，相比 MVVM 是新的特性；
  • 響應(yīng)式： ViewState 包含頁面當(dāng)前的狀態(tài)和數(shù)據(jù)，View 通過訂閱 ViewState 就可以完成頁面刷新，相比于 MVVM 是新的特性。

但 MVI 本身也存在一些缺點(diǎn)：

  • State 膨脹： 所有視圖變化都轉(zhuǎn)換為 ViewState，還需要管理不同狀態(tài)下對應(yīng)的數(shù)據(jù)。實(shí)踐中應(yīng)該根據(jù)狀態(tài)之間的關(guān)聯(lián)程度來決定使用單流還是多流；
  • 內(nèi)存開銷： ViewState 是不可變類，狀態(tài)變更時(shí)需要?jiǎng)?chuàng)建新的對象，存在一定內(nèi)存開銷；
  • 局部刷新： View 根據(jù) ViewState 響應(yīng)，不易實(shí)現(xiàn)局部 Diff 刷新，可以使用 Flow#distinctUntilChanged() 來刷新來減少不必要的刷新。

不過，MVI 并不是一個(gè)全新的設(shè)計(jì)模式，其背后設(shè)計(jì)理念與 Redux 模式如出一轍。在 Redux 里完全可以找到與 MVI 相同的各個(gè)要素，而且明顯 Redux 的命名方式更加清晰無歧義，小伙伴們知道 Model - View - Intent 這個(gè)命名方式的原始出處的話，可以告訴我一聲。

  • View - View
  • Action - Intent
  • Store - ViewModel
  • State - ViewState
  • Reducer - Model
// 1、ViewModel
class MainViewModel: ViewModel() {

    private val mModel = MainModel()

    val mIntent = Channel<MainIntent>(Channel.UNLIMITED)

    private val _state = MutableStateFlow<MainViewState>(MainViewState.Idle)
    val state: StateFlow<MainViewState>
        get() = _state

    init {
        viewModelScope.launch {
            mIntent.consumeAsFlow().collect {
                when (it) {
                    is MainIntent.FetchNew -> fetchNews()
                }
            }
        }
    }

    private fun fetchNews() {
        viewModelScope.launch {
            _state.value = MainViewState.Loading
            _state.value = try {
                MainViewState.News(mModel.fetchNews())
            } catch (e: Exception) {
                MainViewState.Error(e.localizedMessage)
            }
        }
    }
}

// 2、ViewState
sealed class MainViewState {
    object Idle : MainViewState()
    object Loading : MainViewState()
    data class News(val news: List<New>) : MainViewState()
    data class Error(val error: String?) : MainViewState()

}
// 3、Intent
sealed class MainIntent {
    object FetchNew : MainIntent()
}
// 4、View
class MainActivity : AppCompatActivity() {

    private lateinit var mainViewModel: MainViewModel

    private fun observeViewModel() {
        lifecycleScope.launch {
            mainViewModel.state.collect {
                when (it) {
                    is MainViewState.Idle -> {

                    }
                    is MainViewState.Loading -> {
                    }

                    is MainViewState.News -> {
                        renderList(it.news)
                    }
                    is MainViewState.Error -> {
                    }
                }
            }
        }
    }

    private fun renderList(news: List<New>) {
        // do something
    }
}
復(fù)制代碼

5. MVP、MVVM 和 MVI 的對比

MVVM 和 MVP 的思想是相同的，最本質(zhì)的概念就是 Activity 里做的事情太多了，所以要把 Activity 中與 UI 無關(guān)的部分抽離出來，交給別人做。這個(gè) “別人” 在 MVP 里叫作 Presenter，在 MVVM 里叫作 ViewModel。而不論是 MVP 中的約定接口，還是 ViewModel 里的觀察者模式，這些都是實(shí)現(xiàn)上的細(xì)節(jié)而已。

MVI 與前者的主要區(qū)別不在于強(qiáng)調(diào)嚴(yán)格的單向數(shù)據(jù)流，而在于從命令式的開發(fā)模式，轉(zhuǎn)變?yōu)轫憫?yīng)式的開發(fā)模式。我們并不是說越新潮，越復(fù)雜的架構(gòu)就是最好的，只有合適的架構(gòu)才是最好的。但是不可否認(rèn)，從 React 到 Flutter，從 MVI 到 Compose，響應(yīng)式編程似乎有一統(tǒng)天下的趨勢。未來會(huì)怎么樣，我們拭目以待。

參考資料

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容