MVC、MVP、MVVM

MV*模式

MVC

• MVC 引用了后端MVC
• 为什么引入MVC
  • 更好的进行项目的维护和更新
  • 减轻视图层的压力
  • 更好的解决从服务器获取数据困难的问题
  • 解决用户在视图输入的数据，更好的与后台进行交互

使用 MVC的框架 Angular.js (1.0)

Angular.ts (2.0) MVC-MVVM

• M Module 数据层 数据保存
• V View 视图层 用户界面
• C Controller 控制 业务逻辑

MVC的处理逻辑为

• 视图层(V) 接收到指令，传给控制器

• 控制器© 接收指令，处理业务逻辑，要求数据层(M)改变

• 数据层(M) 数据发生改变，视图层(V)显示数据改变的结果，用户通过视图层(V)接收反馈

• 用户也可直接向 控制层©发送指令

MVP

使用 MVP的框架 Backbone.js

• P Presenter 由C改变而来

MVP的处理逻辑为

• 所有视图层(V)接收的指令都传给P

• 然后再由P进行业务逻辑处理，传给数据层(M)

• 数据层(M)发生改变，再将改变结果发送给P

• P接收到数据改变结果，再传输给视图层(V)

• 视图层(V)显示数据改变的结果，用户通过视图层(V)接收反馈

• p 做为 M 和 V 的中间人的角色，所有的信息都传输给 P ，M 和 V 之间不会直接交流

MVVM

使用 MVVM的框架 Vue.js、.ts (2.0)

• VM viewmodule 视图模型

MVVM的处理逻辑为

• 与MVP类似，唯一的不同是 对VM 和 V 进行了双向数据绑定
• 即V 发生的改变会自动反馈至VM，反之亦然