常见的框架模型介绍 - MVC, MVP, MVVM, MTV

---

MVC

• 分层结构

  • M – Model (数据层)
  • V – View (展示层)
  • C – Controller (业务逻辑)

• 通信方向: 单向

  • view -> controller -> model

• 接收指令的方式

  • view 接收指令
    
  • controller 接收指令
    

• 优点

  • 对 m, v, c 进行了区分

• 缺点

  • 因为既可以 v 接收指令, 也可以 c 接收指令, 所以 v, c 都可能包含业务逻辑, 分层不明确
  • 如果业务逻辑庞大或复杂, 可能导致 m, v 耦合严重

---

MVP

• 根据 MVC 模型进行了优化

• 分层结构

  • M – Model (数据层)
  • V – View (展示层)
  • P – Presenter (业务逻辑)

• 通信方向: 双向

  • view <-> presenter
  • presenter <->model
  • view 和 model 没有直接联系

• 图示
  

• 优点

  • 每一层功能更加专一

• 缺点

  • 视图的渲染放在Presenter中，所以视图和Presenter的交互会过于频繁。如果Presenter过多地渲染视图，往往会使得它与特定的视图的联系过于紧密

---

MVVM (vue)

• 响应式，双向数据绑定
• 基本与 MVP 一致, Prisenter 改为了 ViewModel(VM)
• 分层结构
  • M – Model (数据层)
  • V – View (展示层)
  • VM – ViewModel (数据视图层)
• 实现效果
  • view 做修改, model 实现数据变更
  • model 数据变更, 不需要查找 dom, 直接更新 view
• 实现方式
  • 实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
  • 实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
  • 实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
  • mvvm入口函数，整合以上三者

---

MTV (django)

• 分层结构
  • M – Model (数据层)
  • T – Template (展示层)
  • V – Views (业务层)
• 实际上 MTV 也是 MVC 的一种
  • Template 是传统意义上的 View
  • View 是传统意义上的 Controller
• 图示