相信这是两个耳熟能详的词了,MVC广泛的用到了java的各种框架当中,比如Struts2, SpringMVC等,作为B/S架构开发,MVS模式也是我们必须掌握的。

mvc一步一步演化之后有了现在的MVVM模式,先从怎么出现MVC模式开始,也是前端的进化史。

一、前端演化

在上个世纪的1989年,欧洲核子研究中心的物理学家Tim Berners-Lee发明了超文本标记语言(HyperText Markup Language),简称HTML,并在1993年成为互联网草案。从此,互联网开始迅速商业化,诞生了一大批商业网站。
最早的网页都是完全的静态的,当浏览器请求服务器时,web服务器将固定的写死的HTML文件直接返回给浏览器显示
 
如果要争对不同的用户显示不同的页面,服务器不可能将成千上万个静态资源全部存放,所以服务器就需要争对不同的用户,动态生成不同的html文件。一个最直接的想法就是利用C、C++这些编程语言,直接向浏览器返回拼接后的字符串,这种技术被称为CGI:Common Gateway Interface。
 
很显然,一些复杂的网页需求以及不能够通过拼接这种方式来实现了,人们又发现了大多数重复的HTML代码块,是不变的,变化的只有局部的和用户相关的数据,于是出现了动态HTML的方式 :ASP(微软)、JSP(SUN)、PHP(开源社区)
 
当然这还不能直接说是动态HTML,一旦浏览器返回一个HTML页面、需要更新页面的内容,唯一的方法就是重新向服务器获取页面,1995年,javascript出生,通过修改HTML的DOM结构和CSS来修改页,javascript使用浏览器原生的API来操作DOM节点,由于原生的局限性,考虑浏览器的兼容性jQuery横空出世
 
在过去的10年中,我们已经把很多传统的服务端代码放到了浏览器中,这样就产生了成千上万行的javascript代码,它们连接了各式各样的HTML 和CSS文件,但缺乏正规的组织形式,这也就是为什么越来越多的开发者使用javascript框架。比如:angular、react、vue。浏览器的兼容性问题已经不再是前端的阻碍。前端的项目越来越大,项目的可维护性和扩展性、安全性等成了主要问题。当年为了解决浏览器兼容性问题,出现了很多类库,其中最典型的就是jquery。但是这类库没有实现对业务逻辑的分成,所以维护性和扩展性极差。综上两方面原因,才有了MVVM模式一类框架的出现。比如vue,通过数据的双向绑定,极大了提高了开发效率。
 
二、MVC
指的是 Model - View - Controller 的简写,即模型-视图-控制器
M (模型)是应用程序中用于用于处理应用程序逻辑的部分,通常模型对象负责在数据库中存取数据,通俗将就是从后端传来的数据
V (视图)是应用程序数据显示的部分,通常数据是依据模型数据创建的
C  (控制器)是应用程序中处理用户交互的部分,通常负责将model的数据渲染到view视图层当中
 
MVC是单向通信。也就是View跟Model,必须通过Controller来承上启下。MVC和MVVM的区别并不是VM完全取代了C,ViewModel存在目的在于抽离Controller中展示的业务逻辑,而不是替代Controller,其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用。由于mvc出现的时间比较早,前端并不那么成熟,很多业务逻辑也是在后端实现,所以前端并没有真正意义上的MVC模式。而我们今天再次提起MVC,是因为大前端的来到,出现了MVVM模式的框架
 
 
三、MVVM
指的是Model - View -ViewModel 的简写,即模型-视图-视图模型
 
M和V指的是和MVC模式当中的一层含义,
VM也是MVVM模式的核心,它是连接Model和View的桥梁,是双向绑定的,它有两个方向,一个是将模型转为视图,即将服务器返回的数据转化成我们看到的页面,实现的方式是数据绑定,二是将视图转为模型,即将所看到的页面数据转为后端的数据,实现的方式是DOM事件监听,在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信,ViewModel通常要实现一个observer观察者,当数据发生变化,ViewModel能够监听到数据的这种变化,然后通知到对应的视图做自动更新,而当用户操作视图,ViewModel也能监听到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。
 
 
最后再附上一张MVC的图

