【摘要】：隨著互聯(lián)網(wǎng)Web2.0時(shí)代的到來(lái)，各種Web應(yīng)用大量涌現(xiàn)，Web站點(diǎn)的前端產(chǎn)生了天翻地覆的變化，網(wǎng)頁(yè)不再簡(jiǎn)單的顯示基本的文字和圖片，各種富媒體元素的使用使得網(wǎng)頁(yè)的內(nèi)容更加生動(dòng)，網(wǎng)頁(yè)的交互形式增強(qiáng)了Web應(yīng)用的用戶體驗(yàn)，Web前端技術(shù)在應(yīng)用開(kāi)發(fā)過(guò)程中也得到了越來(lái)越廣泛的使用。 Web應(yīng)用的普及使得用戶對(duì)站點(diǎn)的期望越來(lái)越高，直接導(dǎo)致網(wǎng)站前端規(guī)模不斷擴(kuò)大，越來(lái)越多的前端腳本代碼增加到應(yīng)用系統(tǒng)中，前端開(kāi)發(fā)出現(xiàn)了代碼規(guī)模大、組織維護(hù)困難、代碼重用性低、擴(kuò)展性差等問(wèn)題。建立合理的前端開(kāi)發(fā)架構(gòu)，并遵循開(kāi)發(fā)標(biāo)準(zhǔn)和規(guī)范將越來(lái)越重要。 本文借鑒MVC模式的后端架構(gòu)方式，通過(guò)分析傳統(tǒng)前端開(kāi)發(fā)和維護(hù)過(guò)程所面臨的問(wèn)題，結(jié)合現(xiàn)在流行的前端設(shè)計(jì)模式，依托JavaScript、jQuery、DOM、Ajax、JSON等前端技術(shù)，采用理論和實(shí)踐相結(jié)合的方式，編碼實(shí)現(xiàn)了基于MVC模式的前端框架。本文構(gòu)建的前端框架使得前端開(kāi)發(fā)遵循模塊式的開(kāi)發(fā)方式，分離了不同類型的邏輯，減少依賴關(guān)系，實(shí)現(xiàn)了前端代碼的解耦、復(fù)用，降低了應(yīng)用擴(kuò)展和維護(hù)的復(fù)雜度，具體研究過(guò)程如下： 首先，按照分層架構(gòu)的思想對(duì)前端框架各部分進(jìn)行設(shè)計(jì)。前端框架由模型對(duì)象、集合對(duì)象、控制器對(duì)象、視圖對(duì)象及異步請(qǐng)求對(duì)象五部分組成，對(duì)各個(gè)對(duì)象需要完成的功能進(jìn)行了分析，然后對(duì)對(duì)象中涉及的屬性和方法進(jìn)行了設(shè)計(jì)。 其次，對(duì)前端框架中對(duì)象的初始化及包含的方法進(jìn)行編碼實(shí)現(xiàn)，本框架中的一個(gè)創(chuàng)新點(diǎn)是在視圖對(duì)象中實(shí)現(xiàn)了模板引擎，將JavaScript代碼和HTML代碼片段分離，通過(guò)模板引擎實(shí)現(xiàn)頁(yè)面視圖的渲染，使得代碼易于維護(hù)，同時(shí)提高了頁(yè)面渲染效率。另一創(chuàng)新點(diǎn)是在異步請(qǐng)求對(duì)象中優(yōu)化了Ajax請(qǐng)求調(diào)度方式，提出請(qǐng)求優(yōu)先級(jí)隊(duì)列及基于等待時(shí)間延長(zhǎng)優(yōu)先級(jí)提升的策略，減少用戶請(qǐng)求的等待時(shí)間，防止用戶請(qǐng)求長(zhǎng)時(shí)間無(wú)法得到響應(yīng)。 最后，將本文前端框架的模板引擎與目前流行的模板引擎的渲染效率進(jìn)行測(cè)試對(duì)比，將采用Ajax異步請(qǐng)求調(diào)度策略的請(qǐng)求與普通Ajax請(qǐng)求的響應(yīng)時(shí)間進(jìn)行比較，，并在相同請(qǐng)求數(shù)的情況下比較本文前端框架與其他前端框架的請(qǐng)求響應(yīng)完成時(shí)間，通過(guò)測(cè)試結(jié)果可以看出本文實(shí)現(xiàn)的前端框架在頁(yè)面渲染效率及請(qǐng)求響應(yīng)效率方面得到了較大的提高。然后通過(guò)前端框架在新聞管理系統(tǒng)中的應(yīng)用描述了整個(gè)框架的流程及可行性。
[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.
【學(xué)位授予單位】：中國(guó)海洋大學(xué)
【學(xué)位級(jí)別】：碩士
【學(xué)位授予年份】：2014
【分類號(hào)】：TP393.09

【參考文獻(xiàn)】

相關(guān)期刊論文 前10條

1 Dino Esposito;羅小平;;小議JavaScript庫(kù)——Dojo、jQuery和PrototypeJS的比較[J];程序員;2008年08期

2 王保平;;對(duì)JavaScript框架的再思考[J];程序員;2008年11期

3 芮素娟;丁曉明;;Web應(yīng)用性能測(cè)試進(jìn)展[J];計(jì)算機(jī)科學(xué);2006年08期

4 黎永良,崔杜武;MVC設(shè)計(jì)模式的改進(jìn)與應(yīng)用[J];計(jì)算機(jī)工程;2005年09期

5 李周志;王曉東;王真之;馮志敏;周宇;;基于多優(yōu)先級(jí)緩存隊(duì)列的遠(yuǎn)程數(shù)據(jù)傳輸技術(shù)[J];計(jì)算機(jī)工程;2010年18期

6 毛峰;劉婷;劉仁義;劉南;張豐;;基于REST面向資源的地理信息服務(wù)設(shè)計(jì)[J];計(jì)算機(jī)工程;2011年08期

7 呂林濤;萬(wàn)經(jīng)華;周紅芳;;基于AJAX的Web無(wú)刷新頁(yè)面快速更新數(shù)據(jù)方法[J];計(jì)算機(jī)應(yīng)用研究;2006年11期

8 浦云明;范明紅;許明娜;;Web應(yīng)用系統(tǒng)負(fù)載測(cè)試[J];計(jì)算機(jī)應(yīng)用與軟件;2009年11期

9 周玲余;;基于jQuery框架的頁(yè)面前端特效的設(shè)計(jì)與實(shí)現(xiàn)[J];計(jì)算機(jī)與現(xiàn)代化;2013年01期

10 劉秀芹;;基于STRUTS的EXT技術(shù)應(yīng)用研究[J];軟件導(dǎo)刊;2009年07期

本文編號(hào)：2243081