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

发布时间：2018-09-14 15:15

【摘要】：随着互联网Web2.0时代的到来，各种Web应用大量涌现，Web站点的前端产生了天翻地覆的变化，网页不再简单的显示基本的文字和图片，各种富媒体元素的使用使得网页的内容更加生动，网页的交互形式增强了Web应用的用户体验，Web前端技术在应用开发过程中也得到了越来越广泛的使用。 Web应用的普及使得用户对站点的期望越来越高，直接导致网站前端规模不断扩大，越来越多的前端脚本代码增加到应用系统中，前端开发出现了代码规模大、组织维护困难、代码重用性低、扩展性差等问题。建立合理的前端开发架构，并遵循开发标准和规范将越来越重要。本文借鉴MVC模式的后端架构方式，通过分析传统前端开发和维护过程所面临的问题，结合现在流行的前端设计模式，依托JavaScript、jQuery、DOM、Ajax、JSON等前端技术，采用理论和实践相结合的方式，编码实现了基于MVC模式的前端框架。本文构建的前端框架使得前端开发遵循模块式的开发方式，分离了不同类型的逻辑，减少依赖关系，实现了前端代码的解耦、复用，降低了应用扩展和维护的复杂度，具体研究过程如下：首先，按照分层架构的思想对前端框架各部分进行设计。前端框架由模型对象、集合对象、控制器对象、视图对象及异步请求对象五部分组成，对各个对象需要完成的功能进行了分析，然后对对象中涉及的属性和方法进行了设计。其次，对前端框架中对象的初始化及包含的方法进行编码实现，本框架中的一个创新点是在视图对象中实现了模板引擎，将JavaScript代码和HTML代码片段分离，通过模板引擎实现页面视图的渲染，使得代码易于维护，同时提高了页面渲染效率。另一创新点是在异步请求对象中优化了Ajax请求调度方式，提出请求优先级队列及基于等待时间延长优先级提升的策略，减少用户请求的等待时间，防止用户请求长时间无法得到响应。最后，将本文前端框架的模板引擎与目前流行的模板引擎的渲染效率进行测试对比，将采用Ajax异步请求调度策略的请求与普通Ajax请求的响应时间进行比较，，并在相同请求数的情况下比较本文前端框架与其他前端框架的请求响应完成时间，通过测试结果可以看出本文实现的前端框架在页面渲染效率及请求响应效率方面得到了较大的提高。然后通过前端框架在新闻管理系统中的应用描述了整个框架的流程及可行性。
[Abstract]:With the advent of the Internet Web2.0 era, a large number of Web applications have emerged in the front end of the web site has produced earth-shaking changes, web pages no longer simply display basic text and pictures. The use of a variety of rich media elements makes the content of web pages more vivid, The interactive form of web pages enhances the user experience of Web application and the technology of web front end is more and more widely used in the process of application development. The popularity of Web application makes users expect more and more sites. As a direct result of the continuous expansion of the front-end scale of the website, more and more front-end script code is added to the application system. The front-end development has many problems, such as large code scale, difficult organization and maintenance, low reusability of code, poor expansibility and so on. It will be more and more important to establish a reasonable front-end development architecture and follow development standards and specifications. This paper draws lessons from the back-end architecture of MVC mode, by analyzing the problems in the traditional front-end development and maintenance process, combining with the popular front-end design pattern, relying on the front-end technology such as JavaScript,jQuery,DOM,Ajax,JSON, and adopting the combination of theory and practice. The coding implements the front-end frame based on MVC mode. The front-end framework of this paper makes the front-end development follow the modular development mode, separates the different types of logic, reduces the dependency, realizes the decoupling and reuse of the front-end code, and reduces the complexity of application extension and maintenance. The specific research process is as follows: firstly, according to the idea of hierarchical architecture, each part of the front-end frame is designed. The front-end frame consists of five parts: model object, set object, controller object, view object and asynchronous request object. The functions of each object are analyzed, and the attributes and methods involved in the object are designed. Secondly, the initialization of the object in the front-end frame and the methods contained in the framework are coded. One of the innovations in this framework is the implementation of the template engine in the view object, which separates the JavaScript code from the HTML code fragment. The page view is rendered by template engine, which makes the code easy to maintain and improves the efficiency of page rendering. Another innovation is that the Ajax request scheduling mode is optimized in asynchronous request object, and the request priority queue and the strategy of increasing the priority based on waiting time are proposed to reduce the waiting time of user request. Prevent user requests from being answered for long periods of time. Finally, the rendering efficiency of the template engine of the front-end framework is compared with that of the current popular template engine, and the response time of the request using the Ajax asynchronous request scheduling strategy is compared with the response time of the ordinary Ajax request. In the case of the same number of requests, the completion time of the request response of the front-end framework is compared with that of the other front-end frameworks. The test results show that the efficiency of page rendering and request response has been greatly improved. Then the application of the front-end frame in the news management system describes the flow and feasibility of the whole framework.
【学位授予单位】：中国海洋大学
【学位级别】：硕士
【学位授予年份】：2014
【分类号】：TP393.09

【参考文献】