MVC模式和MVVM模式简单理解的更多相关文章

  1. 对MVC模式与MVVM模式的认识

    MVC模式与MVVM模式目的一样,主要是分离模型(model)和视图(view),具体介绍如下. 名词介绍 MVC模式:指的是模型(Model)-- 视图(View)-- 控制器(Controller ...

  2. MVP模式和MVVM模式

    MVP模式 模型-视图-表示器,也就是MVP模式.是mvc模式的一种衍生模式,专注于改进表示逻辑. 与MVC不同,来自view的调用将委托给presenter(表示器),表示器通过接口与view对话. ...

  3. [vue]mvc模式和mvvm模式及vue学习思路(废弃)

    好久不写东西了,感觉收生疏了, 学习使用以思路为主, 记录笔记为辅作用. v-if: http://www.cnblogs.com/iiiiiher/p/9025532.html v-show tem ...

  4. 浅谈MVC模式与MVVM模式的区别

    MVC模式: M:Model(数据模型),用于存放数据 V:View(视图),也就是用户界面 C:Controller是Model和View的协调者,Controller把Model中的数据拿过来给V ...

  5. MVC模式 和 MVVM模式

    MVC模式 模型 - 视图 - 控制器或MVC,MVC是普遍的叫法,是一种软件设计模式,用于开发Web应用程序.模型- 视图 - 控制器模式是由以下三部分组成: 模型/Model - 一个负责维护数据 ...

  6. MVP模式与MVVM模式

    1.mvp模式(Model层 Presenter层 View 层) Model层 :数据层(ajax请求) Presenter层:呈现层,view逻辑相关的控制层,控制层可以去调Model去发ajax ...

  7. MVC和MVVM设计模式简单理解

    1.mvc设计模式理解 Model: 模型 持有所有的数据状态和业务逻辑; 泛指数据库,链接数据库,建立数据模型 View: 视图 用来展示数据模型在页面上,泛指前端 Controller: 控制器, ...

  8. Android mvp模式、mvvm模式

    MVC和MVP的区别2007年08月08日 星期三 上午 09:23 MVC和MVP到底有什么区别呢? 从这幅图可以看到,我们可以看到在MVC里,View是可以直接访问Model的!从而,View里会 ...

  9. MVVM模式和在WPF中的实现(二)数据绑定

    MVVM模式解析和在WPF中的实现(二) 数据绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...

随机推荐

  1. 三、Centos7安装Mysql

    1.到服务器下载的链接 wget https://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm 2.执行命令 sudo r ...

  2. day01 html介绍 文档声明头 head标签 body标签

    day01 html   初识html <!--文档的声明--> <!doctype html>   <html lang="en">    # ...

  3. Vue2 实现时空穿梭框功能模块

    前言 这篇文章主要是分享一个时空穿梭框功能,也就是我们平时用的选择功能.勾选了的项就会进入到另一个框中. 时空穿梭框之旅 示例演示: 这个时空穿梭框实现了: 1.可以全选.反选 2.没有选中时,不可以 ...

  4. Hybrid App技术解析 — 原理篇

    Hybrid App技术解析 — 原理篇 原文出处:   https://segmentfault.com/a/1190000015678155 引言 随着 Web 技术和移动设备的快速发展,Hybr ...

  5. oracle 数据库插入中文乱码

    一. 查询数据库编码 select userenv('language') from dual; 查询服务器编码 select * from v$nls_parameters; 推出sql查询系统编码 ...

  6. bean的初始化和销毁方法

    1.bean的生命周期: bean创建---初始化----销毁的过程 容器管理bean的生命周期: 我们可以自定义初始化和销毁方法:容器在bean进行到当前生命周期的时候来调用我们自定义的初始化和销毁 ...

  7. Update Vim to 8.0 in Ubuntu

    add PPA sudo add-apt-repository ppa:jonathonf/vim Update and Install sudo apt-get update sudo apt-ge ...

  8. Mac上使用频率最高的七组快捷键

    不管Mac还是Windows,会使用快捷键都能让你的工作效果提升不少,但是快捷键那么多一下子全部记下来也不太实际,这里小编就整理了七组使用频率最高的快捷键,希望可以帮到大家. https://www. ...

  9. Tomcat访问任意磁盘的图片资源

    项目中用户上传的大量图片存放在项目底下带来诸多不便.每次部署项目都需要拷贝出来,防止覆盖掉以前的 图片.容易丢失,前功尽弃.甚至造成经济损失.不可估量. 如何配置tomcat访问图片路径呢?首页你代码 ...

  10. (转)Uncaught TypeError: Cannot set property 'innerHTML' of null

    (转)http://www.cnblogs.com/Ricky-Huang/p/5536253.html 在使用Ueditor的时候,会爆出这样的错误: 浏览器控制台就报错了 Cannot set p ...