MVC、MVP及MVVM之间的关系

介绍

　　写这篇随笔彻底是为了加深本身的印象，毕竟写比看能得到得更多，另外本人对这三种模式的认识仍是浅薄的，有待在之后的工做学习中有更深刻的理解，所以难免会有误解，这里推荐你们阅读廖雪峰关于MVVM的介绍，以及阮一峰的MVC，MVP 和 MVVM的图示及谈谈MVC模式，相信您会有更深入的理解。

概要

MVC、MVP及MVVM都是一种架构模式，为了解决图形界面应用程序复杂性管理问题而产生的应用架构模式。

发展历程

MVC模式概要

1.即Model、View、Controller即模型、视图、控制器。

• View：它是提供给用户的操做界面，是程序的外壳；
• Model：是程序须要操做的数据和信息；
• Controller：接收View层传递过来的指令，选取Model层对应的数据，进行相应操做。

2.举一个现实中的相似的例子，MVC如同一家商铺的运做模式，View层至关因而这家商铺的店面，Model层至关于这家商铺的仓库，Controller层至关因而这家商铺的执行部门。

3.MVC有以下两种模式，无论哪一种模式，MVC的通讯都是单向的，由图也能够看出，View层会从Model层拿数据，所以MVC中的View层和Model层仍是存在耦合的。

MVP模式概要

1.MVP是从MVC进化而来，即Model、View、Presenter；View和Model同MVC中的M和V，MVP只是将MVC中的Controller变成了Presenter；

2.由上面对MVC的介绍中咱们能够得知，MVC中的View层和Model层是存在耦合的，但其实咱们不提倡View层与Model层有直接的交互；MVP就是这样一种思想的体现，View层与Model的交互只能经过Presenter；

3.MVP与MVC还有一点不一样是，它的通讯是双向的，以下图所示，有两个方向：V—>P—>M，M—>P—>V

MVVM模式概要

 1.MVVM是由MVP进化而来，MVVM模式基本上与MVP相同，只是把MVP中的P变成了VM，即ViewModel，

2.MVVM中的数据能够实现双向绑定，即View层数据变化则ViewModel中的数据也随之变化，反之ViewModel中的数据变化，则View层数据也随之变化

 

3.这里之前端框架VUE举例说明MVVM，固然还有许多有名的框架都用的是MVVM模式；MVVM的好处就是数据驱动，数据变，则页面变，这样就能用简单的代码，实现比较复杂的逻辑操做；所以MVVM框架比较适合逻辑复杂的前端项目，好比一些管理系统等。

1）准备视图层

<p>Hello, {{ name }}!</p>          --View层 --VUE中的单向绑定

<input v-model="name">             --View层 --VUE中的双向绑定

2）准备数据层

data: {
            name: ''               --Model层
        }

3）至于VM层，VUE框架已封装好，预知详情可阅读廖雪峰的博客；

4）得益于MVVM框架，咱们此时想改变视图层的<p>标签和<input>标签中的name属性的值，只须要经过以下方式便可，这样页面中就会显示“Jack”的名字，若是不是MVVM框架，咱们则须要通过document.getElementById('name').innerHTML = 'jack'，这种操做dom节点的方式来改变页面的值。

this.name = 'jack'

 

---

 说明：本文为原创做品，如有参考会在文中说起，若有遗漏，涉及侵权，请联系本人，将当即修正。