转：MVVM的基本入门简介

https://mp.weixin.qq.com/s?__biz=MzA3MjA4NjE3NQ==&mid=404502568&idx=1&sn=fe512f9820b99d3cc8212e363ff57195&scene=1&srcid=0407PIdwHgMcWOBI7P2zEgCa&key=b28b03434249256bd8382e5caf525bcb36d6b31e18f2e933d895b3f91b6a6e10a1d42d613b275625f39a121137975d80&ascene=0&uin=Mjc3OTU3Nzk1&devicetype=iMac+MacBookPro10%2C1+OSX+OSX+10.10.5+build%2814F27%29&version=11020201&pass_ticket=%2F8olw2Mg3%2BO3Hdredp8Koo4%2FdLP647sSn5SKAT3uD06Nfhyo6Peebt0qCKuYnh6O

 

［掘金翻译计划］MVVM 模式介绍

原创 2016-04-06 Sausure 稀土圈

 

DuangDuangDuangDuang！在今天的干货分享开始以前，请容稀土君先插播一条广告：

 

Coding 技术小馆第二站北京的活动，掘金 CEO 也是前端负责人阴明会作一场关于 Vue.js 组件化的分享，同时其余的嘉宾有：Coding 前端高级工程师刘辉分享《Redux 与 React 服务器端渲染》、AWS 解决方案架构师赵霏《用 Javascript 玩转云计算》、野狗联合创始人肖光宇分享《Web 前端的实时化》。

 

是的，你没看错，就是咱们明明能够靠脸吃饭却恰恰要用实力说话的阴明大大也会上台分享哦。他将作的是关于一个轻量级 MVVM 框架 Vue.js 组件化内容的分享，为了防止有些同窗还不知道 MVVM 是什么，本期咱们特别准备了这篇关于 MVVM 模式的介绍，但愿能帮助到你哦。

 

仍是快点看文章吧。👇

 

－－－－－－－－－－－－－－－－－－－

 

我考察了一段时间安卓的数据绑定类库，决定尝试下它的「Model-View-ViewModel」模式。由于我曾经和 @matto1990 合做开发过一款应用 HackerNews Reader，因此我决定利用这种模式从新实现它。

 

 

这篇文章经过一款简单的 app 来论证 MVVM 模式，我建议你先看看这个项目，让你大概了解下它。

 

什么是 MVVM 模式?

 

Model-View-ViewModel 就是将其中的 View 的状态和行为抽象化，让咱们能够将 UI 和业务逻辑分开。固然这些工做 ViewModel 已经帮咱们作了，它能够取出 Model 的数据同时帮忙处理 View 中因为须要展现内容而涉及的业务逻辑。

 

MVVM模式是经过如下三个核心组件组成，每一个都有它本身独特的角色：

 

• Model－包含了业务和验证逻辑的数据模型

• View－定义屏幕中 View 的结构，布局和外观

• ViewModel－扮演「View」和「Model」之间的使者，帮忙处理 View 的所有业务逻辑

 

 

那这和咱们曾经用过的 MVC 模式有什么不一样呢？如下是 MVC 的结构

 

• View 在 Controller 的顶端，而 Model 在 Controller 的底部

• Controller 须要同时关注 View 和 Model

• View 只能知道 Model 的存在而且能在 Model 的值变动时收到通知

   

MVVM 模式和 MVC 有些相似，但有如下不一样：

 

• ViewModel 替换了 Controller，在 UI 层之下

• ViewModel 向 View 暴露它所须要的数据和指令对象

• ViewModel 接收来自 Model 的数据

   

你能够看到这两种模式有着类似的结构，但新加入的 ViewModel 是用不一样的方法将组件们联系起来的，它是双向的，而 MVC 只能单向链接。

 

归纳起来，MVVM 是由 MVC 发展而来－经过在 Model 之上而在 View 之下增长一个非视觉的组件未来自 Model 的数据映射到 View 中。接下来，咱们将更多地看到 MVVM 的这种特性。

 

THE HACKER NEWS READER

 

正如前面说起过的，我将我原来的一个项目拆开为这篇文章服务。这款应用有如下几种特性:

 

• 查看帖子列表

• 查看单个帖子

• 查看帖子下的评论

• 查看指定做者的帖子

   

