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

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

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

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

【部分圖文】：

圖２－２?ＡＪＡＸ過(guò)程圖??

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

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

【參考文獻(xiàn)】：
期刊論文
[1]基于虛擬DOM的Web前端性能優(yōu)化研究[J]. 戴志誠(chéng),程勁草.  計(jì)算機(jī)應(yīng)用與軟件. 2017(12)
[2]基于框架的web前端（Bootstrap和MUI）之比較[J]. 嚴(yán)春燕,戴仕明.  網(wǎng)絡(luò)安全技術(shù)與應(yīng)用. 2017(04)
[3]輕量級(jí)響應(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è)面加載方式研究分析與優(yōu)化[J]. 徐世武,嚴(yán)玉姣.  計(jì)算機(jī)應(yīng)用與軟件. 2015(11)
[9]淺談瀏覽器兼容統(tǒng)一性問(wèn)題與解決方案[J]. 王國(guó)慶.  電腦知識(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]. 喬淑夷.中國(guó)海洋大學(xué) 2014
[4]基于jQuery的Web前端框架MX的設(shè)計(jì)與實(shí)現(xiàn)[D]. 張迎亞.南京大學(xué) 2014
[5]企業(yè)網(wǎng)站的搜索引擎優(yōu)化研究[D]. 張光年.廈門大學(xué) 2007
[6]基于輕量級(jí)J2EE的Ajax Web框架的設(shè)計(jì)與實(shí)現(xiàn)[D]. 陳思淼.電子科技大學(xué) 2007



本文編號(hào)：3336242