用了vue这么久,却没有认真的关注mvvm与mvc,着实汗颜。趁着周末刚好看了一下网上的文章还有书籍,简单的谈一下我的理解。

-以下图片均摘自网络。

一、MVC

特点:单项通讯

  • 视图(View):用户界面。View 传送指令到 Controller
  • 控制器(Controller):业务逻辑。Controller 完成业务逻辑后,要求 Model 改变状态
  • 模型(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里,View是可以直接访问Model的!从而,View里会包含Model信息,不可避免的还要包括一些业务逻辑。 MVC模型关注的是Model的不变,所以,在MVC模型里,Model不依赖于View,但是 View是依赖于Model的。不仅如此,因为有一些业务逻辑在View里实现了,导致要更改View也是比较困难的,至少那些业务逻辑是无法重用的。

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

  有人做过测试:使用Angular(MVVM)代替Backbone(MVC)来开发,代码可以减少一半。

  此外,MVVM另一个重要特性,双向绑定。它更方便你同时维护页面上都依赖于某个字段的N个区域,而不用手动更新它们。

浅谈前端中的mvvm与mvc的更多相关文章

  1. 浅谈WPF中的MVVM框架--MVVMFoundation

    先科普一下:什么是WPF,请看下图 微软对于WPF技术的构想是很宏大的,可惜普及率不高,不过如果你要做Windows客户端开发的话WPF技术还是值得一学的. 什么是MVVM模式 简单来说它是一种高级的 ...

  2. 由项目浅谈JS中MVVM模式

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.    背景 最近项目原因使用了durandal.js和knock ...

  3. js架构设计模式——由项目浅谈JS中MVVM模式

    1.    背景 最近项目原因使用了durandal.js和knockout.js,颇有受益.决定写一个比较浅显的总结. 之前一直在用SpringMVC框架写后台,前台是用JSP+JS+标签库,算是很 ...

  4. 浅谈HTTP中GET、POST用法以及它们的区别

    浅谈HTTP中GET.POST用法以及它们的区别 HTTP定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符.我们可以这样认为: 一 ...

  5. 浅谈JS中 var let const 变量声明

    浅谈JS中 var let const 变量声明 用var来声明变量会出现的问题: 1. 允许重复的变量声明:导致数据被覆盖 2. 变量提升:怪异的数据访问.闭包问题 3. 全局变量挂载到全局对象:全 ...

  6. 转:浅谈HTTP中Get、Post、Put与Delete的区别

    1.GET请求会向数据库发索取数据的请求,从而来获取信息,该请求就像数据库的select操作一样,只是用来查询一下数据,不会修改.增加数据,不会影响资源的内容,即该请求不会产生副作用.无论进行多少次操 ...

  7. 浅谈Java中的equals和==(转)

    浅谈Java中的equals和== 在初学Java时,可能会经常碰到下面的代码: 1 String str1 = new String("hello"); 2 String str ...

  8. 浅谈Linux中的信号处理机制(二)

    首先谢谢 @小尧弟 这位朋友对我昨天夜里写的一篇<浅谈Linux中的信号处理机制(一)>的指正,之前的题目我用的“浅析”一词,给人一种要剖析内核的感觉.本人自知功力不够,尚且不能对着Lin ...

  9. 浅谈Java中的对象和引用

    浅谈Java中的对象和对象引用 在Java中,有一组名词经常一起出现,它们就是“对象和对象引用”,很多朋友在初学Java的时候可能经常会混淆这2个概念,觉得它们是一回事,事实上则不然.今天我们就来一起 ...

随机推荐

  1. JavaScript发布/订阅实例

    原文链接: Pub/Sub JavaScript Object原文日期: 2014年6月11日翻译日期: 2014年6月13日 翻译人员: 铁锚 高效AJAX网站的三大杀器: 事件代理, 浏览历史管理 ...

  2. Android特效专辑(三)——自定义不一样的Toast

    Android特效专辑(三)--自定义不一样的Toast 大家都知道,Android的控件有时候很难满足我们的需求,所以我们需要自定义View.自定义的方式很多,有继承原生控件也有直接自定义View的 ...

  3. web报表工具finereport常用函数的用法总结(数组函数)

    ADD2ARRAY ADDARRAY(array,insertArray, start):在数组第start个位置插入insertArray中的所有元素,再返回该数组. 示例: ADDARRAY([3 ...

  4. 一个CSS背景颜色问题

    div{ background: rgba(0,0,0,.1);     background-color: #19FFFFFF; } 安卓下会显示上面的透明颜色,而在iOS上则显示下面的颜色,并且其 ...

  5. Spring Boot 2.0.1 入门教程

    简介 Spring Boot是Spring提供的一套基础配置环境,可以用来快速开发生产环境级别的产品.尤其适合开发微服务架构,省去了不少配置麻烦.比如用到Spring MVC时,只需把spring-b ...

  6. VMS项目总结

    开发完一个项目后,如果能够很好的对这个项目做个总结,对我们以后的项目开发以及个人技术的积累都会有很大的帮助.最近在外派公司做完一个系统,在此进行一下深入的总结,也希望给读者带来一些个启示. 一.系统介 ...

  7. 8.2 Query 语句优化基本思路和原则

    在分析如何优化MySQL Query 之前,我们需要先了解一下Query 语句优化的基本思路和原则.一般来说,Query 语句的优化思路和原则主要提现在以下几个方面: 1. 优化更需要优化的Query ...

  8. Day19 Django

    老师代码博客: http://www.cnblogs.com/yuanchenqi/articles/7552333.html 上节内容回顾: class Book(models.Model): ti ...

  9. Storyboard的几点缺憾

    Storyboard作为iOS主推的UI开发方式,不管接受也好,不接受也好,在未来几年,都会逐渐在产业界流行,之前bignerd在其ios开发第四版中,作者曾经说过一节的Storyboard优缺点分析 ...

  10. C# 固定大小的缓存

    有时候需要把最新的N条记录暂时存起来供需要的时候调用,C#有没有指针,怎么办呢咱利用数组和byte字节整一个类 public class Buffer<T> { private T[] _ ...