基于MVC模式的Web前端框架关键技术研究与实现

摘要

随着互联网Web2.0时代的到来,各种 Web应用大量涌现,Web站点的前端产生了天翻地覆的变化,网页不再简单的显示基本的文字和图片,各种富媒体元素的使用使得网页的内容更加生动,网页的交互形式增强了Web应用的用户体验,Web前端技术在应用开发过程中也得到了越来越广泛的使用。
　　Web应用的普及使得用户对站点的期望越来越高,直接导致网站前端规模不断扩大,越来越多的前端脚本代码增加到应用系统中,前端开发出现了代码规模大、组织维护困难、代码重用性低、扩展性差等问题。建立合理的前端开发架构,并遵循开发标准和规范将越来越重要。
　　本文借鉴MVC模式的后端架构方式,通过分析传统前端开发和维护过程所面临的问题,结合现在流行的前端设计模式,依托JavaScript、jQuery、DOM、Ajax、JSON等前端技术,采用理论和实践相结合的方式,编码实现了基于 MVC模式的前端框架。本文构建的前端框架使得前端开发遵循模块式的开发方式,分离了不同类型的逻辑,减少依赖关系,实现了前端代码的解耦、复用,降低了应用扩展和维护的复杂度,具体研究过程如下:
　　首先,按照分层架构的思想对前端框架各部分进行设计。前端框架由模型对象、集合对象、控制器对象、视图对象及异步请求对象五部分组成,对各个对象需要完成的功能进行了分析,然后对对象中涉及的属性和方法进行了设计。
　　其次,对前端框架中对象的初始化及包含的方法进行编码实现,本框架中的一个创新点是在视图对象中实现了模板引擎,将JavaScript代码和HTML代码片段分离,通过模板引擎实现页面视图的渲染,使得代码易于维护,同时提高了页面渲染效率。另一创新点是在异步请求对象中优化了 Ajax请求调度方式,提出请求优先级队列及基于等待时间延长优先级提升的策略,减少用户请求的等待时间,防止用户请求长时间无法得到响应。
　　最后,将本文前端框架的模板引擎与目前流行的模板引擎的渲染效率进行测试对比,将采用Ajax异步请求调度策略的请求与普通Ajax请求的响应时间进行比较,并在相同请求数的情况下比较本文前端框架与其他前端框架的请求响应完成时间,通过测试结果可以看出本文实现的前端框架在页面渲染效率及请求响应效率方面得到了较大的提高。然后通过前端框架在新闻管理系统中的应用描述了整个框架的流程及可行性。

目录

封面

声明

中文摘要

英文摘要

目录

1 绪论

1.1 研究背景与意义

1.2 国内外发展现状

1.3 研究内容与思路

1.4 论文的组织结构

2 Web 前端框架关键技术介绍

2.1 模块化设计思想

2.2 MVC 设计模式

2.3 REST 架构

2.4 Web 前端相关技术

2.5 本章小结

3 基于 MVC 模式的前端框架设计

3.1 前端 MVC 框架 Frontbase 设计

3.2 前端 MVC 框架 Frontbase 对象

3.3 前端 MVC 框架 Frontbase 工作流程

3.4 本章小结

4 基于 MVC 模式的前端框架实现

4.1 模型层的实现

4.2 视图层的实现

4.3 控制器的实现

4.4 服务器同步的实现

4.5 本章小结

5 前端框架性能测试及在新闻管理系统中的应用

5.1 框架性能测试

5.2 新闻管理模块前端设计

5.3 新闻管理模块前端实现

5.4 本章小结

6 总结与展望

6.1 工作总结

6.2 研究展望

参考文献

致谢

个人简历、在学期间发表的学术论文与研究成果