MVC、MVP、MVVM的理解与使用

前言

对于MVC、MVP、MVVM，这都是Android开发的一种架构，随着日积月累的开发，很对人对这几种模式是再熟悉不过了。不过当初我在学习的时候是因为看一个开源项目的源码是MVP架构的，也找个很多文章，发现很多文章不是全是概念，就是解释的含糊不清，所以写一篇文章来分享，让像我一样的小白可以快速理解这几种架构模式。

---

MVC

MVC全名 Model View Controller
模型（model）-视图（view）-控制器（controller）
- M是指业务模型
- V是指用户界面
- C则是控制器

这是一种常见，也是比较基础的模式。大家比较熟悉。其中View层其实就是程序的 UI 界面，用于向用户展示数据以及接收用户的输入而 Model 层就是 JavaBean 实体类，用于保存实例数据Controller 控制器用于更新 UI 界面和数据实例
我举个简单的例子。如下：
- Module：

public class User {
    private String name;
    private String pwd;

    public User(String name, String pwd) {
        this.name = name;
        this.pwd = pwd;
    }
    ...getter setter
}

• Controller：

public class Controller {
    private Context mContext;
    private User user;

    public Controller(Context context, User user) {
        mContext = context;
        this.user = user;
    }

    public void login() {
        if (!TextUtils.isEmpty(user.getName())
                || !TextUtils.isEmpty(user.getPwd())) {
            if (user.getName().equals("tom")
                    && user.getPwd().equals("123456")) {
                Toast.makeText(mContext, "success", Toast.LENGTH_SHORT).show();
            } else {
                Toast.makeText(mContext, "error", Toast.LENGTH_SHORT).show();
            }
        } else {
            Toast.makeText(mContext, "密码不能为空", Toast.LENGTH_SHORT).show();
        }
    }
}

• MVCActivity(view):

  ...
 mButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                User user = new User(edt_name.getText().toString(), edt_pwd.getText().toString());
                Controller controller = new Controller(getApplicationContext(), user);
                controller.login();
            }
        });

这就是用mvc模式设计的登录代码。可以看到在View中我们可以直接Moduel赋值从而，View里会包含Model信息,这样存在耦合性就比较大，我们希望的是我们View和Controller与交互。Controller包含业务逻辑然后和mudoel交互，但是在mvc中我们做到这样的效果是比较难得，同时很多时候在view和Controller之间往往界限不是那么明了。造成Activity既是View又是Controller造成代码臃肿，耦合度非常高，同时业务逻辑也很难复用。

---

MVP

• M代表Model
• V代表View
• P则是Presenter（Model和View之间的桥梁）

mvp的全称为Model-View-Presenter，Model提供数据，View负责显示，Controller/Presenter负责逻辑的处理。MVP与MVC有着一个重大的区别：在MVP中View并不直接使用Model，它们之间的通信是通过Presenter (MVC中的Controller)来进行的，所有的交互都发生在Presenter内部，而在MVC中View会直接从Model中读取数据而不是通过 Controller

MVP模式的核心思想
把Activity中的UI逻辑抽象成View接口，把业务逻辑抽象成Presenter接口，Model类还是原来的Model类

我们再来看下同样是上面登录的例子：
- 结构

• 代码

module:

public interface IUser {
    String logString();
}

public class User implements IUser {
    private String name;
    private String pwd;

    public User(String name, String pwd) {
        this.name = name;
        this.pwd = pwd;
    }

    ...getter setter
    @Override
    public String logString() {
        return "logString：" + "User{" +
                "name='" + name + '\'' +
                ", pwd='" + pwd + '\'' +
                '}';
    }
}

presenter:

public interface IPresenter<T> {
    void attchView(T view);

    void dettchView();

    void login(User user);
}


public class IPresenterImpl implements IPresenter<IView> {
    private IView mIView;
    @Override
    public void attchView(IView view) {
        mIView = view;
    }

    @Override
    public void dettchView() {
        mIView = null;
    }

    @Override
    public void login(User user) {
        if (!TextUtils.isEmpty(user.getName())
                || !TextUtils.isEmpty(user.getPwd())) {
            if (user.getName().equals("tom")
                    && user.getPwd().equals("123456")) {
                mIView.showSuccessToast("success");
            } else {
                mIView.showErrorToast("error");
            }
        } else {
            mIView.showToast("密码不能为空");
        }
    }
}

view:

public interface IView {

    void showToast(String msg);

    void showSuccessToast(String msg);

    void showErrorToast(String msg);
}

public class MVPActivity extends AppCompatActivity implements IView {
    private EditText edt_name, edt_pwd;
    private Button mButton;
    private IPresenterImpl mPresenter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_mvp);
        edt_name = (EditText) findViewById(R.id.edt_name);
        edt_pwd = (EditText) findViewById(R.id.edt_pwd);
        mButton = (Button) findViewById(R.id.login);
        mPresenter = new IPresenterImpl();
        mPresenter.attchView(this);
        mButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                User user = new User(edt_name.getText().toString(), edt_pwd.getText().toString());
                mPresenter.login(user);
                Log.d("TAG", "onCreate: " + user.logString());

            }
        });
    }

    @Override
    public void showToast(String msg) {
        Toast.makeText(this, msg, Toast.LENGTH_SHORT).show();
    }

    @Override
    public void showSuccessToast(String msg) {
        Toast.makeText(this, msg, Toast.LENGTH_SHORT).show();

    }

    @Override
    public void showErrorToast(String msg) {
        Toast.makeText(this, msg, Toast.LENGTH_SHORT).show();

    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        mPresenter.dettchView();
    }
}

