MVC与Flux架构

虽然日常开发中并没有直接接触到框架，但是思想也是方方面面的涉及到开发思路中。总是对几种架构迷迷糊糊，这边对于一些架构进行总结整理！

MVC架构

 

mvc中有三个角色：

view:视图层，界面显示层

controller:控制层，对于数据进行操作

model:数据层，负责管理程序需要的数据

 

 

 整个过程就是：用户通过操作页面，用户的操作被转发到controller上，controller进行操作来更新model的数据，model数据的改变派送给view，导致view页面的重新更新。

MVC的数据流是双向的，modal通知页面数据已经更新，view直接查询model的数据

 

上述是理想的状态，真实的情况下，可能是多对多的状态，view的数据来自于多个model，model的改变会导致多个view的视图改变。

这种情况下可能会比较混乱，这种情况下如果要追溯页面数据的变化，就很难定位到具体是那个model的变化导致的，调试艰难。

 

 

 

Flux架构

flux架构如下，其实流程看起来和mvc是类似的，搞得我一直把他们弄混

 

 

Flux架构下的角色：

 

view:视图层,界面显示

 

action:描述操作的行为，type,payload

 

dispatch:连接器，将action派发给store

 

store:数据源，通过action来改变store的数据，数据的改变导致view视图层的改变

 

复杂的多view的情况如下：

 

 

 

 相较于MVC模式，flux架构数据源更加清晰

 

顺便说一下mvvm模式：

 

 

 主要有下面三个角色：

view: 视图层

ViewModel:一些逻辑的处理，相当于view和model的粘合剂

model：数据源

 

特点：mvvm是双向数据流，将业务逻辑分离开来。

MVVM与MVC的区别有：

1、mvvm各部分的通信是双向的，而mvc各部分通信是单向的；

2、mvvm是真正将页面与数据逻辑分离放到js里去实现，而mvc里面未分离