1 什么是MVC
MVC的目的是为了把数据(Model)和视图(View)分离开来,然后用控制器(Controller)作胶水来粘合M和V之间的关系。
这样做的目的是为了实现注意点分离这样一个更高层次的设计理念,也就是让专业的对象做专业的事情,View就只负责视图相关的东西,Model就只负责描述数据模型,Controller负责总控,各自协作,别总掺和到一起乱成一锅粥!
1.1 分层
- 视图(View):用户界面,专门负责表现
- 控制器(Controller):业务逻辑
- 模型(Model):数据保存,专门负责数据
各部分之间的通信方式如下。
- View传送指令到 Controller
- Controller完成业务逻辑后,要求Model改变状态
- Model将新的数据发送到View,用户得到反馈
所有通信都是单向的。
1.2 互动模式
接受用户指令时,MVC可以分成两种方式。一种是通过View接受指令,传递给Controller。
另一种是直接通过controller接受指令。
1.3 实例
实际项目往往采用更灵活的方式,以Backbone.js为例。
扫描二维码关注公众号,回复:
4344331 查看本文章
![](/qrcode.jpg)
- 用户可以向View发送指令(DOM 事件),再由View直接要求Model改变状态。
- 用户也可以直接向Controller发送指令(改变URL触发hashChange事件),再由Controller发送给View。
- Controller非常薄,只起到路由的作用,而View非常厚,业务逻辑都部署在View。所以,Backbone 索性取消了Controller,只保留一个 Router(路由器) 。
MVP
MVP 模式将Controller改名为Presenter,同时改变了通信方向。
- 各部分之间的通信,都是双向的。
- View与Model不发生联系,都通过Presenter传递。
- View非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而Presenter非常厚,所有逻辑都部署在那里。
MVVM
MVVM模式将Presenter改名为ViewModel,基本上与MVP模式完全一致。
唯一的区别是,它采用双向绑定(data-binding):View的变动,自动反映在ViewModel,反之亦然。Angular和Ember都采用这种模式。