前端简单理解MVC、MVP、MVVM框架

喜欢ヅ旅行 2022-12-03 13:14 314阅读 0赞

### 一切从前后端分离开始 ###

理解MVVM框架要先从前后端分离说起，传统前端先写一个静态页面，写好后，让后端去套模板，前端不涉及业务逻辑，只是静态页面的生产者，这种方式前端无法独立调试代码，很难关注用户体验，无论前端还是后端对页面的维护都非常困难。

前后端分离是指前端专注于客户端，复杂渲染页面和显示数据；后端专注做数据的操作；前后端通过接口交互，交互方式是前端发送异步请求后端给，后端接受请求返回数据，前端接受数据并使用数据，这种情况下前端和后端都涉及业务逻辑，前端的工作变的非常重要，前端这个名词才由此产生。

前后端分离后，前端和后端变成了两个相互独立的工程，通过API关联，前端工程的架构设计开始像后端一样重要起来了，前端的框架要解决的问题是分离数据和视图，并相互通信的问题。

不管是MVC、MVP、MVVM都是把应用程序分成3层，区别在于每一层要完成的任务的薄厚，以及相互通信的方式。

个人觉得在前端MVC、MVP、MVVM这些设计模式基本上都是模棱两可的，这里简单的理解一下。

### MVC 框架， ###

MVC 即 Model-View-Controller 的缩写，就是 模型—视图—控制器，是一种软件设计模式，用于应用程序的分层开发。

##### Model（模型） #####

应用程序的最下层，模型是程序需要操作的`数据`

##### View（视图） #####

应用程序的最上层，给用户的操作界面，是显示数据的地方。

##### Controller（控制器） #####

中间业务逻辑层，控制器接受用户的输入，并调用模型和视图去完成用户的需求。  
一旦用户与应用程序发生交互,控制器的事件处理器即被触发,控制器从模型中请求数据，并将其交给视图,视图将数据呈现给用户。  
　  
为了完成这样一个逻辑，MVC 框架的通信方式比较多样，如下图是其中一种，不同的框架可能会设计不同的通信方式。  
![在这里插入图片描述][20200903203525412.png_pic_center]  
MVC设计模式起源于后端的分层开发概念，各种语言都有自己完善的MVC框架，如thinkPHP,已经帮我们定义好了model,controller基类，用户只要继承过来就好了，而视图就是模板，模板有指令和表达式用来订阅数据，3层之间很清晰。

在前端MVC设计模式，更多的是一种思路，只要前端作为一个独立的项目，并且贯彻执行了这个思路，就可以认为是一个MVC框架，如:Backbone.js，Angular.js。

### MVP ###

MVP 模式是MVC 的改进版，将 Controller 改名为 Presenter（协调器，主持者），与MVC的区别是改变了通信方向。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70_pic_center]  
View、Model与 Presenter 都双向通信，而View 与 Model 不通信，都通过 Presenter 传递，View薄而Presenter厚。

### MVVM ###

MVVM 也是MVC 的改进版，是Model-View-ViewModel的简写。

*  Model （模型）：可以在Model中定义数据修改和操作的业务逻辑
 *  View （视图）：代表用户界面 前端可以理解为HTML+CSS
 *  ViewModel （视图模型） ：是同步View 和 Model的对象

与MVP模式类似，View 和 Model 之间并没有直接的联系，通过ViewModel进行交互。  
区别在于MVVM追求的是View和Model的自动同步（响应式），意思是当数据改变时，开发者不需要自己手动操作视图来改变视图的显示，而是通过ViewModel把 View 层和 Model 层连接了起来，负责View 和 Model 之间的同步工作，开发者只需关注业务逻辑，不需要手动进行繁琐的DOM操作。

MVVM框架是将数据和视图分离，通过视图模型作为桥梁来同步数据和视图。  
![在这里插入图片描述][20200903203552178.png_pic_center]

Vue是典型的MVVM框架,目前前端工程主流的框架angular.js,react到底是什么设计模式，还存在这不少争议。

[20200903203525412.png_pic_center]: /images/20221123/01cd8271fb024f55bdbda865b47a3179.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/c9366be6d76348f5a3a6bded6ad11b82.png
[20200903203552178.png_pic_center]: /images/20221123/a58fb82893974f72b4cb077e3b34d815.png