前端开发本质上是一种展现层开发，我思考了一下这句话，这句话用人话说就是前端开发本身就是写界面的。但是别人能把写界面的能总结成下面一个循环，我发现这真的是能力了。如下图，有略微的改动：
下面就开始进入正题了。
基于MVC的前端开发
简单的MVC
先看下图： 
- 用户操作界面
- 当用户操作的视图的时候会派发一个事件给Action
- 当Action接受到这个事件的时候，调用Model对应的方法
演进的前端MVC
- 用户操作界面
- 当用户操作的视图的时候会派发一个事件给Action
- 当Action接受到这个事件的时候，调用Model对应的方法
- Model得知view改变了，然后进行相应的操作，改变自身所存储的数据
- 当Model改变了，派发一个事件给Action
进一步复杂的前端MVC
- 用户操作界面
- 当用户操作的视图的时候会派发一个事件给Action
- 当Action接受到这个事件的时候，调用Model对应的方法
- Model得知view改变了，然后进行相应的操作，改变自身所存储的数据
- 当Model改变了，派发一个事件给Action
- 当Action知道Model的数据变化的时候，调用views中的方法
- view改变自身
但是这样是有下面两个问题的，
- 交互增加导致view的控制代码迅速膨胀，最终导致代码不可维护
- Model的控制代码也会变多，
以至于出现下面的状况：
前端的MVVM
虽然mvc有以上的弊端，但是因为没有一个好的架构思想去取代他，所以也只能用MVC了，但是随着前端angular的横空出世，倡导的MVVM思想也随之深入人心，先看下图：
- view和viewModel的数据双向绑定
- 当用户操作view的时候，viewmodel也进行对象对应的变化
这样，我们能通过操作Model来控制view的显示，一个页面的比如能拆分为小功能(注册/登陆、表单提交、XXX功能)这样每个功能对应一个Model，我们就能模块化的管理Model，就变为了下图：
所以当用户操作界面的时候，我们viewModel就知道是哪部分发生了变化，对应的viewModel就进行改变。
React一种新的思想
了解React的都知道，React对强大的功能就是vdom，能够计算出最有效也是花费最小的vdom和真实dom的差异并进行改变。
下图为MVVM的整体设计思路：
用户操作view
dispatch view事件给状态管理
状态管理工具更新状态/进行到下一个状态
根据新的状态，render view
React遵从的是单向的数据流：
- 存在一个Model到React的映射关系，即view的渲染方法
- view并不知道自己对应Modle哪一块
- 于是每次Model的变更，view全部更新。React的vdom算法保证了render的高效
MVVM和React
要解决的问题： 复杂的web交互导致view更新逻辑的爆炸
解决思路：
- MVVM：记录Model、双向绑定，Model变更时更新view对应部分
- React：实现view高效更新算法，Model变更时更新整个view
MVVM的实现是在工程上进行解决，React在解决思路(算法)上进行解决
版权声明：本文为博主原创文章，转载请注明出处 https://blog.csdn.net/woshina…
