Mvc和mvp及mvvm 区别

2017. 11. 02    

MVC、MVP、MVVM 区别

MVC：后端思想

• View传送指令到Controller
• Controller完成业务逻辑后，要求Model改变状态
• Model将新的数据发送到View，用户得到反馈

所有通信都是单向的

View视图层	app.js	router.js	controller	Model
用户操作	项目的入口模块，一切的请求，都要进入这里进行处理，注意：app.js并没有路由分法的功能，需要调用router.js进行路由的分法处理	这是路由分发处理模块; 【为了保证路由模块的职能单一，router.js只负责分发路由,不负责具体业务逻辑的处理】 如果涉及到了业务逻辑处理操作;router.js就无能为力了,只能调用controller模块进行业务逻辑处理	这是业务逻辑处理层,在这个模块中,封装了一些具体业务逻辑处理的逻辑代码,但是,也是为了保证职能单一,此模块只负责处理业务,不负责处理数据的CRUD , 如果涉及到了数据的CRUD,需要调用Model层	职能单一，只负责操作数据库，执行对应的Sql语句，进行数据的CRUD C : create创建, R : read读取, U : update 更新, D : delete删除
v	v	c	c	m

MVP：

MVP模式将Controler改名为Presenter，同时改变了通信方向

• 各部分之间的通信，都是双向的。
• View与Model不发生联系，都通过Presenter传递
• View非常薄，不部署任何业务逻辑，称为‘被动视图’（passive View）

即没有任何主动性，而Presenter非常厚，所有的逻辑都部署在那里。

MVVM：前端思想

MVVM模式将Presenter改名为ViewModel，基本与MVP模式完全一致,唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在VIewModel，反之亦然

这里面使用的设计模式有：观察者模式（发布订阅模式）、代理模式、工厂模式、单例模式。

双向绑定

在MWM中, UI是通过数据驱动的,数据-旦改变就会相应的刷新对应的uI, UI如果改变,也会改变对应的数据。这种方式就可以在业务处理中只关心数据的流转,而无需直接和页面打交道。ViewModel 只关心数据和业务的处理,不关心View如何处理数据，在这种情况下, View和Model都可以独立出来,任何一方改变了也不一定需要改变另一方，并且可以将一些可复用的逻辑放在一个ViewModel中,让多个View复用这个ViewModel。

单向数据流和双向数据绑定

单向绑定的优点是相应的可以带来单向数据流，这样做的好处是所有状态变化都可以被记录、跟踪，状态变化通过手动调用通知，源头易追溯，没有“暗箱操作”。同时组件数据只有唯一的入口和出口，使得程序更直观更容易理解，有利于应用的可维护性。缺点则是代码量会相应的上升，数据的流转过程变长，从而出现很多类似的样板代码。同时由于对应用状态独立管理的严格要求(单一的全局store)，在处理局部状态较多的场景时(如用户输入交互较多的“富表单型”应用)，会显得啰嗦及繁琐。 基本上双向绑定的优缺点就是单向绑定的镜像了。优点是在表单交互较多的场景下，会简化大量业务无关的代码。缺点就是由于都是“暗箱操作”，我们无法追踪局部状态的变化(虽然大部分情况下我们并不关心)，潜在的行为太多也增加了出错时 debug 的难度。同时由于组件数据变化来源入口变得可能不止一个，新手玩家很容易将数据流转方向弄得紊乱，如果再缺乏一些“管制”手段，最后就很容易因为一处错误操作造成应用雪崩。 这样来看，单向绑定跟双向绑定在功能上基本上是互补的，所以我们可以在合适的场景下使用合适的手段。比如在 UI控件 中(通常是类表单操作)，我会使用双向的方式绑定数据；而其他场景则统一采用 单向 + inline event ( ) 的方式构建应用。