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

【參考文獻(xiàn)】

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

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

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

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

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

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

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

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

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

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

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

本文編號：2243081