前端开辟本质上是一种展示层开辟，我思索了一下这句话，这句话用人话说就是前端开辟本身就是写界面的。然则他人能把写界面的能总结成下面一个轮回，我发明这真的是才能了。如下图，有稍微的修改：
下面就最先进入正题了。
基于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…
