怎样理解 MVVM ( Model-View-ViewModel ) ?

MVVM 的 产生 / 实现 / 发展 可以写一篇很长的博客了, 这里仅写一下个人对 MVVM的一些肤浅的认识.

1. 在 没有 MVVM 之前, 前端可以说是 jQuery一把梭 , jQuery 解决的是前端在写页面 交互/ 功能 时需要 频繁操作 dom 这一痛点, 在 简化 dom 操作 这一点上, 没有哪个库比 jQuery 更出色. 而且还能解决大部分 浏览器兼容性问题 , 用起来别提有多爽了.

2. 然而, 随着 网速 越来越快 / 手机性能 越来越好, 大家纷纷觉得可以在 网页 上多做文章, 而且 HTML5 和 ES6 的出现为开发者在 网页 上做 应用 提供了极大的便利, 此时人们发现, 原来非常好用的 jQuery 慢慢变得不合适了, 因为它没有解决 因为频繁调用 DOM 而产生的 性能问题 , 也没有简化开发者在处理用户与页面交互时所需的业务逻辑.

3. 为了解决上面的问题, MVVM 架构方式应运而生 , Model-View-ViewModel 的这个思想可能是受到了服务端的 MVC 架构 ( Model-View-Controler ) 的启发, 不过 MVVM 针对 前端的具体痛点, 强化了 Controler, 也就是: ViewModel, 我们可以认为 MVVM 里面最为核心的就是 ViewModel. 它将 View 和 Model 分离, 也就实现了 逻辑 与 展示 的分离, 使得我们可以不用像之前一样需要频繁地操作 DOM, 也不需要手动地去更新 数据( model ) 和 页面( view ). 这一切, ViewModel 都已经为我们做好了, 我们唯二需要做的就是: 1. 写页面. 2. 写逻辑. 至于怎样将逻辑和页面关联起来实现交互, ViewModel 表示: 这事儿你就不用管了, 让我来~.

4. 总结起来, MVVM 可以看成是 MVC 架构针对前端主要开发场景所衍生出来的 子集, 它对 视图 和 模型 进行了 严格分离, 强化了 Controler, 从而解决了在开发 现代Web应用 时所遇到的痛点.