MVC,MVP 和 MVVM 的图示

  复杂的软件必须有清晰合理的架构,否则无法开发和维护。MVC(Model-View-Controller)是最常见的软件架构之一,业界有着广泛应用。

一、MVC

  MVC模式的意思是,软件可以分成三个部分。

  • 视图(View):用户界面。
  • 控制器(Controller):业务逻辑
  • 模型(Model):数据保存

  各部分之间的通信方式如下。

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

  所有通信都是单向的。

二、互动模式

  接受用户指令时,MVC 可以分成两种方式。一种是通过 View 接受指令,传递给 Controller。

  另一种是直接通过controller接受指令。

三、实例:Backbone

  实际项目往往采用更灵活的方式,以 Backbone.js 为例。

  1. 用户可以向 View 发送指令(DOM 事件),再由 View 直接要求 Model 改变状态。

  2. 用户也可以直接向 Controller 发送指令(改变 URL 触发 hashChange 事件),再由 Controller 发送给 View。

  3. Controller非常薄,只起到路由的作用,而View非常厚,业务逻辑都部署在View。所以Backbone索性取消了 Controller,只保留一个 Router(路由器) 。

四、MVP

  MVP 模式将 Controller 改名为 Presenter,同时改变了通信方向。

  1. 各部分之间的通信,都是双向的。

  2. View 与 Model 不发生联系,都通过 Presenter 传递。

  3. View 非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。

五、MVVM

  MVVM 模式将 Presenter 改名为 ViewModel,基本上与 MVP 模式完全一致。

  唯一的区别是,它采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然。Angular和 Ember 都采用这种模式。

转载:http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
作者:阮一峰
 

设计模式 --> MVC,MVP 和 MVVM 的图示的更多相关文章

  1. MVC MVP 和 MVVM的图示

    一直对于这些什么MVC MVP 和 MVVM都是云里雾里的 完全分不清楚 感觉jq上也没怎么用过,理解也很片面,画几张图也许能够大体分清他们之间的区别. 1.MVC(Model-View-Contro ...

  2. js架构设计模式——MVC,MVP 和 MVVM 的图示及简单明了的区别说明

    MVC,MVP 和 MVVM 的图示 复杂的软件必须有清晰合理的架构,否则无法开发和维护. MVC(Model-View-Controller)是最常见的软件架构之一,业界有着广泛应用.它本身很容易理 ...

  3. 阮一峰:MVC、MVP和MVVM的图示

    阮一峰:MVC.MVP和MVVM的图示:http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html

  4. 转:MVC,MVP 和 MVVM 的图示

    MVC,MVP 和 MVVM 的图示 - 阮一峰的网络日志http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html 作者: 阮一峰 日期: 201 ...

  5. MVC,MVP 和 MVVM 的图示 转自阮一峰先生网络日志

    MVC,MVP 和 MVVM 的图示   作者: 阮一峰 复杂的软件必须有清晰合理的架构,否则无法开发和维护. MVC(Model-View-Controller)是最常见的软件架构之一,业界有着广泛 ...

  6. MVC,MVP 和 MVVM 的图示(转载)

    MVC,MVP 和 MVVM 的图示   作者: 阮一峰 日期: 2015年2月 1日 复杂的软件必须有清晰合理的架构,否则无法开发和维护. MVC(Model-View-Controller)是最常 ...

  7. MVC,MVP 和 MVVM 的图示

    作者: 阮一峰 日期: 2015年2月 1日 复杂的软件必须有清晰合理的架构,否则无法开发和维护. MVC(Model-View-Controller)是最常见的软件架构之一,业界有着广泛应用.它本身 ...

  8. (转)MVC,MVP 和 MVVM 的图示

    作者: 阮一峰 日期: 2015年2月 1日 复杂的软件必须有清晰合理的架构,否则无法开发和维护. MVC(Model-View-Controller)是最常见的软件架构之一,业界有着广泛应用.它本身 ...

  9. MVC,MVP 和 MVVM 的图示(转)

    作者: 阮一峰 日期: 2015年2月 1日 转自:http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html 复杂的软件必须有清晰合理的架构,否则 ...

随机推荐

  1. Linux 的进程状态

    (1)运行:当一个进程在处理机上运行时,则称该进程处于运行状态.处于此状态的进程的数目小于等于处理器的数目,对于单处理机系统,处于运行状态的进程只有一个.在没有其他进程可以执行时(如所有进程都在阻塞状 ...

  2. SQL注入攻击三部曲之高级篇

    SQL注入攻击三部曲之高级篇 经过了入门篇和进阶篇的学习,相信诸位想要破解一般的网站是没有什么问题了,但是先别得意.正所谓学海无涯,技术的进步也是没有止境的.SQL注入是一个看起来简单,但是变数很多的 ...

  3. freemarker报错之十五

    1.错误描述 六月 04, 2014 11:04:03 下午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严重: Template proc ...

  4. freemarker自定义标签报错(八)

    1.错误描述 freemarker.core.ParseException: Token manager error: freemarker.core.TokenMgrError: Unknown d ...

  5. 从不同的角度分析Flex的优缺点

    从不同的角度分析Flex的优缺点 技术角度: (1)具备了RIA时代富客户端的优点(C/S+B/S) (2)支持多种服务器语言(JAVA..NET.PHP)及主流框架(Spring.Hibernate ...

  6. Linux显示隐藏文件

    Linux显示隐藏文件 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ ls -a . .dbus .local .xsession-errors.old .. ...

  7. SonarQube和Maven的集成

    1.1. SonarQube简介 SonarQube是一款免费用于代码质量管理的开源平台,用于管理源代码的质量,可以从七个维度检测代码质量通过插件形式,可以支持包括java,C#,C/C++,PL/S ...

  8. TensorLayer官方中文文档1.7.4:API – 可视化

    API - 可视化¶ TensorFlow 提供了可视化模型和激活输出等的工具 TensorBoard. 在这里,我们进一步提供一些可视化模型参数和数据的函数. read_image(image[,  ...

  9. Angular通过订阅观察者对象实现不同组件中数据的实时传递

    在angular官方定义中,组件直接的数据交换只要在父子直接传递,但是我们在项目中经常需要在各种层级之间传递数据,下面介绍关于订阅可观察对象实现的数据传递. 首先定义一个服务app.sevice.ts ...

  10. flask项目部署到阿里云 ubuntu16.04

    title: flask项目部署到阿里云 ubuntu16.04 date: 2018.3.6 项目地址: 我的博客 部署思路参考: Flask Web开发>的个人部署版本,包含学习笔记. 开始 ...