前端MV*
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端MV*相关的知识,希望对你有一定的参考价值。
前端开发时,常接触到MVC,MVP和MVVM这些名词,它们都是软件架构设计的一种方式,最初都是为桌面应用软件的设计而实现的,后来有了应用在WEB上的变体,《到底什么是MVC?》这篇文章有详细的介绍。那他们在WEB前端如何应用呢?
MVC
先看下MVC(Model-View-Controller)的概念:
Model:定义数据模型,实现业务逻辑,当数据发生变化时,通过事件通知View来更新。
View:界面视图,能从Model获取数据。
Controller:响应用户的界面交互操,能调用Model执行业务逻辑。
真正意义上的MVC,不适合在前端实现,因为用户通过浏览器来操作界面,都是先由View来响应。Backbone.js常被称为是前端的MVC框架,实际并不是,用户的与界面的交互还是先到View,它的Controller只是做为路由器。
MVP
再看下MVP(Model-View-Presenter)的概念,MVP可分为Supervising Controller和Passive View模式:
- Supervising Controller模式
Model:定义数据模型,实现业务逻辑,数据发生变化时,通过事件通知View来更新视图。
View:界面视图,响应用户的界面交互操作请求,然后将请求转给Presenter执行,View还能直接从Model获取数据。
Presenter:接受View的请求,然后可以做一些简单的控制或数据验证等处理,响应给View,或者调用Model执行业务逻辑。
- Passive View模式
Model:定义数据模型,实现业务逻辑,数据发生变化时,通过事件通知Presenter,Presenter再来操作View,更新界面视图。
View:界面视图,响应用户的界面交互操作请求,然后将请求转给Presenter执行。
Presenter:接受View的请求,可以是做一些简单的控制或数据验证等处理或者是从Model获取数据,再响应给View,也可以是调用Model执行业务逻。
这两种模式在WEB前端实现,就是把页面的DOM事件逻辑提取出来,放到Presenter里,同时Presenter还充当View和Model通信的中介,实际应用中,很少严格按MVP方式来设计。
MVVM
不管是MVC还是MVP,都只是一种设计上的思路,目标是实现界面视图和业务逻辑解耦分离,在WEB前端,很多框架是用的这种方式来实现的,MVVM(Model-View-ViewModel)的概念:
Model:定义数据模型,实现业务逻辑,当Model数据发生变化时,通过事件通知ViewModel数据更新。
View:界面视图,响应用户的界面交互操作请求,然后将请求转给ViewModel执行。
ViewModel:能接受View的请求,操作View以及调用Model执行业务逻辑,ViewModel的数据跟View关联,当ViewModel数据变化后,自动更新对应的View的界面视图。
现在流行的MVVM开发框架,例如Vue,自身支持下面三个特性,这样能为开发节省大量的工作
- Model数据变化后通知对应的ViewModel数据更新
- 用户的操作交互响应通过View转发给ViewModel(DOM节点自动绑定事件)
- ViewModel数据变化后通知对应的View更新界面视图(界面自动绑定数据)
参考文章:
以上是关于前端MV*的主要内容,如果未能解决你的问题,请参考以下文章