对MVC、MVVM开发模式的理解和总结

MVC模式

概述

MVC是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计规范，用一种业务逻辑、数据、界面显示分离的方法组织代码，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。

MVC模式可以分成三个部分。

• 视图（View）：用户界面
• 控制器（Controller）：业务逻辑
• 模型（Model）：数据保存

如上图所示

1. View 传送指令到 Controller
2. Controller 完成业务逻辑后，要求 Model 改变状态
3. Model 将新的数据发送到 View，用户得到反馈

所有通信都是单向的。

• 所谓的MVC就是，我们把网页代码按照视图，数据模型 和 控制器的方式进行分离；视图控制网页格式，数据模型控制数据，控制器就是联系数据和模板之间如何工作的逻辑代码。

MVVM模式

概述

MVVM是MVC的变种和进阶，在概念上是真正将页面与数据逻辑分离的模式，它把数据绑定工作放到一个JS里去实现，而这个JS文件的主要功能是完成数据的绑定，即把model绑定到UI的元素上。

MVVM模式可以分为：

• M—-> model 模型层（一般用于数据存储，存储一些业务逻辑），也就是我们说的数据模型。
• V—–> view 视图层（界面），用来展示数据。
• VM—> ViewModel（视图模型），也就是$scope。


在实际应用中，更多的是进行页面交互，而最后一次性向服务器提交处理（弱化了MVC中控制器的功能），增强了视图与模型的使用，因此将此称之为MVVM.

angular中MVVM模式主要分为四部分

• View：它专注于界面的显示和渲染，在angular中则是包含一堆声明式Directive的视图模板。

• ViewModel：它是View和Model的粘合体，负责View和Model的交互和协作，它负责给View提供显示的数据，以及提供了View中Command事件操作Model的途径；在angular中$scope对象充当了这个ViewModel的角色；

• Model：它是与应用程序的业务逻辑相关的数据的封装载体，它是业务领域的对象，Model并不关心会被如何显示或操作，所以模型也不会包含任何界面显示相关的逻辑。在web页面中，大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象；而angular中的service则是封装和处理这些与Model相关的业务逻辑的场所，这类的业务服务是可以被多个Controller或者其他service复用的领域服务。

• Controller：这并不是MVVM模式的核心元素，但它负责ViewModel对象的初始化，它将组合一个或者多个service来获取业务领域Model放在ViewModel对象上，使得应用界面在启动加载的时候达到一种可用的状态。

MVVM模式的优点

• 低耦合：View可以独立于Model变化和修改，同一个ViewModel可以被多个View复用；并且可以做到View和Model的变化互不影响；

• 可重用性：可以把一些视图的逻辑放在ViewModel，让多个View复用；

• 独立开发：开发人员可以专注与业务逻辑和数据的开发；

• 可测试性：清晰的View分层，使得针对表现层业务逻辑的测试更容易，更简单。