隨著計(jì)算機(jī)和信息技術(shù)的發(fā)展,越來越多的企業(yè)、學(xué)校會(huì)通過Web應(yīng)用程序的方式對信息進(jìn)行管理。傳統(tǒng)的開發(fā)過程中前端的工作只占很少的一部分,但隨著瀏覽器的進(jìn)步,用戶需求的增加,對前端的要求就越來越高。傳統(tǒng)的前端開發(fā)模式已經(jīng)無法適應(yīng)現(xiàn)在應(yīng)用的復(fù)雜性,使得開發(fā)出來的系統(tǒng)難以使用和難以維護(hù)。本文針對前端開發(fā)中所出現(xiàn)的問題,提出使用前端框架的方式來協(xié)助開發(fā)。本文所設(shè)計(jì)的前端框架包含UI框架和模板框架兩個(gè)部分,UI框架基于最新的前端技術(shù),對前端樣式、頁面布局、常用組件插件等進(jìn)行組合合與封裝,方便開發(fā)者構(gòu)建頁而使用。模板框架使用MVVM（Model-ViewModel-View）的設(shè)計(jì)思想,實(shí)現(xiàn)頁面表示層與數(shù)據(jù)層的解耦,幫助前端開發(fā)者構(gòu)建以數(shù)據(jù)驅(qū)動(dòng)的頁面。通過框架的使用使前端開發(fā)者能夠快速,高效地構(gòu)建出樣式美觀,功能齊全,兼容性良好的前端頁面。同時(shí),對當(dāng)今前后端開發(fā)者協(xié)作開發(fā)中出現(xiàn)的問題,通過框架使用前后端分離開發(fā)的方式提高開發(fā)效率,使得前端開發(fā)人員能夠?qū)Ｗ⒂陧撁娴恼故?后臺(tái)開發(fā)人員能夠?qū)Ｗ⒂跇I(yè)務(wù)邏輯的實(shí)現(xiàn)。框架完成之后交付于開發(fā)者使用,實(shí)踐表明本文設(shè)計(jì)并實(shí)現(xiàn)的前端框架能夠協(xié)助開發(fā)者更好地工作,為中小企... 

【文章來源】：北京郵電大學(xué)北京市 211工程院校 教育部直屬院校

【文章頁數(shù)】：73 頁

【學(xué)位級別】：碩士

【部分圖文】：

圖２－２?ＡＪＡＸ過程圖??

一個(gè)頁面的開發(fā)，框架就需要為開發(fā)人員提供常用的頁面結(jié)構(gòu)、頁面元素、常用??組件和插件，用戶直接使用框架中定義好的樣式，快速創(chuàng)建頁面［４Ｑ１。ＵＩ框架部??分整體架構(gòu)圖如圖３－１所示。??常用組件?￣￣ＪＳ插件￣??丨按鈕組丨丨提示信息ｊ?｜導(dǎo)骯卜丨－－１導(dǎo)航效巢｜??響?｜返回頂部?｜下拉菜單?｜面包屑?曰期插件??應(yīng)????－—?????式?按鈕組?分頁?表格—一表湖斿??？???．????計(jì)?頁面基礎(chǔ)元素?返回頂部??頁面框架布局?懸浮廣告????｜?柵格系統(tǒng)?｜丨圖片輪插丨??圖３－１?ＵＩ框架架構(gòu)圖??框架整體貫穿響應(yīng)式設(shè)計(jì)的思想，能夠讓創(chuàng)建出的頁面在各種尺寸的設(shè)備上??都能運(yùn)行良好。響應(yīng)式布局依賴于柵格系統(tǒng)［４＇通過流式布局來實(shí)現(xiàn)響應(yīng)式。??信息管理系統(tǒng)多是兩欄或者三欄的布局，以兩欄布局為例，頁面的左邊一欄??常作為頁面的二級導(dǎo)航，而右側(cè)一欄常作為頁面的主體部分，故框架將該種布局??作為開發(fā)人員布局系統(tǒng)頁面的基礎(chǔ)。具體需求如下：??（１）

一個(gè)頁面的開發(fā)，框架就需要為開發(fā)人員提供常用的頁面結(jié)構(gòu)、頁面元素、常用??組件和插件，用戶直接使用框架中定義好的樣式，快速創(chuàng)建頁面［４Ｑ１。ＵＩ框架部??分整體架構(gòu)圖如圖３－１所示。??常用組件?￣￣ＪＳ插件￣??丨按鈕組丨丨提示信息ｊ?｜導(dǎo)骯卜丨－－１導(dǎo)航效巢｜??響?｜返回頂部?｜下拉菜單?｜面包屑?曰期插件??應(yīng)????－—?????式?按鈕組?分頁?表格—一表湖斿??？???．????計(jì)?頁面基礎(chǔ)元素?返回頂部??頁面框架布局?懸浮廣告????｜?柵格系統(tǒng)?｜丨圖片輪插丨??圖３－１?ＵＩ框架架構(gòu)圖??框架整體貫穿響應(yīng)式設(shè)計(jì)的思想，能夠讓創(chuàng)建出的頁面在各種尺寸的設(shè)備上??都能運(yùn)行良好。響應(yīng)式布局依賴于柵格系統(tǒng)［４＇通過流式布局來實(shí)現(xiàn)響應(yīng)式。??信息管理系統(tǒng)多是兩欄或者三欄的布局，以兩欄布局為例，頁面的左邊一欄??常作為頁面的二級導(dǎo)航，而右側(cè)一欄常作為頁面的主體部分，故框架將該種布局??作為開發(fā)人員布局系統(tǒng)頁面的基礎(chǔ)。具體需求如下：??（１）

【參考文獻(xiàn)】：
期刊論文
[1]基于虛擬DOM的Web前端性能優(yōu)化研究[J]. 戴志誠,程勁草.  計(jì)算機(jī)應(yīng)用與軟件. 2017(12)
[2]基于框架的web前端（Bootstrap和MUI）之比較[J]. 嚴(yán)春燕,戴仕明.  網(wǎng)絡(luò)安全技術(shù)與應(yīng)用. 2017(04)
[3]輕量級響應(yīng)式框架Vue.js應(yīng)用分析[J]. 麥冬,陳濤,梁宗灣.  信息與電腦(理論版). 2017(07)
[4]基于MVVM模式的WEB前端框架的研究[J]. 易劍波.  信息與電腦(理論版). 2016(19)
[5]響應(yīng)式網(wǎng)站的設(shè)計(jì)與開發(fā)[J]. 劉金承.  科技傳播. 2016(18)
[6]基于Bootstrap響應(yīng)式Web前端研究[J]. 陳員義,李藝志.  福建電腦. 2015(12)
[7]基于瀑布流式布局的展示類網(wǎng)站界面設(shè)計(jì)研究[J]. 徐曄.  輕工科技. 2015(12)
[8]Web頁面加載方式研究分析與優(yōu)化[J]. 徐世武,嚴(yán)玉姣.  計(jì)算機(jī)應(yīng)用與軟件. 2015(11)
[9]淺談瀏覽器兼容統(tǒng)一性問題與解決方案[J]. 王國慶.  電腦知識(shí)與技術(shù). 2015(07)
[10]Web前端性能優(yōu)化方案與實(shí)踐[J]. 王成,李少元,鄭黎曉,緱錦,曾梅琴,劉慧敏.  計(jì)算機(jī)應(yīng)用與軟件. 2014(12)

碩士論文
[1]支持前后端分離的JavaScript開發(fā)框架的研究及在內(nèi)容管理系統(tǒng)中的應(yīng)用[D]. 路雯雯.山東大學(xué) 2017
[2]基于MVVM的Web前端響應(yīng)式框架的研究與集成[D]. 賈叢叢.云南大學(xué) 2016
[3]基于MVC模式的Web前端框架關(guān)鍵技術(shù)研究與實(shí)現(xiàn)[D]. 喬淑夷.中國海洋大學(xué) 2014
[4]基于jQuery的Web前端框架MX的設(shè)計(jì)與實(shí)現(xiàn)[D]. 張迎亞.南京大學(xué) 2014
[5]企業(yè)網(wǎng)站的搜索引擎優(yōu)化研究[D]. 張光年.廈門大學(xué) 2007
[6]基于輕量級J2EE的Ajax Web框架的設(shè)計(jì)與實(shí)現(xiàn)[D]. 陳思淼.電子科技大學(xué) 2007



本文編號：3336242