浅谈网页设计模式：MVC/MVP/MVVM模式区别及联系

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

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

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

MVC和MVP模式对比

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

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

而MVP和MVC的基本概念是一致的。

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

MVC和MVVM模式对比

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

MVVM对V的概念，再次进行了分化，分为：m、v、vm。

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

相关链接

• https://newsn.net/say/react-mini-demo.html

总结

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

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

• https://newsn.net/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。