MVC,MVP 和 MVVM(转载)

1 什么是MVC

MVC的目的是为了把数据(Model)和视图(View)分离开来,然后用控制器(Controller)作胶水来粘合M和V之间的关系。

这样做的目的是为了实现注意点分离这样一个更高层次的设计理念,也就是让专业的对象做专业的事情,View就只负责视图相关的东西,Model就只负责描述数据模型,Controller负责总控,各自协作,别总掺和到一起乱成一锅粥!

1.1 分层

  • 视图(View):用户界面,专门负责表现
  • 控制器(Controller):业务逻辑
  • 模型(Model):数据保存,专门负责数据

各部分之间的通信方式如下。

image

  1. View传送指令到 Controller
  2. Controller完成业务逻辑后,要求Model改变状态
  3. Model将新的数据发送到View,用户得到反馈

所有通信都是单向的。

1.2 互动模式

接受用户指令时,MVC可以分成两种方式。一种是通过View接受指令,传递给Controller。

image

另一种是直接通过controller接受指令。

image

1.3 实例

实际项目往往采用更灵活的方式,以Backbone.js为例。

image

扫描二维码关注公众号,回复: 4344331 查看本文章
  1. 用户可以向View发送指令(DOM 事件),再由View直接要求Model改变状态。
  2. 用户也可以直接向Controller发送指令(改变URL触发hashChange事件),再由Controller发送给View。
  3. Controller非常薄,只起到路由的作用,而View非常厚,业务逻辑都部署在View。所以,Backbone 索性取消了Controller,只保留一个 Router(路由器) 。

MVP

MVP 模式将Controller改名为Presenter,同时改变了通信方向。

image

  1. 各部分之间的通信,都是双向的。
  2. View与Model不发生联系,都通过Presenter传递。
  3. View非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而Presenter非常厚,所有逻辑都部署在那里。

MVVM

MVVM模式将Presenter改名为ViewModel,基本上与MVP模式完全一致。

image

唯一的区别是,它采用双向绑定(data-binding):View的变动,自动反映在ViewModel,反之亦然。Angular和Ember都采用这种模式。

参考

猜你喜欢

转载自blog.csdn.net/duola8789/article/details/84302926