基于MVVM的虚拟DOM轻型Web前端框架的设计与实现

发布时间：2020-08-22 12:34

【摘要】：近些年随着互联网尤其是移动互联网的不断发展,Web应用的需求和复杂度不断增加,Web前端代码体积越来越庞大。为解决前端开发过程中出现的代码可重用性不高、扩展性差、维护管理困难、项目构建低效等问题,涌现出一批优秀的前端框架。然而,在移动网络中,网络环境相对较差,体积庞大的前端框架本身可能造成网络瓶颈,而频繁的DOM操作也使页面刷新效率成为前端性能主要制约因素之一,Web应用开发对能解决以上问题并合理缩减自身体积提高加载效率以适应低速网络环境的轻型前端框架的需求越来越迫切。本文采用MVVM架构,实现了以虚拟DOM为核心的轻型前端框架Luna。具体研究内容如下:首先,对该前端框架进行业务需求分析,确定框架的总体架构,确定该框架MVVM主要功能模块,并分别对Luna前端框架各模块进行了详细的功能分析以及对该框架的性能优化和框架代码构建需求进行了详细分析,确定了性能测试的相关指标。其次,基于MVVM架构对该前端框架进行了设计与实现。前端框架Luna由种子模块、模型数据模块、视图模块和视图模型模块四个基本模块组成,本文对各个模块分别进行了详细设计和代码实现。种子模块提供了框架必要的环境准备和通用功能函数,并针对JavaScript语言特性做了必要补充,实现了组件化设计和前端路由等前端框架必要功能,并为该框架提供了入口。模型数据模块以数据对象为核心,实现了前端数据的存储、读取、监听、更新和与服务端交互等相关功能。视图模块以虚拟DOM为核心,通过JavaScript对象模拟DOM树结构,并比较视图改动前后虚拟DOM差异来减少DOM操作,提高了页面的渲染性能和加载效率。视图模型模块将模型数据和视图模块进行自动关联和双向绑定,使开发者无需手动维护视图更新,实现了视图与数据的解耦,使数据更改可以同时更新所有关联的元素节点和组件。接着利用缓存机制减少HTTP请求次数,并通过对框架代码合理压缩与合并,减少了框架文件的网络负载,进而提高了页面的加载速度。最后,对本文实现的Luna前端框架各功能模块的主要功能做详细测试,通过构建Web应用和模拟移动网络环境测试其关键性能指标,并与业界流行的React和Angular框架进行性能测试对比,同时对测试结果进行分析。本文实现的前端框架Luna所采用的MVVM架构有效地解决了前端代码组织混乱、可维护性差等问题,采用优化的虚拟DOM技术提高了页面加载和刷新效率,利用压缩缓存技术缩减了代码体积,并使用合理的构建方式使提升了应用开发者的开发效率。该框架有效地提高了在特殊网络环境下的前端性能,基于该框架的Web应用页面加载速度在较差网络环境中相比于主流前端框架得到了较大提高,为前端框架的设计与研发提出了新的解决方案。
【学位授予单位】：西安电子科技大学
【学位级别】：硕士
【学位授予年份】：2019
【分类号】：TP393.09
【图文】：

频繁地发送 HTTP 请求这些资源会严重影响页面初始化速度，带来较差的用户体验。图3.5 移动 Web 应用页面加载文件示例为了加快此类文件的加载，可以将相同文件类型的文件进行合并，如将多个JavaScript 框架类库的文件按照依赖关系合并为一个文件，将所需的图标文件默认使用精灵图合并为一个图片文件，在移动应用中可以将所有图标放到一个 SVG 文件中。此外，由于 JavaScript、CSS 等在浏览器解析过程中没有格式要求，因此可以对文件进行压缩处理以节省网络带宽。JavaScript 压缩指的是把 JavaScript 文件中所有与运行无关的部分进行剥离的过程，剥离的内容包括注释和不必要的空白符号，再使用将局部变量名缩短、将方括号表示法替换为点表示法、合并常量等方式进行进一步压缩，最后使用 Gzip 对文件进行压缩处理。CSS 压缩则更为简单

