程序设计模式 MVVM MVC模式

前端

梗概:

用于设计程序的现成模式 用于将程序代码按逻辑划分, 方便维护

1. MVVM是现在主流的前端应用模式
   1. 其实是MVC模式的变种

MVC模式:

1. 图解:

操作模式之一: 操作模式之二:

2. 特点:

1. Model用来存放渲染视图的数据
2. View用来存放页面视图代码
3. Controller代码用来控制数据
4. 用户交互时，都要在Controller定义交互逻辑，并控制Model，最后反映到视图上

3. 缺点:

1. 如果是原生MVC框架, 逻辑分散, 同一个逻辑被分散到controller中
   1. 维护起来并不简单
2. 如果是改进后的MVC框架, 数据流混乱, 导致难以确定问题

MVVC模式:

child::

MVVC

梗概

• MVVM 模式是一种软件架构设计模式，它将应用程序分为三个部分：
• Model（模型）：代表应用程序的数据和业务逻辑。
• View（视图）：用户界面，负责数据的展示。
• ViewModel（视图模型）：连接 Model 和 View 的桥梁，双向同步View与Model

1. 适用范围:

现在主流的前端框架都采用MVVC模式, 如Vue

2. 图解:

• 中间的一层就是ViewModel

3. 特点:

1. 数据是视图都是响应式的
   1. 即数据变化, 视图自动随之变化
      1. 通过预先准备好的代理服务
         1. 通过虚拟DOM技术与Diff算法
      2. 不同程序员自己编写方法去更新视图

4. 优点:

1. 开发者可以不用过多关心数据与视图的相互更新, 从而更专注到实际业务中

指向原始笔记的链接

视频大致讲解:

jQuery兴衰史！附加mvvm、mvc、虚拟DOM、diff算法科普【晓舟报告】_哔哩哔哩_bilibili