MVP模式和MVVM模式

时间:2022-09-17 07:44:08

MVP模式

模型-视图-表示器,也就是MVP模式。是mvc模式的一种衍生模式,专注于改进表示逻辑。

与MVC不同,来自view的调用将委托给presenter(表示器),表示器通过接口与view对话。

MVP中的view是被动的,里面包含一点代码逻辑或者零逻辑,我们专业的说:这个view是很轻的。

MVP的原理:view进行请求,表示器执行任何与用户请求有关的工作,并将数据回送给它们。表示器检索数据并且操作数据,并且确定应该如何在view中显示这些数据。model模型改变时,是表示器收到通知,然后更新view,因此表示器要订阅model。在这种模式中,没有直接数据绑定的概念了。

具有非常复杂的view和大量用户交互的应用程序可能不适合MVC模式,因为这样会依赖多个控制器。但是在mvp中,所有这些复杂的逻辑可以封装在一个表示器中,这可以大大简化维护工作。

Backbone既可以理解成mvc模式,也可以理解成mvp模式,我们暂且把backbone归结为mv*模式。

MVVM模式

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

为此,很多这种模式的实现都要利用声明式数据绑定来实现将view工作从其他层分离。

这有助于在同一个代码库中UI和开发工作的同时进行。UI开发人员在HTML编写中,编写与viewmodel的绑定,业务逻辑的开发人员编写model和viewmodel。

MVVM中的model

model保存着信息,但是通常不处理行为,它们不会格式化信息或影响数据在浏览器中显示的方式。数据格式化是由view来处理的,而行为被认为是业务逻辑,应该封装在与model交互的另一层中viewmodel中。

MVVM中的view

view实际上仅仅是与用户进行交互的。但是MVVM中的view包含数据绑定,事件和行为,并且需要对viewmodel有了解。虽然,这些东西都可以被映射到属性中,但view仍然负责处理viewmodel的事件。

我们要牢记:view并不负责处理状态,它仅仅是让状态与viewmodel保持同步。

MVVM中的viewmodel

可以将viewmodel作为一个专门的controller,它将model信息转变为view信息,同时还将命令从view传递到model。

view和viewmodel之间通过数据绑定和事件进行通信。

view处理自己的用户界面事件,必要时将它们映射到viewmodel。

model和viewmodel上的属性通过双向数据绑定进行同步和更新。

viewmodel可以为了数据绑定而暴露model或model属性,也可以包含接口,用于获取和操作view中暴露的属性。

总结:mvp和mvvm都是mvc的衍生品。

在mvc中,view位于架构之上,与controller相邻,model位于controller之下,因此view了解controller,controller了解model。view可以直接访问model。

在mvp中,controller的作用被presenter所替代。表示器与view位于同一位置,表示器监听view和model的事件。

在mvvm中,我们可以创建model特定于view的子集,也就是说,我们无需向view暴露整个model。view可以绑定到viewmodel上的属性,而属性会将model所包含的数据暴露给view。

在我们实际的开发中,是使用MV*模式的backbone还是使用MVVM模式的angularjs,Backbone的优势在于它易于与RESTful服务相集成。而angularjs重点关注自动化UI绑定。个人发现angularjs更适用于小型应用程序,Backbone适合创建大型应用程序。但是仁者见仁智者见智,具体情况具体对待。

加油!