下面的图片能让你很快了解它是怎么工做的：

 

 

左边的图片展现的是帖子的列表，它也是这款应用的主要部分，接下来右边的图片展现的是该帖子的评论列表，它和前者有类似的地方，但也有一些不一样，咱们将在后面看到。

 

展现帖子

 

 

每一个帖子信息都用 RecyclerView 所包含的 CardView 包装起来，正如上图展现的。

 

使用 MVVM 咱们能够将不一样层抽象出来很好的实现这些卡片，这意味着每一个 MVVM 组件只要处理它被分配的任务便可。经过使用前面介绍的 MVVM 的不一样组件，组合在一块儿后能构造出咱们的帖子卡片实例，那么咱们该如何将它们从布局中抽离出来？

 

 

MODEL

简单来讲，Model 由那些帖子的业务逻辑组成，包括一些像 id，name，text 之类的属性，如下代码展现了该类的部分代码：

 

 

 

 

为了可读性，上面的 POST 类中去掉了一些 Parcelable 变量和方法

 

这里你能够看到 Post 类只包含全部它的属性，没有一点别的逻辑 - 别的组件会处理它们。

 

View

 

View 的任务是定义布局，外观和结构。View 最好能彻底经过 XML 来定义，即便它包含些许 Java 代码也不该该有业务逻辑部分，

 

View 会经过绑定从 ViewModel 中取出数据。在运行时，若 ViewModel 的属性的值有变化的话它会通知 View 来更新UI。

 

首先，咱们先给 RecyclerView 传入一个自定义的适配器。为此，咱们须要让咱们的 BindingHolder 类持有对 Binding 的引用。

 

 

onBindViewHolder() 方法才是真正将 ViewModel 和 View 绑定的地方。咱们获取一个 ItemPostBinding 对象（它会被 item_post 布局自动生成），而后将新建的 PostViewModel 对象传给它的 ViewModel 引用。

 

 

下面就是完整的 PostAdaper 类：

 

 

 

看下咱们的XML布局，首先咱们要将全部的布局都包含在layout标签下，同时使用data标签来声明咱们的 ViewModel:

 

 

声明 ViewModel 可让咱们在整个布局中引用它，在 item_post 布局中咱们会屡次用到 ViewModel：

 

androidText－你能够从 ViewModel 中引用相应的方法给文本视图设置内容。正以下面你所看到的 @{viewModel.postTitle}，它从 ViewModel 中引用了 getPostTitle() 方法－它将返回相应帖子的标题。

 

onClick－咱们也能够引用单击事件到布局文件中。如你所看到的，@{viewModel.onClickPost} 是指从 ViewModel 中引用 onClickPost() 方法－它将返回一个能处理单击事件的 OnClickListener 对象。

 

visibility - 控制去 comments activity 的入口，依赖于该帖子是否有相应的评论。经过检查 comments list 的长度来决定该 visibility 的值，这些操做都是在 ViewModel 中完成的。在这里，咱们引用了它的 getCommentsVisiblity() 方法来计算是否该显示

 

 

这样作实在太棒了，咱们能抽象出显示逻辑到咱们的布局文件中，让咱们的 ViewModel 来关注它们。

 

VIEWMODEL

 

ViewModel 扮演了 View 和 Model 之间使者的角色，让它来关注全部涉及到 View 的业务逻辑，同时它能够访问 Model 的方法和属性，这些最终会做用到 View 中。经过 ViewModel，能够移除本来须要在别的组件中返回或处理的数据。

 

在这里，PostViewModel 用 Post 对象来处理 CardView 须要显示的内容，在下面的类中，你能够看到一系列的方法，每一个方法对最终做用于咱们的帖子视图。

 

getPostTitle()－经过 Post 对象返回一个帖子的标题

 

getPostAuthor()－这个方法首先会从应用的resources中获取相应的字符串，而后传入Post对象的author属性对它进行格式化，若是isUserPosts 等于true咱们就须要加入下划线，最终返回该字符串。

 

getCommentsVisibility()－该方法决定是否显示有关评论的TextView onClickPost()－该方法返回相应View须要的OnClickListener

 

这些例子代表不一样的业务逻辑都有咱们的 ViewModel 来处理。下面就是咱们 PostViewModel 类的完整代码以及那些被item_post布局引用的方法。

 

 

