MVC与MVVM框架

什么是MVC？

MVC思想：Controller负责将Model的数据用View显示出来。

Model:处理数据逻辑的部分，负责在数据库中存储数据。

View:处理数据的显示部分

Controller:是应用程序的交互部分，通常控制器负责从视图中读取数据，控制用户输入，并向模型发送数据。

Controller是MVC中数据和视图的协调者，也就是Controller里面把Model的数据赋值给view来实现，或者是View接收用户输入的数据然后由Controller把这些数据传给Model来保存到本地或者上传到服务器。

通信流程：

（1）View接收用户传入的数据，传送指令到Controller

（2）Controller完成业务逻辑后，要求Model改变状态

（3）Model将新的数据发送到View，用户得到反馈

所有通信都是单向的。

在MVC中，view是可以直接访问model的，从而view里会包含model的信息，不可避免的还要包含一些业务逻辑。MVC关注的是Model的不变，所以在MVC模型中，Model不依赖于View，但是View是依赖于Model的。不仅如此，因为有一些业务逻辑在View里实现了，导致要更新View也是比较困难的，至少业务逻辑是无法重用的。

什么是MVVM？MVVM是Model-View-ViewModel的缩写。

MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。

MVVM是将其中view的状态和行为抽象化，让我们将视图UI和业务逻辑分开，当然这些事viewModel已经帮我们做了，它可以取出model的数据同时帮忙处理view中由于需要展示内容而涉及的业务逻辑。

它采用双向绑定：View的变动自动反映在ViewModel，反之亦然。

把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

一个MVVM框架和jQuery操作DOM相比有什么区别？

我们先看用jQuery实现的修改两个DOM节点的例子：

<!-- HTML -->
<p>Hello, <span id="name">Bart</span>!</p> <p>You are <span id="age">12</span>.</p>

Hello, Bart!

You are 12.

用jQuery修改name和age节点的内容：

var name = 'Homer';
var age = 51;

$('#name').text(name);
$('#age').text(age);

如果我们使用MVVM框架来实现同样的功能，我们首先并不关心DOM的结构，而是关心数据如何存储。最简单的数据存储方式是使用JavaScript对象：

var person = {name: 'Bart',age: 12
};

我们把变量person看作Model，把HTML某些DOM节点看作View，并假定它们之间被关联起来了。

要把显示的name从Bart改为Homer，把显示的age从12改为51，我们并不操作DOM，而是直接修改JavaScript对象：

person.name = 'Homer';
person.age = 51;

执行上面的代码，我们惊讶地发现，改变JavaScript对象的状态，会导致DOM结构作出对应的变化！这让我们的关注点从如何操作DOM变成了如何更新JavaScript对象的状态，而操作JavaScript对象比DOM简单多了！

这就是MVVM的设计思想：关注Model的变化，让MVVM框架去自动更新DOM的状态，从而把开发者从操作DOM的繁琐步骤中解脱出来！

转载于:https://www.cnblogs.com/xiaoan0705/p/8939669.html

MVC与MVVM框架相关推荐

MVC和MVVM框架介绍
一.MVC框架(后端的分层开发概念): MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业 ...
MVVM框架的搭建（二）——项目搭建
介绍完背景以及初衷之后,我们开始搭建MVVM的框架,这一部分我们进行简单的搭建,了解MVVM架构的基本结构. MVVM框架的搭建(一)--背景 MVVM框架的搭建(二)--项目搭建 MVVM框架的搭建 ...
什么是Vue.js？||为什么要学习流行框架||框架和库的区别？||MVC和MVVM的关系图解
什么是Vue.js? Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于W ...
html 属于mvvm框架,mvvm模式和mvc的区别是什么？
一.什么是MVVM? 在MVVM框架下视图和模型是不能直接通信的,只能通过ViewModel进行交互,它能够监听到数据的变化,然后通知视图进行自动更新,而当用户操作视图时,VM也能监听到视图的变化,然 ...
结合vue、react、angular谈谈MVC、MVP、MVVM框架
首先,在谈这个话题之前, 我们有必要了解一下库和框架的区别. 我们先来看react官网以及vue官网对他们的定位: react: vue: react我们不说了,官网上明明白白说了,人家是一个libr ...
JavaScript富应用MVC MVVM框架
对框架的挑选 Ember.js.Backbone.js.Knockout.js.Spine.js.Batman.js , Angular.js 1. 轻量级的应用选择哪一个会比较好? 2. 那一个比较 ...
MVVM框架与MVC框架
MVC框架将整个前端页面分成View,Controller,Model,视图上发生变化,通过Controller(控件)将响应传入到Model(数据源),由数据源改变View上面的数据. 整个过程看 ...
常见的框架模型介绍 - MVC, MVP, MVVM, MTV
文章目录 MVC MVP MVVM (vue) MTV (django) MVC 分层结构 M – Model (数据层) V – View (展示层) C – Controller (业务逻辑) 通 ...
架构模式：MVC与MVVM
本文探讨如下几个问题: 什么是MVC 什么是MVVM MVC与MVVM对架构属性的影响 MVC实例SpringMVC MVVM实例Vue MVC.MVVM与Layer中的Model,Controlle ...

MVC与MVVM框架

MVC与MVVM框架相关推荐

最新文章

热门文章