该【分析web前端中mvvm框架的关键技术及优势 】是由【Alphago】上传分享，文档一共【7】页，该文档可以免费在线阅读，需要了解更多关于【分析web前端中mvvm框架的关键技术及优势 】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。1
分析Web前端中MVVM框架的关键技术及优势
1Web前端模式的演化
要了解MVVM模式的由来,我们先来回顾下Web前端进展的历史,在1989年,物理学家蒂姆伯纳斯李制造了超文本标记语言(HyperTextMarkupLanguage),,最早的HTML就只是静态的页面,并不能动态修改页面的内容,在1995年年底,JavaScript的消逝将动态去修改页面变成了现实,到如今的前端开发模式我们可以分为4个阶段,具体如下。
(1)js结合原生的扫瞄器API通过扫瞄器的机制,可以直接操作页面DOM.
图1MVC模式
图3MVVM通信方式
(2),Web开发的要求不断提升,ajax也慢慢流行起来。为了降低跨扫瞄器开发的简洁度和考虑各种扫瞄器兼容性,很多前端类库(YUI、Dojo、Mootools、Prototype、jQuery)也相继问世,但最终还是jQuery以写得更少,做得更多,简洁、优雅的设计特点胜出,快速占据了世界,直到现在还广泛运用。
(3)MVC模式的诞生,随着前端技术的进展,后台的业务规律慢慢向前端转移,只使用jQuery可能无法满足越来越简洁的业务需求,尤其在单页面应用上更显得力不从心,,作为前端MVC框架的鼻祖,让前端开发的价值上升了一个新的台阶。
(4)MVVM模式是Model-View-ViewModel模式的简称,借鉴了MVC模式的思想,利用数据驱动视图,达到数据和视图进行完全分别,实现了前后端真正的分别模式,成为如今Web开发的主流。
2MVVM模式的思想以及与MVC的比较
MVVM模式是从MVC进展而来,对比两种模式的工作原理,了解MVC框架的缺点能让我们更好地去熟识MVVM模式的优势所在。
它的原理就是界面呈现与数据模型分别,修改呈现界面并不需要重新编写业务规律。
Model(模型):模型存放着应用的全部数据对象,因此包含数据和行为,模型不包含视图与把握器之间的规律,但是模型供应了模型数据查询和模型数据的状态更新等功能。
View(视图):对模型进行视图的呈现,视图是呈现给用户的,就是我们能见到的页面。
图2MVC通信方式
Controller(把握器):把握器可以理解为是模型与视图的桥梁,集中性地管理大事触发、视图触发,当页面加载完成时,把握器进行监听交互,做出对视图的选择,托付模型更新数据。
各部分之间的通信方式如下。
View传送指令到Controller,Controller完成业务规律后要求Model转变状态,Model将新的数据发送到View,用户得到反馈。
缺点一:把握层和视图层进行耦合,一发而动全身,并没有实现真正的分别和重用。
缺点二:架构以牺牲代码的简洁性为代价,对于小项目降低开发效率。
View和Model层没有直接的联系,通过ViewModel进行双向交互,实现了真正的前后分别。
View表示我们网页,Model表示数据模型,由于MVVM的把握器并不会去监听扫瞄器的大事,而是监听一个属性表,由扫瞄器的大事修改属性,以触发把握器中的方法,增加了一层把握业务的属性,而这层属性被称为ViewModel,View与Model通过ViewModel就实现了双向绑定。
MVVM模式接受双向绑定(data-binding):View和Model之间的同步工作完全是自动的,ViewModel通过双向数据绑定把View层和Model层连接起,负责把Model的数据同步到View显示出来,还负责把View的修改同步回Model,所以开发者只需要关注自己的业务规律。这也是MVVM的核心思想:关注Model的变化,让MVVM框架利用自己的机制去自动更新DOM,从而把开发者从操作DOM的繁琐中解脱出来,不需关注数据状态的同步问题,也就是所谓的数据和视图分别,数据驱动视图,视图不影响数据。
(1)低耦合。
视图独立Model变化和修改,一个ViewModel同时绑定到多个视图上。
(2)可重用性。
可以把View规律放在ViewModel里面,重用这些视图规律。
(3)独立开发。
通过MVVM,开发人员可以专注于业务规律和数据开发在viewModel里面,分工更加明确。
3前端MVVM框架的对比
如今MVVM框架成为Web开发主流,涌现出了越来越多的框架,但是用数据说话,形成了三足鼎立的一个状态,、、,每个框架都不行避开会有自己的一些特点,现在主要针对三大框架进行一个详细的对比。
Angular和vue为双向绑定,react单向绑定。
Angular的模板是最强大的,除了自带的、丰富的模板指令,还可以通过自定义的指令定义模板,调用的时候只需要一个指令名称就够了,React模板就是JSX,JSX语法相当于一个变量,相当灵敏。Vue基于HTML的模板,它的特点就是简洁易用。
Angular本身是一个大而全的框架,它对模块模板路由都有很多的要求,因此自由度比较小。
React是UI层框架,JSX模板相当于js,写起来自由度特殊大,相当于原生的js.
Vue追求的是灵敏、简洁,但还是受到一些经典Web技术的限制,相对React自由度小一些,但其实也比较自由。
Angular路由是自带的,而Vue和React是借助别的路由工具。
React使用React-router,Vue使用Vue-router,Angular中是静态的路由。
Angular框架较臃肿。gzip文件大小为143K,而Vue为23K,,三大框架都是特殊快的,我们完全不必纠结一般的应用层面的框架性能问题。
React入门简洁,越深化就越难,React的语法使用了JSX,学习之前首先要先了解JSX语法,后期状态管理Redux的理解也相对比较简洁,加上生态衍生出来的形形色色的插件就更加有难度了。
Angular在经受了全新版本升级,使学习曲线比较陡峭,完完全全变成了一个框架,使用了很多新的概念,API文档的理解并不是很简洁,导致上手难度稍大,但是本身的设计目的是针对较大型的应用,总体来说,对于新手开发者并没有那么友好。
Vue学缓,入门相对简洁,得益于中文文档,对于国内来说更加友好,并且不脱离原有的HTML、CSS、JS前端开发习惯是它最大的特色,不需要先学习jsx语法或typescript的语法,所以学习曲线很稳,也更让纯前端人员接受和上手。
4结语
前端MVVM已成为主流,前后端分别也慢慢成为将来趋势,MVVM模式是前端模块化、工程化的重要设计思想,在互联网高速进展的今日,面对越来越简洁化的应用场景,MVVM模式对前端开发的效率有了大的提高,对于前端模块化开发有了质的提升,让前端代码更加简洁易维护和易测试。新的技术总是接踵而至,在计算机领域时刻都要迎接更加优秀的技术的来临,让我们一起迎接MVVM这一轮新技术的浪潮吧。
参考文献
[1]何焕春,杨怿。基于MVVM构架的Web前端框架争论[J].电脑学问与技术,2017,13(24):59-60.
[2]顾睿。基于MVVM的虚拟DOM轻型Web前端框架的设计与实现[D].西安电子科技高校,2019.
[3]莫文水。Web前端中MVVM框架的应用争论[J].网络平安技术与应用,2017(4):64.
[4]仝守玉。基于MVVM模式的数字员工管理平台的设计与实现[D].北京邮电高校,2017.
[5]彭逸帆。多用户管理系统的Web前端框架争论[D].北京邮电高校,2018.
[6]程桂花。MVVM前后端数据交互中平安机制的争论与实现[D].浙江理工高校,2017.
[7]苏艳。MVVM框架在Web前端的应用争论[J].数码世界,2017(11):67.
[8]肖小岚,刘振宇。基于MVVM模式的Extjs框架在前端界面设计中的应用争论[J].电脑学问与技术,2016,12(5):84-88.
[9]孙连山,李云倩。MVVM框架在Web前端的应用争论[J].电脑学问与技术:学术沟通,2016(2X):45-46.
