MVC/MVP/MVVM区别——MVVM就是angular,视图和数据双向绑定
摘自:http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
一、MVC
MVC模式的意思是,软件可以分成三个部分。

- 视图(View):用户界面。
- 控制器(Controller):业务逻辑
- 模型(Model):数据保存
各部分之间的通信方式如下。

- View 传送指令到 Controller
- Controller 完成业务逻辑后,要求 Model 改变状态
- 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 都采用这种模式。
(完)
MVC/MVP/MVVM区别——MVVM就是angular,视图和数据双向绑定的更多相关文章
- 前端笔记之微信小程序(二){{}}插值和MVVM模式&数据双向绑定&指令&API
一.双花括号{{}}插值和MVVM模式 1.1 体会{{}}插值 index.wxml的标签不是html的那些标签,这里的view就是div. {{}}这样的插值写法,叫做mustache语法.mus ...
- 【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定
前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...
- angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制
Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $ap ...
- Angular数据双向绑定
Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angul ...
- Vue之九数据劫持实现MVVM的数据双向绑定
vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的. 如果不熟悉defineProperty,猛 ...
- ASP.NET Web API实践系列07,获取数据, 使用Ninject实现依赖倒置,使用Knockout实现页面元素和视图模型的双向绑定
本篇接着上一篇"ASP.NET Web API实践系列06, 在ASP.NET MVC 4 基础上增加使用ASP.NET WEB API",尝试获取数据. 在Models文件夹下创 ...
- 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选&多选下拉框
先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽 ...
- Angular中父子组件双向绑定传值
下面为大家展示一个较为简单的ng父子组件双向绑定传值,下面是父组件页面 这个页面的大概功能就是父组件(红色)通过输入框输入内容反映到子组件上进行展示,并且进行了投影, 子组件(橙黄色)通过Input输 ...
- MVVM框架中的一个非常重要的内容:数据双向绑定
双向绑定的意思就是,如下图中,当在input框中输入字符时,红色框框中的字也会随之改变. input框中需要一个绑定:ms-duplex(即“双工绑定”),http://avalonjs.github ...
随机推荐
- 关于一些UI的插件(杂)
1.时间插件 //日期框 $('.date-picker').datepicker(); 2.checkbox 保存checkbox的值 // 组装选择的标签 var check = $(" ...
- Android中图片旋转
Activity_main.xml文件配置 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/androi ...
- GEF中连接的实现
在GEF绘图笔想象中复杂许多,需要很多组件的依赖与支持,稍微弄错一个引用,或一个操作调试起来就比较麻烦,下面列一下实现一个连接线功能所需要实现的类及添加的方法 建议大图查看. 相关代码:参考<G ...
- VS2012 编译 boost1.53/ boost1.49
原文链接:http://blog.csdn.net/ly131420/article/details/8904122 一.下载Boost库 boost_1_53_0.zip (http://www ...
- 杭电2061WA
#include<stdio.h> struct mem { char s[50]; int c; int f; }; int main() { struct mem x[60]; int ...
- Swfit4.0中JSON与模型原生互转(JSONEncoder/JSONDecoder的使用)
在Objective-C中,苹果并没有提供JSON转模型(模型转JSON)的接口,往往在开中需要添加第三库来处理JSON数据,比如:JsonModel.MJExtension.Mantle.JsonK ...
- JS 封装一个求圆面积的函数 传值:半径
y(6) var s = ""; function y (r){ s = Math.PI*r*r; alert(s); }
- shell中的交互模式:expect
在shell开发中,我们连接FTP或者passwd或sudo等操作时,需要手动输入密码.对于自动化而言,这显然是不合适的.而expect的强交互模式解决了这个问题.工作中偶有涉及到这个,个人也是简单的 ...
- loadrunner笔记----好记性不如烂笔头
1.Loadrunner主要由Vugen,Controller和Analyais3部分组成 2.简述描述集合点和集合点函数 集合点可以同步虚拟用户,以便能在同一时刻执行任务,集合点函数lr_rende ...
- C语言基础 (10) 变量作用域,生命周期 内存结构
01 课程回顾 1.指针数组 注意: 对于数组来说,在使用sizeof的时候a和&a[0]是不一样的, 虽然以%x打印出来他们都是地址 2.值传递 int a; fun(a); int *** ...