mvc系列

╰半夏微凉° 2021-10-01 07:22 306阅读 0赞

一、MVC  
MVC模式的意思是，软件可以分成三个部分。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ppeWVyNjY2_size_16_color_FFFFFF_t_70]  
视图（View）：用户界面。  
控制器（Controller）：业务逻辑  
模型（Model）：数据保存  
各部分之间的通信方式如下。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ppeWVyNjY2_size_16_color_FFFFFF_t_70 1]  
View 传送指令到 Controller  
Controller 完成业务逻辑后，要求 Model 改变状态  
Model 将新的数据发送到 View，用户得到反馈  
所有通信都是单向的。  
单向数据流  
二、互动模式  
接受用户指令时，MVC 可以分成两种方式。一种是通过 View 接受指令，传递给 Controller。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ppeWVyNjY2_size_16_color_FFFFFF_t_70 2]  
另一种是直接通过controller接受指令。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ppeWVyNjY2_size_16_color_FFFFFF_t_70 3]  
三、实例：Backbone 2010年  
实际项目往往采用更灵活的方式，以 Backbone.js 为例。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ppeWVyNjY2_size_16_color_FFFFFF_t_70 4]

1.  用户可以向 View 发送指令（DOM 事件），再由 View 直接要求 Model 改变状态。
2.  用户也可以直接向 Controller 发送指令（改变 URL 触发 hashChange 事件），再由 Controller 发送给 View。
3.  Controller 非常薄，只起到路由的作用，而 View 非常厚，业务逻辑都部署在 View。所以，Backbone 索性取消了 Controller，只保留一个 Router（路由器） 。  
    四、MVP  
    MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ppeWVyNjY2_size_16_color_FFFFFF_t_70 5]
4.  各部分之间的通信，都是双向的。
5.  View 与 Model 不发生联系，都通过 Presenter 传递。
6.  View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。  
    五、MVVM  
    MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ppeWVyNjY2_size_16_color_FFFFFF_t_70 6]  
    唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。Angular 和 Ember 都采用这种模式。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ppeWVyNjY2_size_16_color_FFFFFF_t_70]: /images/20210724/cd3f9996192246138f79f5052727daa9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ppeWVyNjY2_size_16_color_FFFFFF_t_70 1]: /images/20210724/cfb2babf98bf4036a731aaea6b4b5d9a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ppeWVyNjY2_size_16_color_FFFFFF_t_70 2]: /images/20210724/e350b26441d64b2cb9b279e708f43316.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ppeWVyNjY2_size_16_color_FFFFFF_t_70 3]: /images/20210724/1e32130e72e744bf82c7a0167bcdc307.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ppeWVyNjY2_size_16_color_FFFFFF_t_70 4]: /images/20210724/4a6cbb614c674bfd843f43dfee806e2e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ppeWVyNjY2_size_16_color_FFFFFF_t_70 5]: /images/20210724/adccf943bf294b98bc2906743edf239f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ppeWVyNjY2_size_16_color_FFFFFF_t_70 6]: /images/20210724/a5b5a0247db54e3a9a14ded21864c4d7.png