MVC、MVP、MVVM的理解与使用

前言

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

MVC

MVC全名 Model View Controller
模型（model）-视图（view）-控制器（controller）

M是指业务模型
V是指用户界面
C则是控制器

mvc

这是一种常见，也是比较基础的模式。大家比较熟悉。其中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类

mvp

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

结构

mvp

代码

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的负担也就变小了许多。

优点

分离视图逻辑和业务逻辑，降低耦合
Activity只处理生命周期的任务，代码简洁
视图逻辑和业务逻辑抽象到了View和Presenter中，提高阅读性
Presenter被抽象成接口，可以有多种具体的实现
业务逻辑在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模型可以让我们在不改变现有代码的框架下，非常容易的使用这些新特性

mvvm

废话少数，看下例子：

<?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），有几大优点:

低耦合。View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的”View”上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，生成xml代码。
可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

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

结语

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

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,098评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,213评论 2赞 380
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 149,960评论 0赞 336
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,519评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,512评论 5赞 364
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,533评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,914评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,574评论 0赞 256
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,804评论 1赞 296
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,563评论 2赞 319
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,644评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,350评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,933评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,908评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,146评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,847评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,361评论 2赞 342

MVC、MVP、MVVM的理解与使用

前言

MVC

MVP

结语

推荐阅读更多精彩内容