MVC vs. MVP vs. MVVM on Android

在过去的几年里，将Android应用程序转变成逻辑组件的方法已经逐渐成熟。很大程度上摆脱了MVC模式，转而采用更模块化、可测试的模式。

Model View Presenter (MVP) & Model View ViewModel (MVVM)是最广泛被采用的两种替代方案。本文不去讨论哪种方式更适合于Android应用开发，只是通过案例来看到每种模式是如何编写的。

本文通过实现一个井字游戏，分别通过MVC、MVP、MVVM三种模式实现游戏效果。源代码已经上传到Github仓库中。

MVC

Model, View, Controller将应用程序在宏观层面分为3中职责。

Model

Model模型是应用程序中的数据+状态+业务逻辑。可以说是应用程序的大脑，不受View视图和Controller控制器的束缚，因此很多情况下是可以复用的。

View

View视图是Model的展现，负责呈现UI并在用户与应用程序交互时与Controller通信。在MVC架构中，视图通常很“愚蠢”，因为他们不了解底层模型，也没有对状态的理解，或者当用户通过单击按钮，键入值等进行交互时要做什么。这个想法是越少他们知道他们对模型的耦合越松散，因此他们要改变的就越灵活。

Controller

Controller是将app粘在一起的胶水，它是应用程序中的主控制器。当View告诉Controller用户单击按钮时，Controller决定如何与Model进行相应的交互。根据Model中的数据更改， Controller可以根据需要更新View的状态。在Android应用程序中，Controller几乎总是由Activity或Fragment来担任的。

这就是我们的井字游戏中每个类扮演的角色

让我们更详细地检查Controller。

public class MVCTicTacToeActivity extends AppCompatActivity {
    private static String TAG = MVCTicTacToeActivity.class.getName();

    private Board model;

    private ViewGroup buttonGrid;
    private View winnerPlayerViewGroup;
    private TextView winnerPlayerLabel;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_mvc_tictactoe);
        winnerPlayerLabel = (TextView) findViewById(R.id.winnerPlayerLabel);
        winnerPlayerViewGroup = findViewById(R.id.winnerPlayerViewGroup);
        buttonGrid = (ViewGroup) findViewById(R.id.buttonGrid);

        model = new Board();
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.menu_tictactoe, menu);
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.action_reset:
                reset();
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }

    public void onCellClicked(View v) {

        Button button = (Button) v;

        String tag = button.getTag().toString();
        int row = Integer.valueOf(tag.substring(0,1));
        int col = Integer.valueOf(tag.substring(1,2));
        Log.i(TAG, "Click Row: [" + row + "," + col + "]");

        Player playerThatMoved = model.mark(row, col);

        if(playerThatMoved != null) {
            button.setText(playerThatMoved.toString());
            if (model.getWinner() != null) {
                winnerPlayerLabel.setText(playerThatMoved.toString());
                winnerPlayerViewGroup.setVisibility(View.VISIBLE);
            }
        }

    }

    private void reset() {
        winnerPlayerViewGroup.setVisibility(View.GONE);
        winnerPlayerLabel.setText("");

        model.restart();

        for( int i = 0; i < buttonGrid.getChildCount(); i++ ) {
            ((Button) buttonGrid.getChildAt(i)).setText("");
        }
    }
}

评估

MVC在分离模型和视图方面做得很好。当然，该模型可以很容易地进行测试，因为它不依赖于任何东西，并且视图在单元测试级别上没有什么可测试的。然而，控制器有一些问题。

Controller关注

可测试性 - Controller与Android API紧密联系，难以进行单元测试。
模块化和灵活性 - Controller与View紧密耦合。它也可能是View的扩展。如果我们更改View，我们必须返回并更改Controller。
维护 - 随着时间的推移，越来越多的代码开始转移到Controller中，使它们变得臃肿和脆弱。

我们如何解决这个问题？MVP来拯救！

MVP

MVP将Controller断开，以便自然View/Activity耦合可以发生，而不会与其他“Controller”责任相关联。让我们再次从MVC对比开始。

Model

与MVC相同/无变化

