深入探索 Jetpack Compose 架构之MVP、MVVM、MVI选型之道

2024-01-10 13:57:20

Jetpack Compose 中的应用程序架构：MVP、MVVM 和 MVI

作为 Android 开发的新一代 UI 框架，Jetpack Compose 以其简洁、高效和强大的优势迅速成为广大开发者的首选。然而，在实际项目中，如何选择合适的应用程序架构以充分发挥 Jetpack Compose 的潜力却成为了一大难题。MVP、MVVM 和 MVI 等架构各有千秋，面对如此多的选择，如何做出最佳决策呢？

三种主流架构

MVP 架构

MVP（Model-View-Presenter）是一种经典的应用程序架构，以其简单性和易于理解的特性广受欢迎。在 MVP 架构中，应用程序分为三个主要组件：

模型： 负责数据的处理和存储。
视图： 负责数据的呈现。
表示者： 负责协调模型和视图之间的交互。

MVVM 架构

MVVM（Model-View-ViewModel）是一种更为现代的应用程序架构，它吸收了 MVP 架构的优点，同时解决了 MVP 架构的一些不足之处。在 MVVM 架构中，应用程序同样分为三个主要组件：

模型： 负责数据的处理和存储。
视图： 负责数据的呈现。
视图模型： 负责协调模型和视图之间的交互。

MVI 架构

MVI（Model-View-Intent）是一种新型的应用程序架构，它借鉴了函数式编程的思想，将应用程序的状态管理与视图分离。在 MVI 架构中，应用程序分为三个主要组件：

模型： 负责数据的处理和存储。
视图： 负责数据的呈现。
意图： 负责将用户的输入传递给模型。

比较和选择

下表对 MVP、MVVM 和 MVI 三种架构进行了比较，供您参考：

架构	优点	缺点
MVP	清晰的分层	学习成本较高
MVVM	简洁性和可维护性	学习成本较高
MVI	可预测性	学习成本较高

最终，您应该根据项目的具体情况选择合适的应用程序架构。对于小型项目，MVP 架构可能是一个不错的选择。对于中大型项目，MVVM 架构可能更适合。对于需要高可预测性和可测试性的项目，MVI 架构可能是最佳选择。

代码示例

为了更好地理解这三种架构，我们提供以下代码示例：

MVP 架构

// Model
class DataModel {

    private var data: String = ""

    fun getData(): String {
        return data
    }

    fun setData(data: String) {
        this.data = data
    }
}

// View
class MainActivity : AppCompatActivity() {

    private lateinit var presenter: MainPresenter
    private lateinit var dataTextView: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        dataTextView = findViewById(R.id.dataTextView)
        presenter = MainPresenter(this, DataModel())
    }

    fun displayData(data: String) {
        dataTextView.text = data
    }
}

// Presenter
class MainPresenter(private val activity: MainActivity, private val model: DataModel) {

    fun loadData() {
        model.setData("Hello World!")
        activity.displayData(model.getData())
    }
}

MVVM 架构

// Model
class DataModel {

    private var data: String = ""

    fun getData(): String {
        return data
    }

    fun setData(data: String) {
        this.data = data
    }
}

// ViewModel
class MainViewModel : ViewModel() {

    private val model = DataModel()

    fun getData(): String {
        return model.getData()
    }

    fun setData(data: String) {
        model.setData(data)
    }
}

// View
class MainActivity : AppCompatActivity() {

    private lateinit var viewModel: MainViewModel
    private lateinit var dataTextView: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        dataTextView = findViewById(R.id.dataTextView)
        viewModel = ViewModelProvider(this).get(MainViewModel::class.java)

        viewModel.getData().observe(this, Observer { data ->
            dataTextView.text = data
        })

        viewModel.setData("Hello World!")
    }
}

MVI 架构

// Model
class DataModel {

    private var state: String = ""

    fun updateState(intent: Intent) {
        when (intent) {
            is LoadDataIntent -> state = "Loading..."
            is DataLoadedIntent -> state = intent.data
        }
    }

    fun getState(): String {
        return state
    }
}

// View
class MainActivity : AppCompatActivity() {

    private lateinit var dataTextView: TextView
    private lateinit var intents: MutableState<List<Intent>>

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        dataTextView = findViewById(R.id.dataTextView)
        intents = remember { mutableStateOf(listOf(LoadDataIntent())) }

        val model = DataModel()
        LaunchedEffect(intents) {
            intents.value.forEach { intent ->
                model.updateState(intent)
                dataTextView.text = model.getState()
            }
        }
    }
}