MVC、MVP和MVVM

哦哈哈

前言

在web1.0时代,并没有前端的概念,要写就就后端一起写了。前后端的代码杂糅到一起,比如php开发前后端,随后衍生出MVC开发模式和框架。

web1.0时代

起初的MVC

目标

数据、视图、以及业务逻辑控制分层;这样就可以把代码切割成功能独立的模块。

优点

使用了这种分层架构,实则清晰,代码易维护。

实现了一定程度的前后端的分离,但是还不是很清晰

起初的MVC仅限于服务端(后端),在服务器端渲染。前端只完成了后端开发中的view层(只是写模板文件,按照模版语法去写动态内容);
Model层提供数据查询。
View层通过模板引擎来进行解析。解析成真正的HTML内容,浏览器去渲染
缺点
  1. 前端页面开发效率不高
前端之前都是以静态页面出现的;很少的js交互;将代码交给后端程序员,后端在用模板语法对它进行动态化的改造,效率不高。
  1. 前后端指责不清晰
一般都是一个程序员,前后端一起抓,要会的也很多,前端的兼容性,后端的语法等等。

web2.0时代

谷歌的Gmai的出现,ajax技术开始风靡全球,从而前后端的职责更加清晰了。前端可以通过Ajax与后端进行数据交互

前端: 使用HTML、CSS、 Javascript(在Js中来撰写Ajax的请求),前端通过Ajax请求来获取数据,前端在进行交互和渲染。
后端:只需要把数据的基本结构返回给前端。

通过Ajax与后端服务器进行数据交互;前端只需要开发页面内容,数据由后端提供;ajax可以使页面实现部分刷新,减少服务端负载和流量消耗。这是才有了专职的前端来法工程师,同时前端的各种类库就慢慢发展起来,比如早前的JQuery

优点

流量消耗变小了,局部刷新;用户体验提升

缺点

开发模式承载了更复杂的业务需求,一旦应用规模增大,还是会导致难以维护,因为Html、Css、 JS还是杂糅在一起。从而我们需要设计模式和框架。
前端的MVC才会随之而来

MVC

MVC框架分为,前端MVC和后端MVC;
前端的MVC与后端的相似,模拟这后端的架构;都具有View、Controller和Model
Model: 模型负责保存应用数据,与后台数据进行同步
Controller:控制器负责业务逻辑,根据用户行为对Model数据进行修改
View: 负责视图的展示,将model中的数据可视化出来

来个模型瞅瞅~~
真够难画的,一图弄了10分钟。也没有多好看,应该是我不太用这个软件的问题,如果有错,那一定是我的错。哈哈哈哈哈
image

视图会通过事件去通知控制器,控制器去改模型,模型在尝试用某种办法通知视图去更新。
理论上可行,但是往往在实际开发中,并不会这样操作。因为开发过程并不灵活。比如: 一个小的事件操作,都必须经过这样的一个流程,那么开发就不便捷。

在实际中场景中,可能是另一种模式,这样的:
来~~~画图,算了用网上找的把。
image
这个模式看上去是方便一些,backbone.js框架就是这种模式;
View可以操作Model,Model改变也可以View;从而控制器层就显得很单薄,可有可无;(控制器里面就变成了简单的数据坚监听和调用)
缺点: 错误很难定位,数据混乱

`因为MVC框架出现的缺陷,从而有了MVVM框架。最早是AngularJS 用的MVVM框架模式。
MVP模式前端开发并不常见,但是在安卓原生开发中,开发者还是会考虑到它。`

MVP

MVP和MVC很接近,刚才看到了,可能会出现混乱的情况,MVP就 做了一个中间人,Presenter: 负责View和Model之间的数据流动,如果数据和视图非要交互就必须要通过中间人。
image

Presenter负责和Model进行双向交互,还有和View进行双向交互。
如果业务复杂一点,Presenter的体积增大、臃肿,就很难维护;

MVVM

MVVM可以分解成(Model-View-ViewModel);ViewModel可以理解为在Presenter基础上的进阶。
image
ViewModel,主要是胶水层,核心思想是简化
1.数据发生变化,如何知道变化,通过数据响应式的机制,用某种机制知道这个数据的变化,自动的去响应数据的变化,自动去做更新;内部知道了数据的变化,不需要用户来操作。

  1. 更新,以前做Dom操作,用JQ;数据变了要做Dom操作来更新(代码多,效率不高);所以有虚拟Dom的方式去做更新,根据精准的diff算法来做比对;达到高效的结果。

`通过响应式和虚拟Dom来做到数据驱动。
如果数据变,直接视图更新;开发人员只需要修改数据,不用操作Dom;不需要操心其他事情。`

视图层如何改变数据层?
和之前一样,还是做数据监听,模版引擎会有事件处理的语法,通过这些语法,轻易的写出这些事件监听的方式

优点

ViewModel 通过实现一套数据响应式机制自动响应Model中数据变化
ViewModel 也有一套更新策略自动将数据转化为视图更新
通过事件监听响应View中用户交互修改Model中数据
从而使开发者专注于业务逻辑,兼顾开发效率和可维护性

总结

三个框架,反映了web前端发展的进程,职责都是:

  1. 代码分层
  2. 职责(前后端)划分
  3. 解决维护性问题
  4. 解决 Model和View的耦合问题

MVC 早起专注应用在后端;前端早起的应用BackBone.js.

优点:分层清晰(刚开始,算是比之前清晰了)
缺点: 数据流混乱,灵活性带来的维护性问题

MVP 模式是由MVC的进化形式,Persenter作为中间层负责MV通信,解决了两者耦合关系,但是中间层过于臃肿会导致维护问题

MVVM模式在前端领域目前更广泛。不仅解决了MV的耦合问题,解决了维护两者映射关系的大量繁杂代码和Dom操作代码;提高了开发效率。

阅读 729

我相信:发光不是太阳的权利,每个人都可以。

17 声望
6 粉丝
0 条评论
你知道吗?

我相信:发光不是太阳的权利,每个人都可以。

17 声望
6 粉丝
宣传栏