大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

什么是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图示

有了前端MVVM框架,应用就可以通过数据驱动。在View层声明绑定后,在框架提供的视图引擎帮助下,操作数据就可以自动更新View,完成了视图更新的自动化,可以大大提升开发效率。谈到引用框架的成本,不得不安利的是百度errorrik大神出品百度MVVM框架san,保持功能强大的同时gzip后体积仅约11k!还兼顾到IE8的市场份额,保持了良好的兼容性。现已为百度内多个产品提供了强劲驱动,如果还没接触过,一定值得一试。