是否是很爽？正如你看到的，咱们的 PostViewModel 关注如下方面： 

 

• 维护 Post 对象的属性，最终会在 View 中展现

• 对这些属性进行相应的格式化

• 经过 onclick 属性给相应的views对提供点击事件的支持

• 经过 Post 对象的属性处理相关 views 的显示

   

测试 VIEWMODEL

 

使用 MVVM 的一大好处是咱们能够很容易对 ViewModel 进行单元测试。在 PostViewModel 中，能够写些简单的测试方法来验证咱们的 ViewModel 是否正确实现。

 

shouldGetPostScore()－测试getPostScore()方法，确认该帖子的得分是否正确地格式化成字符串对象并返回。

 

shouldGetPostTitle()－测试getPostTitle()方法，确认该帖子的标题被正确返回。

 

shouldGetPostAuthor()－测试getPostAuthor()方法，确认返回的帖子的做者被正确地格式化了

 

shouldGetCommentsVisiblity()－测试getCommentsVisibility()方法是否正确返回了visibility属性的值，它将会用在帖子的 Comments 按钮中。咱们传入一个包含不一样状态的ArrayLists来确认它是否能正确返回。

 

 

 

如今咱们能够知道的 ViewModel 已经正确工做了！！

 

评论

 

实现评论的方法和前面很像但仍是有点不一样。

 

有两个不一样的 ViewModel 被用来操做此次评论， CommentHeaderViewModel 和 CommentViewModel。正如你在CommentAdapter中看到的，咱们的 View 有两种的不一样类型：

 

private static final int VIEW_TYPE_COMMENT = 0;

private static final int VIEW_TYPE_HEADER = 1;

 

若是该帖子是一个发问的帖子，咱们将在屏幕的顶端显示一个头部，它显示所问的问题－接着评论会正常显示在下面。同时你应该会注意到在 onCreateViewHolder() 中咱们会经过判断 VIEW_TYPE 来加载不一样的布局，它会返回两种不一样布局中的其中一种。

 

 

接着在咱们的 onBindViewHolder() 方法中咱们会根据不一样的视图类型来建立绑定。这是由于不一样的 ViewModel 对头部有不一样的处理方法

 

 

这就是它们的不一样点，评论部分有两个不一样的 ViewModel 类型 — 取决于该帖子是不是发问类的帖子。

 

总结

 

若是正确使用，数据绑定类库可能会改变咱们开发应用的方式。固然，还有其余方法实现数据的绑定，使用 MVVM 模式只是其中的一种途径。

 

好比，你能够在布局中引用咱们的 Model 而后经过它的变量引用直接访问它的属性：

 

 

同时咱们能够很容易从adapers和classes中移除一些基础的显示逻辑。下面有种很新颖的方法实现咱们这种需求：

 

 

 

这就是我看到上面实现方式的表情！

 

我认为这是数据绑定类库中很差的地方，它将 View 的显示逻辑包含到了 View 中。不只会形成混乱，也让咱们的测试和调试变的更加困难，由于它将逻辑和布局混淆在一块儿。

 

固然，认定MVVM是开发应用的正确方式还为时过早，但此次尝试也让我有机会见识到将来项目的一种趋势。若是你想阅读更多有关数据绑定类库的文章，你能够看这里。同时微软也有一篇关于MVVM通俗易懂的文章。

 

我很愿意听取大家想法，若是大家有任何的见解和建议能够随时发 Tweet 和我讨论！

 

• 原文标题：Approaching Android with MVVM — ribot labs — Medium

• 原文做者：Joe Birch

• 译文出自：掘金翻译计划

• 译者：Sausure

• 校对者：EthanWu (ethan-wu)、dodocat (Quanqi)、foolishgao

 

因为微信公众对于外链还有文章字数的诸多限制，文中代码部分以图片呈现，会出现不完整的状况。你能够在稀土圈微信公众号窗口回复「MVVM」获取译文地址，前往掘金社区阅读。

 

怎么样，看完文章是否是有所收获了呢？若是你还想获取更多更有意思的干货，不如点击文章左下角的「阅读原文」按钮，报名本月十号在北京举办的 Coding 线下前端分享活动吧。