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

本文详细介绍了MVC(模型-视图-控制器)和MVVM(模型-视图-视图模型)两种设计模式的概念及其应用。MVC模式通过分离业务逻辑、数据和界面显示,提高代码的组织性和可维护性。MVVM在此基础上进一步优化,实现了真正的数据逻辑与界面分离,简化了数据绑定过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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。
![这里写图片描述](https://img-blog.youkuaiyun.com/20170812103643930?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQnNfX1E=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
在实际应用中,更多的是进行页面交互,而最后一次性向服务器提交处理(弱化了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对象上,使得应用界面在启动加载的时候达到一种可用的状态。

![这里写图片描述](https://img-blog.youkuaiyun.com/20170812104629423?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQnNfX1E=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

MVVM模式的优点

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

  • 可重用性:可以把一些视图的逻辑放在ViewModel,让多个View复用;

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

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

https://github.com/zhangqian00/

这是我的github地址,有一些我自己写的一些关于require、angular、vue等等的小项目,最近在学习Nodejs,非常欢迎大牛们来指点,交流,分享。

前端很忙
微信搜索公众号:前端很忙
获取更多干活分享,欢迎来搞!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值