MVC 和 MVVM 设计模式

简介:

MVC模式


MVC即Model-VIew-Controller。他是1970年代被引入到软件设计大众的。MVC模式致力于关注点的切分,这意味着model和controller的逻辑是不与用户界面(View)挂钩的。因此,维护和测试程序变得更加简单容易。 MVC设计模式将应用程序分离为3个主要的方面:Model,View和Controller

wKioL1gqzzWTzoTVAAAdW9gzcRs710.png


M: 数据保存

业务数据,数据的模型,数据的封装定义。比如商品、订单、用户、评论等。每一种数据是一种数据模型,在js中,各种数据类型的变量用于表示数据模型。


V: 用户界面 

视图,表示业务数据的表现,由HTML来表示,尤其需要加强的 HTML 操作


C: 业务逻辑 

控制器:负责控制数据的获取、删除和更新。由js中的各种function来实现。 原生代码实现时,整个过程都得自己写,总是会疑惑于思路。那么,有了基于 MVC 的模式,以后会形成一种固定方式:先定义数据模型,定义显示方式,由控制器来控制它们


各部分之间的通信方式如下:所有通信都是单向的。

wKiom1gq0EOSYs2iAAApjMI9H2g485.png

1、View传送指令到Controller

2、Controller完成业务逻辑后,要求Model改变状态

3、Model将新的数据发送到View,用户得到反馈



MVVM模式

MVVM即Model-View-View Model。这个模式提供对View和View Model的双向数据绑定。这使得View Model的状态改变可以自动传递给View。典型的情况是,View Model通过使用obsever模式(观察者模式)来将View Model的变化通知给model。


wKiom1gq0azBKgmtAAAr7zynD_0047.png

它采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然


Model

Model层代表了描述业务逻辑和数据的一系列类的集合。它也定义了数据修改和操作的业务规则。


View

View代表了UI组件,像CSS,JQuery,html等。他只负责展示从Presenter接收到的数据。也就是把模型转化成UI。


View Model

View Model负责暴漏方法,命令,其他属性来操作View的状态,组装model作为View动作的结果,并且触发view自己的事件。


MVVM模式关键点:

1、用户和View交互。

2、View和ViewModel是一对一关系,也就意味着一个View只能映射到一个ViewModel。

3、View持有ViewModel的引用,但是View没有任何Model的信息。

4、View 和ViewModel之间有双向数据绑定关系。


本文转自   frwupeng517   51CTO博客,原文链接:http://blog.51cto.com/dapengtalk/1873149
相关文章
|
6天前
|
设计模式 前端开发 JavaScript
浅谈MVC、MVP、MVVM框架模式
浅谈MVC、MVP、MVVM框架模式
36 0
|
6天前
|
前端开发 数据安全/隐私保护
什么是mvvm,mvp、mvc和mvvm模式有什么区别?
什么是mvvm,mvp、mvc和mvvm模式有什么区别?
47 0
|
5天前
|
前端开发 JavaScript 开发者
深入理解MVC和MVVM:构建现代Web应用的利器
深入理解MVC和MVVM:构建现代Web应用的利器
|
6天前
|
设计模式 前端开发 Java
19:Web开发模式与MVC设计模式-Java Web
19:Web开发模式与MVC设计模式-Java Web
24 4
|
6天前
|
前端开发 JavaScript
Vue中mvvm/mvc/mvp三者区别
Vue中mvvm/mvc/mvp三者区别
|
6天前
|
设计模式 存储 前端开发
Java从入门到精通:2.2.1学习Java Web开发,了解Servlet和JSP技术,掌握MVC设计模式
Java从入门到精通:2.2.1学习Java Web开发,了解Servlet和JSP技术,掌握MVC设计模式
|
6天前
|
XML 前端开发 测试技术
安卓架构模式:MVC、MVP、MVVM及更多
【4月更文挑战第13天】本文探讨了安卓应用开发中的常见架构模式,包括MVC、MVP和MVVM,以及VIPER和Clean Architecture。MVC分离关注点,易于理解,但安卓不直接支持。MVP通过呈现器实现更清晰的分层和便于单元测试。MVVM利用数据绑定简化UI逻辑,适合声明式编程。开发者应根据项目需求、团队技能和维护周期选择合适架构,随着工具和框架的进步,未来将提供更多模块化、可测试性和敏捷性的解决方案。
|
6天前
|
前端开发 JavaScript
mvvm/mvc/mvp三者区别
mvvm/mvc/mvp三者区别
21 3
|
6天前
|
JSON 前端开发 JavaScript
聊一聊MVC模式跟MVVM模式
聊一聊MVC模式跟MVVM模式
|
6天前
|
存储 前端开发 JavaScript
什么是MVVM?MVC、MVP与MVVM模式的区别?
什么是MVVM?MVC、MVP与MVVM模式的区别?