MVC
-
分层结构
- M – Model (数据层)
- V – View (展示层)
- C – Controller (业务逻辑)
-
通信方向: 单向
- view -> controller -> model
-
接收指令的方式
- view 接收指令
- controller 接收指令
- view 接收指令
-
优点
- 对 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
- 图示