【摘要】：隨著互聯(lián)網(wǎng)的快速發(fā)展,應(yīng)用的復(fù)雜程度越來(lái)越高,用戶體驗(yàn)也越來(lái)越重要。在Java Script發(fā)展初期其主要作用是實(shí)現(xiàn)簡(jiǎn)單的頁(yè)面交互邏輯,功能簡(jiǎn)單且代碼量極少。而如今CPU、瀏覽器性能得到了極大的提升,很多頁(yè)面邏輯遷移到了客戶端,隨著web2.0時(shí)代的到來(lái),Ajax技術(shù)得到廣泛應(yīng)用,各種前端框架層出不窮,前端代碼日益膨脹。這給開(kāi)發(fā)者帶來(lái)很大的學(xué)習(xí)負(fù)擔(dān)以及項(xiàng)目的代碼維護(hù)成本,如何解決開(kāi)發(fā)流程和業(yè)務(wù)邏輯嚴(yán)重耦合、業(yè)務(wù)代碼的框架版本遷移成為了一個(gè)十分嚴(yán)峻的問(wèn)題。論文以模型驅(qū)動(dòng)開(kāi)發(fā)和前端組件化為核心思想,運(yùn)用React、Redux、Webpack等技術(shù),根據(jù)業(yè)務(wù)邏輯和開(kāi)發(fā)經(jīng)驗(yàn)設(shè)計(jì)了能夠覆蓋大部分應(yīng)用場(chǎng)景的UIModel、Data Model、Show Model這三種模型,設(shè)計(jì)與實(shí)現(xiàn)了一個(gè)基于模型驅(qū)動(dòng)的前端框架。通過(guò)這個(gè)框架,業(yè)務(wù)開(kāi)發(fā)人員只需要關(guān)注模型本身的配置,其他的所有工作由MBB前端框架來(lái)完成。所有的新技術(shù)融合全在框架層進(jìn)行,專(zhuān)業(yè)的前端開(kāi)發(fā)人員也只需要關(guān)注框架本身的開(kāi)發(fā)。通過(guò)這種基于模型驅(qū)動(dòng)的前端框架,可以極大地加快開(kāi)發(fā)效率,減少開(kāi)發(fā)成本,并且可以做到項(xiàng)目在框架之間的平滑遷移。最后使用該框架和傳統(tǒng)的前端開(kāi)發(fā)方法開(kāi)發(fā)了一個(gè)通用的后臺(tái)管理系統(tǒng)并進(jìn)行仿真環(huán)境測(cè)試。MBB前端框架大幅度簡(jiǎn)化了開(kāi)發(fā)人員的工作流程和開(kāi)發(fā)難度,并將工作量大幅度削減,同時(shí)通過(guò)框架開(kāi)發(fā)出的應(yīng)用性能、可拓展性、可維護(hù)性、代碼健壯性都有卓越的提升。
【圖文】：

華 中 科 技 大 學(xué) 碩 士 學(xué) 位 論 文設(shè)計(jì)和開(kāi)發(fā)，然后內(nèi)外兩個(gè)部分的項(xiàng)目之間要緊密聯(lián)系，這樣就可以保證整個(gè)項(xiàng)目的進(jìn)度可控和整體宏觀的可控性[40,41]。圖 2-1 展示了一個(gè) MDD 項(xiàng)目中的任務(wù)流。有的任務(wù)可能在傳統(tǒng)項(xiàng)目中執(zhí)行。而有部分任務(wù)是為了具體項(xiàng)目構(gòu)建 MDD 工作時(shí)的附加任務(wù)。

圖 3-1 MBB 前端框架功能需求用例圖員專(zhuān)注維護(hù)框架的底層實(shí)現(xiàn)以及豐富功能與組件，輯后根據(jù)需求配置模型即可生成一套完整的應(yīng)用。端框架系統(tǒng)架構(gòu)架構(gòu)架整體采用 MVC 架構(gòu)模式，當(dāng)切換成 Vue.js 或BB 前端框架的 View 層這一部分會(huì)轉(zhuǎn)化為 MVV。其主要原因是考慮到Model層由UIModel、ShowM賴 React 進(jìn)行構(gòu)建的，，由于 React 的高效和快速的出色。View層具體的組件由基于各種適配React組發(fā)者繼續(xù)添加自定義組件或者組件庫(kù)。為了避免隨
【學(xué)位授予單位】：華中科技大學(xué)
【學(xué)位級(jí)別】：碩士
【學(xué)位授予年份】：2018
【分類(lèi)號(hào)】：TP311.52

【參考文獻(xiàn)】

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

1 王成;李少元;鄭黎曉;緱錦;曾梅琴;劉慧敏;;Web前端性能優(yōu)化方案與實(shí)踐[J];計(jì)算機(jī)應(yīng)用與軟件;2014年12期

2 王政;;Web前端開(kāi)發(fā)技術(shù)以及優(yōu)化研究[J];電腦知識(shí)與技術(shù);2013年22期

3 劉秀芹;;基于Web標(biāo)準(zhǔn)的企業(yè)網(wǎng)站網(wǎng)頁(yè)設(shè)計(jì)與實(shí)現(xiàn)[J];電腦知識(shí)與技術(shù);2013年09期

4 劉薇;龔海華;;HTML5&CSS3在網(wǎng)頁(yè)設(shè)計(jì)中的優(yōu)勢(shì)[J];金田(勵(lì)志);2012年12期

5 孔靚;賈美娟;;網(wǎng)頁(yè)制作中的CSS樣式表[J];科技創(chuàng)新與應(yīng)用;2012年24期

6 魏娜;;Web前端開(kāi)發(fā)技術(shù)研究[J];現(xiàn)代計(jì)算機(jī)(專(zhuān)業(yè)版);2011年29期

7 劉欣;;淺談ASP.NET下WEB設(shè)計(jì)提高加載速度[J];科技風(fēng);2011年12期

8 陳競(jìng)藝;;淺析Web2.0——未來(lái)的互聯(lián)網(wǎng)[J];科技資訊;2011年10期

9 鄭麗琴;;淺談網(wǎng)頁(yè)布局的設(shè)計(jì)[J];福建教育學(xué)院學(xué)報(bào);2009年02期

10 甘少娟;;Web2.0的本質(zhì)和應(yīng)用發(fā)展[J];廣東通信技術(shù);2008年08期

相關(guān)碩士學(xué)位論文 前2條

1 李新新;在線學(xué)習(xí)平臺(tái)的前端設(shè)計(jì)優(yōu)化與實(shí)現(xiàn)[D];南京大學(xué);2016年

2 張佳梁;面向定制化廣告的前端組件化框架設(shè)計(jì)與實(shí)現(xiàn)[D];南京大學(xué);2016年

本文編號(hào)：2683126