MVP模式

  • M---model数据层

  • V---view视图层,一般指页面上的DOM展示

  • P---presenter业务逻辑相关的控制层


    MVP模式_第1张图片
    image.png
整个流程是这样的:
  • 首先视图层发出了一个事件,交给控制器
  • 控制器会通过逻辑代码让模型层(视图层)去发AJAX请求(例子里没有写)
  • 控制器里处理业务逻辑之后,再通过DOM操作来改变视图层
所以Presenter层 是MVP设计模式最核心的一层,它里边放的一些业务逻辑是模型层和视图层之间的中转站,而model层则非常边缘,所以大量的代码是放在Presenter层的,会存在大量的DOM操作。
MVP模式_第2张图片
image.png
对比MVVM设计模式
  • M---model层(vue实例的data选项)
  • V---视图层
  • VM---vue就是VM层,不需要我们自己实现,它会帮我们监听数据和视图的变化

当数据发生改变,VM层会自动更新视图层
同样,当视图层发生变化,VM层也会自动更新到数据层

所以,我们的工作重心将放在视图层和模型层,主要面向M层数据进行开发

MVP模式_第3张图片
image.png

总之,MVP模式,代码会包含大量的DOM操作,而MVVM模式DOM的操作被极大的简化了,大型项目使用MVVM模式会节省大量的代码

你可能感兴趣的:(MVP模式)