你可能会觉得这就是一个简单的登录，本来可以全部在Activiy中写，现在变成这么多的类不是反而麻烦了吗？回答这个问题，首先我们的项目不可能就这么点逻辑，如果逻辑很多呢？由于mvc之间相互关联耦合性很大，既然我们要做的就是解耦当然类也就增加了很多，但是在mvp中他们的分工层次非常清晰，各司其职，view就是用来更新界面，presenter就是业务逻辑作为moduel和view之间的沟通桥梁，他们这间都是用的接口回调，也大大降低了耦合。以后代码更新和修改也就会更加方便。这里Presenter代替了Controller，它比Controller担当更多的任务，也更加复杂。Presenter处理事件，执行相应的逻辑，这些逻辑映射到Model操作Model。那些处理UI如何工作的代码基本上都位于Presenter。这样view的负担也就变小了许多。
- 优点
1. 分离视图逻辑和业务逻辑，降低耦合
2. Activity只处理生命周期的任务，代码简洁
3. 视图逻辑和业务逻辑抽象到了View和Presenter中，提高阅读性
4. Presenter被抽象成接口，可以有多种具体的实现
5. 业务逻辑在Presenter中，避免后台线程引用Activity导致内存泄漏

---

MVVM
MVVM模式包含三个部分
- Model代表基本的业务逻辑
- View显示内容
- ViewModel将前面两者联系在一起

MVVM模式中，一个ViewModel和一个View匹配，它没有MVP中的IView接口，而是完全的和View绑定，所有View中的修改变化，都会自动更新到ViewModel中，同时ViewModel的任何变化也会自动同步到View上显示。

2015年I/O大会上谷歌介绍了一个非常NB的工具，该工具可以将View和一个对象的field绑定，当field更新的时候，framework将收到通知，然后View自动更新
Data Binding官方原生支持MVVM模型可以让我们在不改变现有代码的框架下，非常容易的使用这些新特性

废话少数，看下例子：
- xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools">

    <data>

        <variable
            name="viewmodule"
            type="com.example.ggxiaozhi.mvcmvpmvvm.login.mvvm.moduleView.UserModuleView"/>
    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".login.mvvm.view.MVVMActivity">

        <EditText
            android:id="@+id/edt_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:addTextChangedListener="@{viewmodule.nameTextChanged}"
            android:hint="用户名"/>

        <EditText
            android:id="@+id/edt_pwd"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:addTextChangedListener="@{viewmodule.pwdTextChanged}"
            android:hint="密码"/>

        <Button
            android:id="@+id/login"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:onClick="@{viewmodule.login}"
            android:text="登录"/>


    </LinearLayout>
</layout>

• view：

public class MVVMActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ActivityMvvmBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_mvvm);
        UserModuleView moduleView = new UserModuleView(this);
        binding.setViewmodule(moduleView);
    }
}

• model：

    private String name = "tom";
    private String pwd = "123456";

    public User(String name, String pwd) {
        this.name = name;
        this.pwd = pwd;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPwd() {
        return pwd;
    }

    public void setPwd(String pwd) {
        this.pwd = pwd;
    }

}

• viewmodel：

public class UserModuleView {
    private String user_name;
    private String user_pwd;
    private Context context;
    private User user;

    public UserModuleView(Context context) {
        this.context = context;
        user = new User();
    }

    public void login(View view) {
        if (!TextUtils.isEmpty(user_name)
                || !TextUtils.isEmpty(user_pwd)) {
            if (user.getName().equals(user.getName())
                    && user.getPwd().equals(user.getPwd())) {
                Toast.makeText(context, "success", Toast.LENGTH_SHORT).show();
            } else {
                Toast.makeText(context, "error", Toast.LENGTH_SHORT).show();

            }
        } else {
            Toast.makeText(context, "密码不能为空", Toast.LENGTH_SHORT).show();
        }
    }

    public TextWatcher nameTextChanged() {
        return new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                user_name = s.toString();
            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        };
    }

    public TextWatcher pwdTextChanged() {
        return new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                user_pwd = s.toString();
            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        };
    }

    public String toString() {
        return "User{" +
                "user_name='" + user_name + '\'' +
                ", user_pwd='" + user_pwd + '\'' +
                '}';
    }
}

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点:
1. 低耦合。View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的”View”上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
3. 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，生成xml代码。
4. 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

其实在我看来，学习MVVM就是在学习Data Binding Library，如果想学号MVVM可以去看看官方文档或是译文，学习好了Data Binding Library对学习MVVM是有很大的帮助的。

---

结语

之前的文章我们提到了dagger2，这个用于mvp中是比较合适的，如果大家是新手我比较建议用mvp开发项目的，以为他多处用到接口回调，即解耦有能帮助大家理解多用接口的好处。其实多做项目，自然就会更加理解了。这个例子虽然很小，但是如果大家用心敲一遍，一定是会有收获的。如果想学习更多请参考我的开源项目百篮应用里面的技术我博客都有提到。也会帮你更好的理解mvp模式。