View

这里唯一的变化是Activity/Fragment现在被视为View的一部分。让Activity实现一个视图界面，以便Presnenter有一个可以编码的界面。这消除了将它耦合到任何特定的页面，并允许使用视图的mock实现进行简单的单元测试。

Presenter

这实质上是MVC的Controller，除了它完全不依赖于View，只是一个接口。这解决了可测试性问题以及我们在MVC中遇到的模块化/灵活性问题。实际上，MVP纯粹主义者认为Presenter不应该对任何Android API或代码有任何引用。

我们再来看看在我们的应用程序中在MVP中的分解。

在下面更详细地看看Presenter，你会注意到的第一件事是每个动作的意图是多么简单和清晰。它不是告诉View如何显示某些东西，而只是告诉它要显示什么。

public class TicTacToePresenter implements Presenter {
    private TicTacToeView view;
    private Board model;

    public TicTacToePresenter(TicTacToeView view){
        this.view = view;
    }

    @Override
    public void onCreate() {
        model = new Board();
    }

    @Override
    public void onPause() {

    }

    @Override
    public void onResume() {

    }

    @Override
    public void onDestroy() {

    }


    public void onButtonSelected(int row, int col) {
        Player playerThatMoved = model.mark(row, col);

        if(playerThatMoved != null) {
            view.setButtonText(row, col, playerThatMoved.toString());

            if (model.getWinner() != null) {
                view.showWinner(playerThatMoved.toString());
            }
        }
    }

    public void onResetSelected() {
        view.clearWinnerDisplay();
        view.clearButtons();
        model.restart();
    }
}

为了在不将Activity与Presenter绑定的情况下进行这项工作，我们创建了一个Activity实现的接口。在测试中，我们将基于此接口创建一个mock来测试与Presenter和View的交互。

public interface TicTacToeView {
    void showWinner(String winnerLabel);
    void clearWinnerDisplay();
    void clearButtons();
    void setButtonText(int row,int col,String text);
}

评估

我们可以很容易地对Presenter逻辑进行单元测试，因为它没有绑定到任何Android特定的View和API，并且只要View实现*TicTacToeView*界面，我们也可以使用任何其他View。

Presenter的关注

维护 - 与Controller一样，Presenter随着时间的推移，倾向于收集额外的业务逻辑。在某些时候，开发者经常会发现自己拥有难以分开的笨重的Presenter。

当然，开发人员可以谨慎的防止这种情况发生。但是，MVVM可以更好的解决这个问题。

MVVM

Android上具有数据绑定功能的 MVVM具有易于测试和模块化的优点，同时还减少了我们必须编写的连接View +Model的代码数量。

我们来看看MVVM的各个部分。

Model

与MVC相同/无变化

View

该View以一种灵活的方式绑定到由viewModel来监控可观察的变量和操作。

ViewModel

ViewModel负责包装Model并准备View所需的可观察数据。它还为View提供了将事件传递给Model的hocks。然而，ViewModel并不依赖于View。

我们的程序早MVVM模式中分解。

让我们仔细看看这里的代码，从ViewModel开始。

public class TicTacToeViewModel implements ViewModel {
    private Board model;
    public final ObservableArrayMap<String,String> cells = new ObservableArrayMap<>();
    public final ObservableField<String> winner = new ObservableField<>();

    public TicTacToeViewModel(){
        model = new Board();
    }

    @Override
    public void onCreate() {

    }

    @Override
    public void onPause() {

    }

    @Override
    public void onResume() {

    }

    @Override
    public void onDestroy() {

    }

    public void onResetClick(){
        model.restart();
        winner.set(null);
        cells.clear();
    }

    public void onCellClick(int row, int col){
        Player player = model.mark(row,col);
        cells.put(""+row+col,player == null?null:player.toString());
        winner.set(model.getWinner()==null?null:model.getWinner().toString());
    }
}

