什么是MVVM?

发布时间:2022-06-17    知识栏目:网站建设知识

什么是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的市场份额,保持了良好的兼容性。现已为百度内多个产品提供了强劲驱动,如果还没接触过,一定值得一试。
+相关资讯

广州网站建设 广州网站设计 广州网站开发

工作室工作地点分布:广州  深圳  武汉  湖南


(c) Copyright 2008-2018 中网互联网站建设工作室. All Rights Reserved.