首先在理解这三种架构模式前,从前端的角度要明确两个概念:
视图层view:html,css等配合渲染出页面的文件
模型层Model: 就理解为数据(业务逻辑什么的要是放在后端,那前端不用管,要是放在前端,那不应该属于模型层)
上面两层的概念不变,那么理解这三种模式的区别其实就是在理解Controller层,Presenter层,ViewModel层 三者的区别以及几层间交互方式的区别
直接上图:
MVC(Model-View-Controller)
从流程图来看,在mvc模式下,controller主要是把view层传入的数据(即用户交互产生的数据)拿到进行业务逻辑处理,然后传递给服务端Model, Model将前端数据和后端数据以及视图模板进一步组合后返回给客户端文档(html)然后渲染出页面
所以MVC模式的实例应该是支持SSR渲染或前后端不分离的项目,否则Model就不能直接干涉View层的渲染(因为不能组合和返回视图模板),那么这个模式的运行流程也就不成立。
MVP(Model-View-Presenter)
从流程图来看,在mvp模式下,Presenter还是要收集view的数据和将view层交互产生的数据传递给model层,到这里为止和controller层做的事都一样,但是由于Model不再参与view层的渲染,所以Presenter就需要从model