MVP(Model-View-Presenter)
场景描述:
• Model(模型) :菜单数据(菜品名称、价格、库存等)。 • View(视图) :菜单展示界面(顾客看到的菜单)。 • Presenter(主持人):服务员(负责接收顾客的点餐请求,处理逻辑,并更新菜单数据)。
流程:
- 顾客(用户)在菜单界面(View)选择菜品。
- 服务员(Presenter)接收顾客的点餐请求。
- 服务员(Presenter)检查菜单数据(Model)是否有库存。
- 如果有库存,服务员(Presenter)更新菜单数据(Model),并通知厨房(View 更新界面)。
- 如果没有库存,服务员(Presenter)告诉顾客"菜品已售罄"(View 更新界面)。
特点:
• Presenter 是核心 :负责处理逻辑和协调 Model 与 View。 • View 和 Model 没有直接交互 :所有数据交互都通过 Presenter 进行。 • View 更被动:只负责展示数据,不处理逻辑。
MVVM(Model-View-ViewModel)
场景描述:
• Model(模型) :菜单数据(菜品名称、价格、库存等)。 • View(视图) :菜单展示界面(顾客看到的菜单)。 • ViewModel(视图模型):智能服务员(负责将菜单数据转换为界面可展示的形式,并自动更新界面)。
流程:
- 顾客(用户)在菜单界面(View)选择菜品。
- 智能服务员(ViewModel)自动检测到顾客的选择,并检查菜单数据(Model)是否有库存。
- 如果有库存,智能服务员(ViewModel)更新菜单数据(Model),并自动更新菜单界面(View)。
- 如果没有库存,智能服务员(ViewModel)自动更新菜单界面(View),显示"菜品已售罄"。
特点:
• ViewModel 是核心 :负责将 Model 数据转换为 View 可展示的形式,并自动更新 View。 • View 和 Model 没有直接交互 :所有数据交互都通过 ViewModel 进行。 • 数据绑定:View 和 ViewModel 之间通过数据绑定自动同步,无需手动更新界面。
三者的对比
特性 | MVC | MVP | MVVM |
---|---|---|---|
View 和 Model 的交互 | View 可以直接访问 Model | View 不能直接访问 Model,必须通过 Presenter | View 不能直接访问 Model,必须通过 ViewModel |
核心角色 | Controller | Presenter | ViewModel |
View 的被动性 | View 是主动的,可以直接更新自己 | View 是被动的,只能通过 Presenter 更新 | View 是被动的,通过数据绑定自动更新 |
交互方式 | 手动更新 | 通过 Presenter 手动更新 | 数据绑定,自动更新 |
适用场景 | 传统 Web 应用 | 需要解耦 View 和 Model 的场景 | 现代前端框架(如 Vue、React) |
总结
• MVC :像传统的餐厅点餐系统,服务员(Controller)是核心,负责协调顾客(View)和厨房(Model),但 View 和 Model 可以直接交互。 • MVP :像升级版的餐厅点餐系统,服务员(Presenter)完全接管了 View 和 Model 的交互,View 更被动,适合需要解耦的场景。 • MVVM:像智能餐厅点餐系统,智能服务员(ViewModel)自动处理一切,顾客(View)只需选择菜品,界面会自动更新,适合现代前端框架。
通过这个例子,可以更直观地理解 MVC 、MVP 和 MVVM 的区别和适用场景。