随着前端事业的快速发展,网页的设计模式里面出现了MVVM模式,在这种新的模式下,reactvue们得到了快速发展。那么,这和传统的MVC模式,有什么区别呢?这就是苏南大叔在本文中要探讨的主要问题。

苏南大叔:浅谈网页设计模式:MVC/MVP/MVVM模式区别及联系 - mvvm-hero
浅谈网页设计模式:MVC/MVP/MVVM模式区别及联系(图3-1)

没有啥测试环境,大家就默默的听苏南大叔说说就行了。唯一需要声明的是:本文中苏南大叔描述的概念,可能和网上流传的概念不同。这里仅供参考,欢迎留言,提出您不同的观点。

MVCMVP模式对比

传统的网站,基本上都是MVC模式的。

  • mmodel,理解为数据库(中的表),或者说通过对数据表进行组合加工处理形成的虚拟model
  • v指的是view,苏南大叔的理解就是传递给终端用户的html了。
  • c指的是controller,用来联系mv的,把m里面的数据传递给v,由v负责展示。

苏南大叔:浅谈网页设计模式:MVC/MVP/MVVM模式区别及联系 - mvc
浅谈网页设计模式:MVC/MVP/MVVM模式区别及联系(图3-2)

MVPMVC的基本概念是一致的。

  • 它的p是指的是:Presenter,基本上等同于controller
  • 但是,两者肯定是区别的。苏南大叔的理解是这样的:MVP中的v不可以访问m,而MVC中的v可以访问m(写那些网页模版的时候,大家自行体会)。
  • 所以,pc的区别就是:专职和兼职的区别,数据访问及逻辑处理,纯粹都放在c里面的话,c就变成了p

MVCMVVM模式对比

这里说说MVVM模式,这些都是伴随着js的不断强大而伴生出的新概念。所以,苏南大叔认为:MVVM是附生在前端网页的这个层次上的,也就是MVCMVP中的VMVVM是从V的概念的再次衍生和发展。

苏南大叔:浅谈网页设计模式:MVC/MVP/MVVM模式区别及联系 - mvvm
浅谈网页设计模式:MVC/MVP/MVVM模式区别及联系(图3-3)

MVVMV的概念,再次进行了分化,分为:mvvm

  • m还是model,但是这里并不是代表在后端的数据库了,这里表示的是前端的js对象,也就是说object
  • v,这个基本上可以继承原来的v的概念,指的是html代码,但是!由于各种MVVM框架的发展,这些html的写法发生了较大的变化。战场从传统的htmldom衍生到由js虚拟出的dom里面。
  • vm,苏南大叔就理解为reactvueangular这些框架的作用了。他们对domobject进行双向绑定,让传统的jquery几乎彻底失业。

相关链接

总结

本文中的几种网页设计的理解,是苏南大叔多年编程经验的理解,和网上的大多数论点有所冲突。当然,如果您是在考试的话,请使用你书本上的概念解释。本文就是个博客文章,阐述自己的观点和理解的。请不要认为这里的观点是就是正确的哦。

如果您支持苏南大叔的文章,欢迎查看下面的链接:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   mvvm

本站的忠实读者小伙伴,正在阅读下面这些文章: