网站开发竞品分析,wordpress响应式模板工业用,广东深圳罗湖直客三部,网站建站那个好一个常规软件或者 APP 一般都是服务于某种商业或者非商业述求#xff0c;我们平常称为“业务需求”。随着业务需求的扩张、一个软件会变得越来越庞大#xff0c;越来越复杂。所以一般都会有一套完整的架构设计、研发流程以及质量管理体系来保证整个研发过程。关于“架构设计”…一个常规软件或者 APP 一般都是服务于某种商业或者非商业述求我们平常称为“业务需求”。随着业务需求的扩张、一个软件会变得越来越庞大越来越复杂。所以一般都会有一套完整的架构设计、研发流程以及质量管理体系来保证整个研发过程。关于“架构设计”这是一个很大的话题伴随着我们的业务需求它会涉及到方方面面我们今天来谈一谈其中的一个基础环节——MVVM模式。
一、经典的 MVC 模式
MVC 是最常见的客户端软件架构之一它历史悠久简单好用易于理解而且目前常见的 iOS 和 Android 开发SDK 和与其搭配的 IDE 工具都是默认以 MVC 的方式来使用的。但是我个人更喜欢 MVVM 模式也一直坚持使用 MVVM 模式来工作了很多年。
最常见的客户端架构有三种
MVC: Model-View-ControllerMVP: Model-View-PresenterMVVM: Model-View-ViewModel
在 MVC 里面Model 是数据模型View 是视图或者说就是我们的软件界面需要去展示的东西Controller 是用来控制Model的读取、存储以及如何在 View上 展示数据更新数据的逻辑控制器。
对应到 iOS 开发中View 约等于 StoryboardController 就是 ViewControllerModel 的话是需要我们自己去创建的一些实体EntityClass。对应到 Android 开发中View 约等于 Layout 中的 xml Controller 就是 ActivityModel 同上。对应到 React-Native 开发中View 约等于 Component 中的 render 函数部分Controller 就是整个 ComponentModel 同上。
这里为什么要说 View 约等于 Storyboard 或者 Layout 呢因为 Storyboard 和 Layout 都被设计为一种界面View的描述语言它描述了整个 View 应该长成什么样子应该具有哪些控件。程序启动时系统会首先读取 Storyboard 或者 Layout 文件通过渲染引擎去把这种 View 的描述语言渲染成一个真正的 View此时此刻的 View 才是 MVC 中的那个真正的 V。网络上还有一些文章论调说 Activity 并不能算真正的 Controller 等等在这里我们就不纠结这些细节了。
二、VC 到 VM 的转变
我们前面有提到一个常见的 Controller下称 VC 中会包含 Model 的读取、存储等功能除此之外还会有一些控件的事件绑定和响应甚至还有网络请求等等。
一个 VC 在包含了大量的业务逻辑后代码就会变得特别的臃肿、不易阅读和修改。于是后来就慢慢延伸出了 MVP 和 MVVM 模式。MVP 这里我们就跳过了直接讲 MVVM 模式。MVVM 模式顾名思义是由 Model、View 和 ViewModel下称 VM 组成之前的 VC 变成了 VM。怎么来理解 VM 呢
MVVM是一种设计思想它是Model-View-ViewModel的缩写。它也是MVC的增强版。
Model是代表数据模型也可以在Model中定义数据修改和操作的业务逻辑。View是代表UI组件它负责将数据模型转化成UI展现出来。ViewModel是一个同步View和Model的对象。 在MVVM框架下View和Model之间并没有直接联系而是通过ViewModel桥梁进行交互。Model和ViewModel之间的交互是双向的。
ViewModel通过双向数据绑定将View和Model层连接了起来而View和Model之间的同步工作都是完全自动的无需人为操作。 对于一个 Model 比如我们要存储和显示一个人的信息这个人具有姓名、年龄、性别这三个属性。这个Model的伪代码如下
class Person {String name;int age;int gender;
}Model 的数据模型和我们的业务需求或者说业务实体Entity是一一映射关系。而 ViewModel 顾名思义就是一个 Model of View它是一个 View 信息的存储结构ViewModel 和 View 上的信息是一一映射关系。
以一个软件的登陆场景为例子假设这个登录界面上有如下逻辑
用户名输入框密码输入框登陆按钮点击登陆按钮按钮置灰显示 loading 框登陆成功页面触发跳转登陆失败loading 框消失在界面上显示错误信息错误信息可以分为两种情况 1、密码错误2、没有网络
那么我们下面来定义这样一个 ViewModel
class LoginViewModel {String userId;String password;bool isLoading;bool isShowErrorMessage;String errorMessage;
}界面初始化
由于 LoginView 和 LoginViewModel 是映射关系也称为绑定关系那么 LoginViewModel 是怎样的数据View 就按照怎样的数据来进行显示。界面第一次打开时整个 LoginViewModel 的初始值为
{userId ,password: ,isLoading: false,isShowErrorMessage: false,errorMessage:
}那么此时界面为
用户名输入框显示为空白字符串密码输入框显示为空白字符串loading 框因为 isLoading false所以不显示错误信息框 因为 isShowErrorMessage false所以不显示错误信息框里面的文字为空白字符串
触发登陆
接下来用户输入用户名和密码点击登录按钮在登陆事件里面触发网络通信逻辑同时设定 isLoading true伪代码如下
function onLoginButtonClick() {request(url, ...);loginViewModel.isLoading true;
}此时 LoginViewModel 的值为
{userId this is user id,password: this is password,isLoading: true,isShowErrorMessage: false,errorMessage:
}随着 isLoading 值的变化因为 ViewModel 和 View 存在绑定关系那么此时界面动态变化为
用户名输入框显示为刚刚输入的字符串密码输入框显示为刚刚输入的字符串因为isLoading true所以显示 loading 框因为isLoading true登陆按钮置灰不可点击错误信息框 因为 isShowErrorMessage false所以不显示错误信息框里面的文字为空白字符串
登录失败
接下来我们假设登陆失败服务器返回密码错误那么此时在服务器逻辑的相应代码里面我们去设定 isLoading falseisShowErrorMessage true以及对应的errorMessage伪代码如下
request(url, {success: function() {...},fail: function(err) {if(err.code 1000) { // 假设1000表示密码错误loginViewModel.isLoading false;loginViewModel.isShowErrorMessage true;loginViewModel.errorMessage 密码错误;}}
})此时 LoginViewModel 的值为
{userId this is user id,password: this is password,isLoading: false,isShowErrorMessage: ture,errorMessage: 密码错误
}接下来依然是触发界面变化根据绑定关系重新更新显示内容
用户名输入框显示为刚刚输入的字符串密码输入框显示为刚刚输入的字符串因为isLoading false隐藏 loading 框因为isLoading false登陆按钮置为正常可以点击因为 isShowErrorMessage true显示错误信息框错误信息框里面的文字为“密码错误”
重新登录
用户修改密码后重新点击登陆按钮
function onLoginButtonClick() {loginViewModel.isLoading true;loginViewModel.isShowErrorMessage: false,request(url, ...);
}到这里相信大家都会知道了错误提示框消失显示 loading 框登陆按钮置灰。
所以这就是 MVVM 模式的神奇之处让你不要去关心如何去显示登录框如何去置灰一个按钮如何去显示错误提示框又如何去隐藏它等等。当然这里说的“不关心”并不代表不需要知道这些完全不处理这些逻辑只是在架构上给你一种更清晰更简单的原则那就是 “当任何外部事件发生时永远只操作 ViewModel 中的数据” 这里外部事件主要指界面点击、文字输入、网络通信等等事件。因为绑定关系的存在ViewModel 变成啥样界面就会自动变成啥样。
三、单向绑定与双向绑定
随着 ViewModel 的变化View 会自动变化那么 View 变化后ViewModel 会自动变化么比如用户在“用户名输入框”输入文字后LoginViewModel 中的 userId 会自动存储输入值么然后用户又删掉部分输入的内容 userId 再次立即变化么
这里就需要引入一个新的概念了单向绑定与双向绑定。
所谓“单向绑定”就是 ViewModel 变化时自动更新 View所谓“双向绑定”就是在单向绑定的基础上 View 变化时自动更新 ViewModel
我们把前面登陆按钮点击后这一过程的代码再来梳理下单向绑定模式下的伪代码如下
function onUserIdTextViewChanged(textView) {loginViewModel.userId textView.text;
}function onPasswordTextViewChanged(textView) {loginViewModel.password textView.text;
}function onLoginButtonClick() {loginViewModel.isLoading true;loginViewModel.isShowErrorMessage: false,login(loginViewModel.userId loginViewModel.password);
}大家可以看到我们需要非常明确的在 TexView 变化事件里面去重新设定 LoginViewModel 中的值而双向绑定模式下根据绑定关系这一过程就隐藏性的自动完成了。既然“双向绑定”那么智能、简单为什么还需要“单向绑定”呢因为在真实的“业务需求”下实际情况是非常复杂的虽然 ViewModel 可以和 View 形成映射关系但是它们之间的值却不一定能直接划等号。
比如在界面上要填写性别我们通常会提供一个下拉列表框让用户选择。这个选择框里面至少有“未知”、“男”和“女”三种字符串值而我们的 ViewModel 一般情况下并不直接存储这些字符串。因为 ViewModel 中的数据很大一部分情况下是来自于数据库、来自于服务器而数据库和服务器中几乎是不可能直接把性别字符串存储在数据模型中的。一般会建立一个 int 类型的字段用 0 表示未知用 1 表示男人用 2 表示女人。
那么问题来了在 ViewModel 中一个 gender 属性类型为 int值为 0 或者 1 或者 2 时与其绑定的 View 怎么知道该如何来显示为“未知”、“男”或者“女”呢
所以“属性转换器”应运而生在给 View 绑定 ViewModel 时发现属性值不匹配那么就需要设定一个属性转换器。反之亦然当性别选择下拉列表框被用户改变时用户选择了“男”在双向绑定模式下那么 View 依然需要在一个属性转换器的帮助下把“男”转换为 1然后设定到 ViewModel 中。
上面只是最简单的一种在绑定不匹配时涉及到属性转换的情况但是真实的世界往往会更加的错综复杂双向绑定下的属性转换器随着业务需求的迭代常常会变得越来越庞大而且因为绑定关系触发 ViewModel 和 View 的动态变化过程是隐藏不可见的也给调试带来了极大的麻烦。
所以后来大家在长年累月的使用过程中发现单向绑定可能会是更合适的一种做法。
四、把数据的请求与处理放在 ViewModel 中
针对前面的登陆代码我们再来做一次优化得到一个更加合理的版本
class LoginViewModel {String userId;String password;bool isLoading;bool loginStatus;String errorMessage;Login() {request(url, this.userId, this.password, {success: function() {...},failed: function() {this.isLoading false; //触发绑定关系隐藏登陆 loading 框this.isShowErrorMessage true; //触发绑定关系显示错误提示框this.errorMessage 密码错误; //触发绑定关系设置错误提示文字内容}});}
}可以看到我们把整个登陆过程放在了 LoginViewModel 中那么登陆按钮点击后这一套响应过程也相应的有所调整
function onUserIdTextViewChanged(textView) {loginViewModel.userId textView.text;
}function onPasswordTextViewChanged(textView) {loginViewModel.password textView.text;
}function onLoginButtonClick() {loginViewModel.isLoading true; //触发绑定关系显示登陆 loading 框loginViewModel.isShowErrorMessage: false; //触发绑定关系隐藏错误提示框loginViewModel.login(); //开始登陆
}大家看到没有上面这段代码再也不处理任何的数据逻辑不关心数据库、不关心网络调用也完全不关心界面随着数据和逻辑的变化应该如何去设置控件属性状态等等。让我们再来复习一下 MVVM 的核心原则 “当任何外部事件发生时永远只操作 ViewModel 中的数据” 上面这段代码它不属于 Model不属于 View也不属于 ViewModel那它应该写在哪里呢
iOS 下依然写在 ViewController 中Android 下依然写在 Activity 或者 Fragment 中ReactNative 下依然写在 Component 中微信小程序 下依然写在 Page 中
所以 MVC 中的 C其实一直都默默的存在着只是变得弱化了一定要完整的讲的话那就是 Model-View-Controler-ViewModel 模式。只有在理想的双向绑定模式下Controller 才会完全的消失。
五、上帝之手
讲到这里我们已经讲解完了整个 MVVM 模式的核心原理和使用原则不涉及任何平台、任何语言。或者说只要你遵循以上的原则写出来的代码都是 MVVM 模式的。但是还有一个最大的疑问我们一直没有去探讨。那就是 ViewModel 是如何与 View 形成的绑定关系凭什么 ViewModel 中的数据变化了View 就会动态变化 我们之所以要把这个问题放在最后讲是因为数据绑定和动态变化这都是由具体的 MVVM 平台或者框架来实现的跟 MVVM 模式没有直接关系。或者说为了达成 MVVM 模式不同的平台、不同的框架提供了不同的实现版本来完成这一目标。当然他们也都大同小异核心原理差不多。
先来说说第二个疑问“为什么会动态变化”其实这里是有一只“上帝之手”在帮你实现这个过程当“上帝”发现某个数据变化了然后根据“映射”关系去帮你修改那个控件的属性。但是我们的登陆界面是否要显示 loading 框是否要显示错误提示这些都是我们的业务需求“上帝”也并不知道你到底想要怎样。所以所谓的绑定或则映射关系是需要开发者明确来告诉“上帝”的。怎么告诉“上帝”呢这就需要你或通过配置文件或通过代码语句来设定。
我们来总结一下这两个问题的答案
开发者在代码或者配置文件中设定 ViewModel 和 View 的映射关系“上帝之手”在整个软件的运行过程中监控 ViewModel自动变化这一切
什么是MVVM - 简书 (jianshu.com)
