理解MVC/MVP/MVVM的区别

时间:2022-07-31 21:15:22

 

转载至【http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html

MVC

所有的通信都是单向的。

M(Model)V(View)C(Controller)

View:视图:用户界面--是直接面向最终用户的“视图层”,是能与用户操作交互的界面。

Model:模型:数据保存--是核心的“数据层”,是程序要操作的数据或信息。

Controller:控制器:业务逻辑--负责根据用户从“视图层”输入 的指令,选取“数据层”中的数据,然后对其进行相应操作后,产生最后结果。

 理解MVC/MVP/MVVM的区别

  • 用户可以向 View 发送指令(DOM 事件),再由 View 直接要求 Model 改变状态。
  • 用户也可以直接向 Controller 发送指令(改变 URL 触发 hashChange 事件),再由 Controller 发送给 View。
  • 用户也可以直接向 Controller 发送指令(改变 URL 触发 hashChange 事件),再由 Controller 发送给 View。

 

 

MVP

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

M(Model)V(View)P(Presenter)

 理解MVC/MVP/MVVM的区别

 

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

 

 

 

MVVM

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

M(Model)V(View)V(View)M(ViewModel)

理解MVC/MVP/MVVM的区别

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