logo

JavaScript设计模式(三)

MVC

MVC 是一种架构设计模式,他通过关注点分离来组织应用的代码。

  • Model(模型),管理应用程序的数据,当 Model 发生改变会通知他的观察者(如 View)
  • View( 视图),是 Model 的可视化表示,提供修改 Model 的视图界面
  • Controller(控制器),负责处理用户对 View 的操作并更新 Model

MVC 中的这种关注点分离有利于进一步简化应用程序功能的模块化,并实现:

  • 整体维护更容易,程序分为 M,V,C 一目了然
  • 更容易编写业务逻辑的单元测试
  • 应用程序的模块划分,使得负责核心逻辑与负责用户界面的开发可以同时工作

MVP

MVP 中的 P 代表表示器(Presenter),包含用于 View 的用户界面业务逻辑的组件。与 MVC 不同,来自 View 的请求委托给 Presenter,Precenter 与 View 解耦,通过接口交互。

MVP 中的视图被称为被动视图,它包含一点或零逻辑。View 与 Model 不直接交互,Presenter 负责监听更新 Model 与 View,。

MVVM

MVVM 是一种基于 MVC 与 MVP 的架构模式, 它试图更清晰地将  用户界面开发从应用程序的  业务逻辑与行为中分离。

  • Model 保存原始数据,ViewModel 监听 Model 的变化。
  • View 不负责状态处理,它与 ViewModel 的状态同步。
  • ViewModel 与 Model,View 互相绑定, 负责将 Model 数据转换为 View 数据,并将处理 View 操作并同步到 Model。

优点:

  • MVVM 使得 UI 和为 UI 提供驱动的行为模块的并行开发变得容易。
  • MVVM 使 View 抽象化,从而减少代码背后所需的业务逻辑量。
  • ViewModel 在单元测试中使用比在事件驱动代码中的使用更加容易。
  • 不需要考虑 UI 自动化和交互就可以测试 ViewModel。