什么是MVVM？
什么是MVVM？2008年，V8引擎随Chrome浏览器横空出世，JavaScript这门通用的WEB脚本语言的执行效率得到质的提升。V8引擎的出现，注定是JavaScript发展史上一个光辉的里程碑。它的出现，让当时研究高性能服务器开发、长时间一筹莫展的Ryan Dahl有了新的、合适的选择，基于JavaScript的服务端项目node.js在2009年柏林的JSConf中对外发布，node.js不仅带来了一个高性能的服务器，还很大程度上推动了前端工程化。它的出现，让JavaScript可堪大任，越来越多的业务逻辑在浏览器端实现。前端逻辑越来越重，前端架构提上日程。随后，我们谈论的主角，MVVM模式，走进了WEB前端的架构设计中。
MVVM模式，顾名思义即Model-View-ViewModel模式。它萌芽于2005年微软推出的基于Windows的用户界面框架WPF，前端最早的MVVM框架knockout在2010年发布。
一句话总结MVVM：操作数据，就是操作视图。
一句话总结WEB前端MVVM：操作数据，就是操作DOM（所以无须操作DOM）。
为什么？因为实现MVVM模式的框架会做操作DOM的事儿，前提是你声明绑定。MVVM最标志性的特性就是数据绑定，MVVM的核心理念也是通过声明式的数据绑定来实现View层和其他层的分离。
MVVM模式，是一种分层架构
Model: 域模型，用于持久化
View: 作为视图模板存在
ViewModel: 作为视图的模型，为视图服务
Model层
WEB前端MVVM里的Model层，对应数据层的域模型，它主要做域模型的同步。通过Ajax/fetch等API做客户端和服务端业务Model的同步。它用于抽象出ViewModel中视图的Model。
View层
View层，作为视图模板存在，在MVVM里，整个View是一个动态模板，展示的是ViewModel层的状态。View不负责处理状态，View层做数据绑定的声明、指令的声明。
ViewModel层
ViewModel层把View需要的Model层数据暴露，对View层的数据绑定声明和指令声明负责。声明绑定，数据变化，自动更新View。View中通过双向绑定的数据、View中绑定的事件也会分别通过隐式、显示调用的修改ViewModel的数据。
MVVM框架的工作
通过视图引擎为View层作为视图模板提供保障，达成操作数据，就是操作DOM的目标。功能完善的模板引擎，为高效率开发提供保障。
属性变化的监听
通过封装自定义数据存取器或借助Object.defineProperty()API等方式，在自定义的数据存取器内部或setter/getter数据访问器内部通过类似发布/订阅模式完成对数据变化的监听、通知，是数据绑定实现的基础。
组件机制
开发者希望按面向未来的组件标准Web Componets的方式开发，就需要框架提供组件的定义、继承、生命周期、组件间通信机制。
周边
应用状态管理
SPA路由管理
UI组件库
有了前端MVVM框架，应用就可以通过数据驱动。在View层声明绑定后，在框架提供的视图引擎帮助下，操作数据就可以自动更新View，完成了视图更新的自动化，可以大大提升开发效率。谈到引用框架的成本，不得不安利的是百度errorrik大神出品百度MVVM框架san，保持功能强大的同时gzip后体积仅约11k！还兼顾到IE8的市场份额，保持了良好的兼容性。现已为百度内多个产品提供了强劲驱动，如果还没接触过，一定值得一试。
上一篇: vue是什么有什么优势
+相关资讯
-
11/272017js是什么？
广州网站建设中js特效是什么？
-
11/172017java是什么?
java是什么?学java工资高吗?都有什么岗位?
