ajax 模型驱动传值,基于数据驱动模型的Web前端框架研究与实现

摘要：

本文针对前端框架中存在的代码重用性低,页面响应速度慢以及在开发轻量级Web应用性能上不足的问题,采用JavaScript,Ajax等传统前端发开技术和Html5,CSS3,Virtual Dom等新兴前端开发技术理论与实践相结合的方式,实现了基于数据驱动模型的Web前端框架.具体的研究内容如下:首先,对前端框架中MVC,MVP和MVVM三种数据驱动模型的应用,优缺点以及目前主流Web前端框架的结构和实现原理进行了深入的研究和分析;采用基于数据驱动模型的架构设计思想,对前端框架进行了需求分析,架构设计,类图设计以及视图层,模型层和视图模型层的详细设计.在此基础上,实现了一个基于数据驱动模型的高效Web前端开发框架.框架包括视图,模块,模型,模版,事件,表达式,指令,过滤器,请求,插件,路由,编译和渲染功能.框架实现了基于数据驱动的渲染模式,页面变化只需修改数据即可实现,极大地降低了开发成本,提升了开发效率,并且完成了三个方面的优化:一方面,通过提供给框架完整的模块化支持,页面以模块为单位进行组合,以模块化为基础,构建SPA应用,增加了模块的重用程度,从而提升了前端开发代码的可重用性;另一方面,研究和优化框架中的数据存储和提取方法,并提出数据模块化存储方案,在保证数据完整性的同时减少了与服务器的数据交互时间,有效地提升了页面响应速度,并进一步改善了用户体验;同时,通过采用差异性渲染的框架性能优化方案,减少了dom树的节点遍历,降低了时间复杂度,在框架的复杂度和性能优化之间取得平衡.最后,完成了基于数据驱动模型的Web前端框架的整体应用和全面测试.通过前端框架在WebApp中的应用,代码质量检测和自动化功能测试来描述整个框架的流程及易用性.同时,将实现的前端框架与当前主流的前端框架AngularJS和ReactJS进行了性能对比测试,可以看出,框架在渲染绘制效率,页面响应效率,内存占用效率以及资源加载效率方面得到了进一步的改进.证明了论文实现的基于数据驱动模型的Web前端框架具有更好的性能,适合开发逻辑简单的Web应用.

展开