首先声明一点,我不敢说让你花几分钟就可以完全理解这些概念.这篇文章是我个人的理解,并不一定完全正确!!!欢迎指正和讨论.

最近前端工程化越来越普遍完善了,面试的时候也总会被问到MVC,MVVM这类的架构名词,第一次听肯定让人很费劲,但是千万不要想得太难,其实非常非常的简单好理解,这篇文章主要会结合前端的业务场景来解释解释这些概念.

什么是M , V , C

Model

M: Model 模型

也就是一个抽象对象的模型,作为一个小前端,你是不是也写过express呢?在express中一个最普通的模型可以就是这样的.很简单.

1
2
3
4

const Person = {
  name: String,
  age: Number
}

这就是一个人类的模型,有两个属性,一个是名字必须是字符串,另外一个就是年龄必须是数字.如果实例出一个对象的话可能就是小明,24岁这种感觉.Model层只关心数据最基础的增删改查.

View

V: View 视图

也就是我们所看到的.我们存在model的数据当然要展示出来了,展示在网页,展示在html里面.view就可以当成一个静态页面.View只关心数据的显示.

Controller

C: Controller 控制器

我们已经有了模型Model要显示在View上,如果像上例一样的简单数据,可以直接拿去显示,但是数据有时候不是单纯的为了显示,会有增删改的需求.这时候我们的Controller控制器就出现了.可以控制数据的家伙就是他.

MVC 组合之后

MVC

图片来自阮一峰大大的博客.

所以一次完整的交互结合实际大概是这样的.

View层网页显示了来自Model的数据,用户说我要改这条数据,点击了一下网页View,Controll收到来自View的反馈,赶紧去修改数据,也就是找Model.Model变了之后,用户再次获取数据的时候,数据已经更新过了!这就是传统的MVC.

MVVM

一眼直接看上去,你大概可以看到,少了个C多了个V和M.难道有两个ViewModel其实不是这样的.现在Vue和Angular这两款主流框架都包含了一个很nb的功能,叫做双向绑定.应运而生的类似概念就是ViewModel也就是VM.VM相比较C有一点很方便就是"双向流".

MVVM

双向的好处就是ViewModel不在只能操作Model了,可以直接去操作View更改视图.同时可以在获取数据之后进行加工,处理再显示到View上.减少了许多不必要的操作.

我的理解

这些概念其实并不复杂,但是还没有确定准确的标准,所以会导致很混乱.阮一峰老师的和MSDN之间就有很大的差别.所以这个东西主要还是理解怎么去用,怎么去思考,并没有一个太标准的答案,就像angular称自己为MVW,W:Whatever.你懂得怎么把将项目按照逻辑区分层次,知道每个层级该做什么,不能做什么就足够了.开心就好.

mvw.md.png