基于MVP的前端框架CASFront的设计与实现

发布时间：2018-03-30 05:44

本文选题：MVP　切入点：前端框架　出处：《天津大学》2016年硕士论文

【摘要】：随着互联网Web2.0时代的到来,富媒体元素的使用增加了用户在网页前端的交互式体验。前端开发出现了代码规模扩大、组织维护困难、代码重用性低、扩展性差等问题。建立合理的前端开发框架,并遵循开发标准和规则越来越重要。本文借鉴MVP的后端开发模式,依托JavaScript、JQuery、DOM、Ajax、HTML5、JSON等前端技术,采用理论和实践相结合的方式,编码实现了基于MVP模式的前端框架CASFront。本文构建的前端框架使得前端开发遵循模块式的开发方式,分离了不同类型的逻辑,减少依赖关系,实现前端代码的解耦、复用、降低了应用扩展和维护的复杂度,具体研究过程如下:首先,对传统前端开发过程和目前基于MVC的前端框架中存在的问题进行分析,通过MVP与MVC的对比,提出MVP在前端开发中的优越性。然后对MVP各层在设计实现中可能遇到的问题和页面性能优化策略进行分析。其次,按照分层架构的思想对前端框架CASFront各部分进行了设计和实现。前端框架由模型类、集合类、呈现器类、视图类四部分组成,对各个类需要完成的功能进行了分析和设计,并对类中涉及的属性和方法进行了编码实现。本框架中的创新点是:优化Ajax请求调度方式,提出请求优先级队列及基于等待时间延长优先级提升的策略,减少用户请求的等待时间,防止用户请求时间过长无法得到响应。最后,将本文前端框架CASFront、目前流行框架及采取页面优化策略改进后的CASFront框架进行测试比对。并将此前端框架应用于水文数值模拟系统,描述了整个框架的流程和可行性。通过框架测试可看出本文实现的前端框架CASFront在页面性能优化后页面加载数据速度得到了较大的提高。本文为前端框架的设计与开发提出了新的解决方案,实现了前端代码的解耦、复用、解决了目前前端开发中遇到的问题。
[Abstract]:With the advent of the Internet Web2.0 era, the use of rich media elements has increased the interactive experience of users at the front end of the web page. It is more and more important to establish a reasonable front-end development framework and follow the development standards and rules. This paper draws lessons from the back-end development model of MVP, relies on front-end technologies such as Java JQuery MVP / Ajax-Ajax-HTML5JSON, and adopts a combination of theory and practice. In this paper, the front-end framework is constructed to make the front-end development follow the modular development mode, separate different types of logic, reduce dependencies, realize the decoupling and reuse of front-end code. The complexity of application extension and maintenance is reduced. The specific research process is as follows: firstly, the problems existing in the traditional front-end development process and the current front-end framework based on MVC are analyzed, and the comparison between MVP and MVC is carried out. The advantages of MVP in front-end development are put forward. Then the problems that may be encountered in the design and implementation of MVP and the optimization strategy of page performance are analyzed. According to the idea of hierarchical architecture, every part of front-end frame CASFront is designed and implemented. The front-end frame is composed of model class, collection class, renderer class and view class. The functions of each class are analyzed and designed. The innovation of this framework is to optimize the Ajax request scheduling mode, propose the request priority queue and the strategy of increasing the priority based on the waiting time. Reduce the waiting time for a user request and prevent the user from getting a response if the request time is too long. Finally, In this paper, the front-end frame CASFront, the current popular framework and the improved CASFront framework after adopting the page optimization strategy are tested and compared, and the front-end frame is applied to the hydrological numerical simulation system. This paper describes the flow and feasibility of the whole framework. Through the framework test, we can see that the page loading data speed of the front-end frame CASFront realized in this paper has been greatly improved after the page performance optimization. Develop a new solution, The decoupling and reuse of the front-end code are realized, and the problems encountered in the front-end development are solved.
【学位授予单位】：天津大学
【学位级别】：硕士
【学位授予年份】：2016
【分类号】：TP311.52

【相似文献】