内部使用 MVVM 模式构建，包含 data 对象与模板字符串对应的虚拟 DOM 树，其内部 MVVM 整体架构如图 4.3 所示。图4.3 组件内部 MVVM 架构从图 4.3 可以看出，每个包含数据的动态组件只有一个数据对象，但由于数据属性可以是 Object 类型，因此可能包含有多个 watcherList。此外，每个模板指令和标

经过 patch 操作后，图 4.7 中所示的抽象语法树示例将会被渲染成为图 4.8 所示的 DOM 节点。图4.8 由抽象语法树渲染出的 DOM 节点示例从图 4.8 可以看出，type 为 text 的虚拟节点会直接被渲染为 HTML 的 textNode，除此之外还会做一些其他处理，比如会将驼峰属性名转化成 HTML 支持的连字符形式的属性名。View 视图模块与 ViewModel 视图模型模块及 Model 模型数据模块的交互主要通过 Template 动态模板类的_watch 和_update 两个方法建立联系的，而对内则调用了虚拟 DOM 更新视图，因此 Template 动态模板类起到了承上启下的作用。4.2.3 虚拟 DOM 的设计实现通过Template动态模板类可以实现视图与数据之间的联动，当数据发生变化时，

【相似文献】

相关期刊论文 前10条

1 孙正峰;闵西英;李西顺;;汽车全塑前端框架拓扑优化研究[J];汽车零部件;2017年08期

2 孙玉红;胡远航;齐贺;牟雪雷;;汽车前端框架力学性能分析及优化设计[J];汽车零部件;2016年03期

3 李翠萍;孙玉红;牟雪雷;胡远航;宋广晶;吴亮发;;汽车前端框架上梁拓扑优化设计[J];汽车工程师;2015年09期

4 蔡章恒;牟雪雷;杨晶晶;;全塑前端框架有限元分析[J];汽车零部件;2016年12期

5 陈涛;;塑料前端框架与车身安装方式的研究[J];内燃机与配件;2019年20期

6 于淑云;;高校可配置网站集群前端框架设计[J];长春工业大学学报;2015年05期

7 宋刘洋;刘小杰;吴方武;王镇斌;许钰龙;;某SUV车型塑料前端框架的研究[J];汽车零部件;2019年05期

8 周银萍;王跟成;;MiniUI前端框架研究[J];福建电脑;2015年07期

9 胡远航;孙玉红;杨广锋;刁芳芳;周震;陈浩;;前端框架Moldflow分析及优化[J];汽车零部件;2016年05期

10 严春燕;戴仕明;;基于框架的web前端(Bootstrap和MUI)之比较[J];网络安全技术与应用;2017年04期

相关会议论文 前3条

1 高翔;李波;周佳;李阳;高聪;;汽车前端框架以塑代钢轻量化开发[A];2019中国汽车工程学会年会论文集（2）[C];2019年

2 张雷;邹素平;朱德霞;;镁合金前端框架设计[A];2019中国汽车工程学会年会论文集（2）[C];2019年

3 孙正峰;李西顺;;汽车全塑前端框架拓扑优化研究[A];2017Altair技术大会论文集[C];2017年

相关重要报纸文章 前1条

1 胡小建;华中铜业5月份实现“五项突破”[N];中国有色金属报;2017年

相关硕士学位论文 前10条

1 顾睿;基于MVVM的虚拟DOM轻型Web前端框架的设计与实现[D];西安电子科技大学;2019年

2 林伟强;实时跨平台桌面证券交易系统前端框架的设计与实现[D];深圳大学;2018年

3 张佳佳;基于Web App服务平台的移动搜索的应用研究[D];河北工业大学;2016年

4 刘志飞;基于模型驱动的前端框架MBB设计与实现[D];华中科技大学;2018年

5 于晶晶;基于MVVM的前端框架MTCG的设计与实现[D];天津大学;2017年

6 许珊;针对百度品牌专区业务的前端框架的设计与实现[D];南京大学;2017年

7 胡智超;腾讯Q~+应用商店前端框架设计与实现及性能优化[D];哈尔滨工业大学;2013年

8 王光辉;基于iOS平台的客户端框架设计与实现[D];中国地质大学(北京);2016年

9 郑杰;AngularJS前端框架与后端代码自动生成系统的设计与实现[D];西南交通大学;2016年

10 罗锐;基于AJAX的组件式WebGIS客户端框架的研究与实现[D];华北电力大学（北京）;2008年

本文编号：2800692