基于MVVM模式的前端框架插件库设计与实现
发布时间：2021-10-12 12:42
随着Web技术的快速发展和移动互联网的到来,前端领域实现了大跨步发展。然而,传统的Web开发操作较繁琐复杂、开发周期较长、性能低、后期维护困难,特别在插件使用方面存在命名冲突、修改插件样式困难等问题。基于插件开发的应用程序,可减少开发时间、提高应用程序性能及降低后期维护困难度,论文提出一种基于MVVM模式的前端框架插件库,实现对插件的高效管理。论文首先在研究MVVM模式、VirtualDOM构建方法、插件的主要特性、国内外主流插件的体系架构及实现原理的基础上,提出了一种前端框架插件及插件库架构设计并进行了实现。插件及插件库采用模块式设计,各功能之间相互独立,降低耦合度;底层使用VirtualDOM,通过VirtualDOM扩展DOM节点属性及数据处理方法,提高DOM节点的灵活性和页面的编译、渲染性能。论文其次对插件库定义了一套标准化命名方式,减少插件使用时因命名冲突引起的格式问题;提供在线配置服务,减少前端开发者修改插件的时间;实现自动化编译、动态打包、下载及API文档,降低插件对硬件配置的要求,提高插件的易用性。论文最后对插件和插件库进行功能及性能测试,测试结果表明,基于MVVM模式...
【文章来源】：西南科技大学四川省
【文章页数】：82 页
【学位级别】：硕士
【部分图文】：
图１－１?Ｖｕｃ组件树结构图??虽然国内有多款带有插件的前端框架，但是大多数框架是基于ＭＶＣ模式的，Ｍｏｄｅｌ??
将ＭＶＣ模式中Ｖｉｅｗ的行为和状态抽象化，从而让开发者将视图ＵＩ和业务逻辑分开，??同时使用ＶｉｅｗＭｏｄｅ丨实现数据的双向绑定。ＭＶＶＭ模式使用数据绑定基础结构，可以??快速、便捷的构建Ｕｌｔ３％它的技术模型如图２－１所示。??ＨＴＭＬ?Ｊ?ＨＴＭＬ?Ｌ?Ｖｉｅｗ??雖绑定１１行为处理１１视图腦｜?ＶｉｅｗＭｏｄｅｌ??１?ＪＳＯＮ?￣］?＾?数据?’?Ｍｏｄｅｌ???ｉｉ????１＇???｜?ＪＱＵＥＲＹＡＪＡ）Ｔ｜?Ｉ?通’讯?｜?Ｓｅｒｖｉｃｅ??服务??图２－１?ＭＶＶＭ模式技术模型图??在应用程序开发过程中，数据是程序的核心，代码的实现总是和数据结构紧密相??关。数据驱动可将复杂的程序代码逻辑转移到数据，从而降低逻辑复杂性。ＭＶＶＭ以??数据为中心，使视图处于从属地位，因此，在开发过程中，需将模板代码和数据界限划??分清楚，以降低Ｍｏｄｅｌ和Ｖｉｅｗ之间的稱合度。这样，在改变程序逻辑的时候，只需修??改数据，而不需要修改模板代码。相对于传统的程序逻辑解决问题，使用ＭＶＶＭ模式??具有以下优点：??（１）
进行初始化处理，初始化指令集接口函数为ｉｎｉｔＶｉｅｗＤｉｒｅｃｔｉｖｅｓ（ｅｌ），?ｅｌ表示视图ｖｉｅｗ，??最后就是进行遍历待编译的Ｅｌｅｍｅｎｔ的孩子节点，进行文本节点、注释节点以及元素节??点的处理。具体的编译流程如图２－２所示。??（开始）??Ｉ??创建Ｍｏｄｕｌｅ??Ｉ?￣￣??生成?ｖｉｒｔｕ?ａｌＤｏｍ??Ｌ?ｉ??组合??ｖｉｒｔｕａｌ?ＤｏｍｉｎｎｅｒＨＴＭＬ???Ｎ?＞｜?ｒＭｅｌｅｍｅｎｔ＾￣??处理属性值为表达式的指令??－?Ｉ??初始化指令集??＜ａＳ？＾＞?Ｎ??Ｙ?Ｙ??▼???ｉ???移除注释??／?ｎ?￣＾?ｉ?丄??——？麟?＾???????图２－２?ＶｉｒｔｕａｌＤＯＭ编译流程??１２??
【参考文献】：
期刊论文
[1]浅议MVC设计模式在JavaWeb中的作用[J]. 张雪敏. 科技风. 2018(22)
[2]基于JQuery多关键字组合无刷新分页技术的实现[J]. 孙仁鹏,刘富国. 软件工程. 2017(08)
[3]Web前端中MVVM框架的应用研究[J]. 莫文水. 网络安全技术与应用. 2017(04)
[4]Bootstrap在Web移动开发中的应用[J]. 余楷鑫. 电脑知识与技术. 2017(06)
[5]Web新兴前端框架与模式研究[J]. 占东明,洪家伟,陈希杨,徐礼飞,辛鄢放. 电子商务. 2016(10)
[6]基于Node.js平台的天线控制软件开发实例解析[J]. 贺祥. 广播电视信息. 2016(05)
[7]简谈AngularJS在下一代Web开发中的应用[J]. 董英茹. 软件工程师. 2015(05)
[8]Node.js:一种新的Web应用构建技术[J]. 王金龙,宋斌,丁锐. 现代电子技术. 2015(06)
[9]MVVM模式分析与应用[J]. 刘立. 微型电脑应用. 2012(12)
[10]试谈计算机软件中的插件技术[J]. 陈国栋. 电脑编程技巧与维护. 2010(16)
硕士论文
[1]基于React的前端广告组件库的设计与实现[D]. 裴春艳.山东大学 2018
[2]基于AngularJS的前端开发框架的设计与应用[D]. 王少丽.大连海事大学 2018
[3]基于Web的测试用例管理及生成系统[D]. 陈颖超.西安电子科技大学 2017
[4]基于jQuery的Web前端组件开发研究与应用[D]. 施人铜.东南大学 2015
本文编号：3432602
【文章来源】：西南科技大学四川省
【文章页数】：82 页
【学位级别】：硕士
【部分图文】：
图１－１?Ｖｕｃ组件树结构图??虽然国内有多款带有插件的前端框架，但是大多数框架是基于ＭＶＣ模式的，Ｍｏｄｅｌ??
将ＭＶＣ模式中Ｖｉｅｗ的行为和状态抽象化，从而让开发者将视图ＵＩ和业务逻辑分开，??同时使用ＶｉｅｗＭｏｄｅ丨实现数据的双向绑定。ＭＶＶＭ模式使用数据绑定基础结构，可以??快速、便捷的构建Ｕｌｔ３％它的技术模型如图２－１所示。??ＨＴＭＬ?Ｊ?ＨＴＭＬ?Ｌ?Ｖｉｅｗ??雖绑定１１行为处理１１视图腦｜?ＶｉｅｗＭｏｄｅｌ??１?ＪＳＯＮ?￣］?＾?数据?’?Ｍｏｄｅｌ???ｉｉ????１＇???｜?ＪＱＵＥＲＹＡＪＡ）Ｔ｜?Ｉ?通’讯?｜?Ｓｅｒｖｉｃｅ??服务??图２－１?ＭＶＶＭ模式技术模型图??在应用程序开发过程中，数据是程序的核心，代码的实现总是和数据结构紧密相??关。数据驱动可将复杂的程序代码逻辑转移到数据，从而降低逻辑复杂性。ＭＶＶＭ以??数据为中心，使视图处于从属地位，因此，在开发过程中，需将模板代码和数据界限划??分清楚，以降低Ｍｏｄｅｌ和Ｖｉｅｗ之间的稱合度。这样，在改变程序逻辑的时候，只需修??改数据，而不需要修改模板代码。相对于传统的程序逻辑解决问题，使用ＭＶＶＭ模式??具有以下优点：??（１）
进行初始化处理，初始化指令集接口函数为ｉｎｉｔＶｉｅｗＤｉｒｅｃｔｉｖｅｓ（ｅｌ），?ｅｌ表示视图ｖｉｅｗ，??最后就是进行遍历待编译的Ｅｌｅｍｅｎｔ的孩子节点，进行文本节点、注释节点以及元素节??点的处理。具体的编译流程如图２－２所示。??（开始）??Ｉ??创建Ｍｏｄｕｌｅ??Ｉ?￣￣??生成?ｖｉｒｔｕ?ａｌＤｏｍ??Ｌ?ｉ??组合??ｖｉｒｔｕａｌ?ＤｏｍｉｎｎｅｒＨＴＭＬ???Ｎ?＞｜?ｒＭｅｌｅｍｅｎｔ＾￣??处理属性值为表达式的指令??－?Ｉ??初始化指令集??＜ａＳ？＾＞?Ｎ??Ｙ?Ｙ??▼???ｉ???移除注释??／?ｎ?￣＾?ｉ?丄??——？麟?＾???????图２－２?ＶｉｒｔｕａｌＤＯＭ编译流程??１２??
【参考文献】：
期刊论文
[1]浅议MVC设计模式在JavaWeb中的作用[J]. 张雪敏. 科技风. 2018(22)
[2]基于JQuery多关键字组合无刷新分页技术的实现[J]. 孙仁鹏,刘富国. 软件工程. 2017(08)
[3]Web前端中MVVM框架的应用研究[J]. 莫文水. 网络安全技术与应用. 2017(04)
[4]Bootstrap在Web移动开发中的应用[J]. 余楷鑫. 电脑知识与技术. 2017(06)
[5]Web新兴前端框架与模式研究[J]. 占东明,洪家伟,陈希杨,徐礼飞,辛鄢放. 电子商务. 2016(10)
[6]基于Node.js平台的天线控制软件开发实例解析[J]. 贺祥. 广播电视信息. 2016(05)
[7]简谈AngularJS在下一代Web开发中的应用[J]. 董英茹. 软件工程师. 2015(05)
[8]Node.js:一种新的Web应用构建技术[J]. 王金龙,宋斌,丁锐. 现代电子技术. 2015(06)
[9]MVVM模式分析与应用[J]. 刘立. 微型电脑应用. 2012(12)
[10]试谈计算机软件中的插件技术[J]. 陈国栋. 电脑编程技巧与维护. 2010(16)
硕士论文
[1]基于React的前端广告组件库的设计与实现[D]. 裴春艳.山东大学 2018
[2]基于AngularJS的前端开发框架的设计与应用[D]. 王少丽.大连海事大学 2018
[3]基于Web的测试用例管理及生成系统[D]. 陈颖超.西安电子科技大学 2017
[4]基于jQuery的Web前端组件开发研究与应用[D]. 施人铜.东南大学 2015
本文编号：3432602
本文链接：https://www.wllwen.com/kejilunwen/ruanjiangongchenglunwen/3432602.html
