什么是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的繁琐步骤中解脱出来!