Skip to content

常见的MV*模式 / MVC MVP MVVM #38

Description

@Reaper622

Model

Model层封装和应用程序的业务逻辑相关的数据以及对数据的处理方法。

View

视图层,主要用来负责数据的展示。

MVC

MVC允许在不改变视图的情况下改变视图对用户输入的响应方式,用户对view的操作交给了Controller处理,在Controller中相应view的事件调用Model的接口对数据进行操作,Model发生了变化便通知视图更新。

用户对view的操作交给Controller处理,Controller响应view的事件调用model的接口进行操作,view订阅了model,一旦model发生变化就响应view进行更新。

view从model获取数据,但相关操作传递给Controller,Controller响应model的接口进行对model的更新,model更新后通知view更新视图。

实线为方法调用,虚线为事件通知。

MVC的问题:

所有业务逻辑都集中在Controller中,会使得Controller变得十分臃肿。并且每一个view单独捆绑了一个Controller不利于复用Controller。

MVP

MVC模式的改良,同样是Presenter负责业务逻辑,Model管理数据,View负责显示。

在MVC中View可以直接访问Model,但是MVP中View不能访问Model,而是Presenter提供接口,Presenter去更新Model,之后再由Presenter通知更新View,从而解耦了View和Model。

因为View不再依赖于Model,可以抽离出来做组件,只需要提供一些更新接口供上层使用即可。

MVP的问题:

Presenter作为View和Model的中间人,除了基本的业务逻辑外,还有大量的代码从而对Model和View进行数据同步更新,是Presenter显得很重。数据需要手动渲染更新,因此Presenter受到很强的视图限制。

MVVM

MVVM实际上就是实现了View和Model的数据同步自动化。把MVP中Presenter手动负责的数据同步通过数据绑定功能进行自动化,只需要给View指定显示的数据绑定Model哪一部分即可。

与MVC和MVP的获取Model数据进行展示不同的是,MVVM的View一般多用模板语法来渲染数据,当ViewModel对Model进行更新的时候,会通过数据绑定更新到View。

ViewModel相当于MVC的Controller和MVP的Presenter,是整个模式的重点。这里主要就是View和ViewModel的数据绑定,一般Model发生变化,ViewModel自动更新,ViewModel发生变化,Model也会发生变化,而View根据ViewModel的数据变化进行自动更新。

MVVM简化的数据频繁更新时手动更新的问题,减少了对于视图的限制性,在MVVM中,View不知道Model的存在,Model和ViewModel也觉察不到View,形成低耦合性,可以使开发过程更容易,提高应用的可重用性。

MVVM中的数据绑定

MVVM中的数据绑定一般使用双向绑定,即View的变动可以更新Model,Model的变化也可以实时更新到View。

一般地MVVM框架实现双向绑定有以下几种方法:

  • 数据劫持 (Vue)
  • 发布订阅 (Backbone)
  • 脏值检查 (Angular)

总结

MV*模式就是把数据、业务逻辑和视图这三块解耦合,分离。业务逻辑无需关心底层数据的读写,而数据又以对象的形式传递给业务逻辑层。MVC模式View直接订阅Model的数据,通过Controller进行Model的相关更改,Model变化后通知View进行更新。之后通过解除View和Model的耦合,就变为MVP模式,即Presenter提供接口给ViewView通过接口更新Model,同时Model提供接口给Presenter获取数据,Presenter在更新Model手动触发View的渲染从而完成数据的同步更新。而我们如果把View和Model的数据更新自动化,通过数据绑定进行View和Model的同步更新,View的变动可以更新Model,Model的更新也实时更新到View。使View不知道Model的存在,同时ViewModel也不需要手动的去控制更新,从而进一步降低了耦合度。

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions