19.框架通识-MVC与MVVM

框架到底实现了哪些东西，让维护和开发变得高效？
1.模板引擎
2.双向绑定
3.组件化
4.路由

1、2让开发工作变得高效，这才是最核心的
3让维护变得更简单，通过复用也间接对开发的高效有一定帮助
4让程序成为一个单页面应用，避免了大量重复的加载和渲染，但这应该是最不重要的

对MVC的理解

Typical_MVC_Paradigm.png

view用于展示数据，model用于存放、获取数据

controller用于view 、model之间的沟通，责任有4个：
用户点击页面，controller负责处理交互，更新model
view -> view controller -> model

1. 处理交互，如用于点击后alert('hello')
2. 更新model

如果model更新，controller负责处理原始数据，更新视图
model -> view controller -> view

3. 处理model的原始数据
4. 更新视图

可见controller的责任不少，特别是处理model原始数据，比如原始数据是一个数组，但是视图是需要显示为一个表格，这就需要处理。

let table = document.createElement('table');
for (let item of arr) {
 ...
}

再比如原始数据是'hello'，需要展示的是'HELLO'。

controller中的业务将会非常多，以至于后来有人调侃MVC为Massive View Controller，意为"巨大的视图控制器"。

对MVVM的理解

MVC中，controller直接持有model，需要处理原始数据，造成controller冗长。
所以MVVM设计了view model，用来作为model和controller之间的桥梁，负责原始数据和要展示的目标数据之间的转化。controller不再持有model，只需要持有view model，把它当做数据源就行了。

用户点击，controller 负责处理交互，更新view model
view -> view controller ->view model -> model

1. 处理交互，如用于点击后alert('hello')
2. 更新view model

如果model更新，controller不再负责处理原始数据，只管更新视图
model -> view model -> view controller -> view

3. 更新视图

MVVM中，view和view controller两个概念合在一起，同一叫view。所以，M还是指model，V指view + view controller，VM指view model
所以：
M负责保存、获取数据
V负责展示数据、处理交互、更新view model、更新视图。共4个责任。
VM负责处理model提供的原始数据、更新model

MVVM_high_level.png