查看xml文件，看看这些变量和事件是如何绑定的。

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <import type="android.view.View" />
        <variable
            name="player"
            type="com.shijc.mvx.mvvm.viewmodel.TicTacToeViewModel"/>
    </data>

    <LinearLayout
        android:id="@+id/tictactoe"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        tools:context="com.acme.tictactoe.view.TicTacToeActivity">

        <GridLayout
            android:id="@+id/buttonGrid"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:columnCount="3"
            android:rowCount="3">

            <Button
                style="@style/tictactoebutton"
                android:onClick="@{() -> player.onCellClick(0,0)}"
                android:text='@{player.cells["00"]}' />

            <Button
                style="@style/tictactoebutton"
                android:onClick="@{() -> player.onCellClick(0,1)}"
                android:text='@{player.cells["01"]}' />

            <Button
                style="@style/tictactoebutton"
                android:onClick="@{() -> player.onCellClick(0,2)}"
                android:text='@{player.cells["02"]}' />

            <Button
                style="@style/tictactoebutton"
                android:onClick="@{() -> player.onCellClick(1,0)}"
                android:text='@{player.cells["10"]}' />

            <Button
                style="@style/tictactoebutton"
                android:onClick="@{() -> player.onCellClick(1,1)}"
                android:text='@{player.cells["11"]}' />

            <Button
                style="@style/tictactoebutton"
                android:onClick="@{() -> player.onCellClick(1,2)}"
                android:text='@{player.cells["12"]}' />

            <Button
                style="@style/tictactoebutton"
                android:onClick="@{() -> player.onCellClick(2,0)}"
                android:text='@{player.cells["20"]}' />

            <Button
                style="@style/tictactoebutton"
                android:onClick="@{() -> player.onCellClick(2,1)}"
                android:text='@{player.cells["21"]}' />

            <Button
                style="@style/tictactoebutton"
                android:onClick="@{() -> player.onCellClick(2,2)}"
                android:text='@{player.cells["22"]}' />

        </GridLayout>


        <LinearLayout
            android:id="@+id/winnerPlayerViewGroup"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="vertical"
            android:visibility="@{player.winner == null ? View.GONE:View.VISIBLE}"
            tools:visibility="visible">

            <TextView
                android:id="@+id/winnerPlayerLabel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="20dp"
                android:textSize="40sp"
                android:text="@{player.winner}"
                tools:text="X" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Winner"
                android:textSize="30sp" />

        </LinearLayout>

    </LinearLayout>

</layout>

评估

单元测试现在更容易，因为你真的不依赖于View。测试时，您只需要验证Model更改时是否正确设置了可观察变量。没有必要mock测试View，因为有MVP模式。

MVVM关注

维护 - 由于View可以绑定到变量和表达式，因此无关的表示逻辑可能会随着时间的推移而变动，从而有效地将代码添加到我们的XML中。为了避免这种情况，总是直接从ViewModel获取值，而不是试图在视图绑定表达式中计算或派生它们。这样计算可以适当地进行单元测试。

结论

MVP和MVVM在将应用程序分解为模块化单一用途组件方面比MVC做得更好，但它们也增加了应用程序的复杂性。对于只有一个或两个屏幕的非常简单的应用程序，MVC可能工作得很好。带有数据绑定的MVVM具有吸引力，因为它遵循更加反应式的编程模型，并且生成的代码更少。

如果您有兴趣在实践中看到MVP和MVVM的更多示例，我鼓励您查看Google Architecture Blueprints项目。还有很多博客文章深入探讨这几种模式

参考

https://academy.realm.io/posts/eric-maxwell-mvc-mvp-and-mvvm-on-android

源码地址

本文作者： shijiacheng
本文链接： http://shijiacheng.studio/2018/07/01/mvx/
版权声明： 转载请注明出处！

MVC vs. MVP vs. MVVM on Android

MVC

Model

View

Controller

评估

Controller关注

MVP

Model

View

Presenter

评估

Presenter的关注

MVVM

Model

View

ViewModel

评估

MVVM关注

结论

参考

OkHttp實現全局過期token自動刷新

MVC vs. MVP vs. MVVM on Android

Android啓動頁解決攻略最終版

通過python玩微信“跳一跳”

中介者模式

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結