【摘要】：近些年隨著互聯(lián)網(wǎng)尤其是移動(dòng)互聯(lián)網(wǎng)的不斷發(fā)展,Web應(yīng)用的需求和復(fù)雜度不斷增加,Web前端代碼體積越來(lái)越龐大。為解決前端開(kāi)發(fā)過(guò)程中出現(xiàn)的代碼可重用性不高、擴(kuò)展性差、維護(hù)管理困難、項(xiàng)目構(gòu)建低效等問(wèn)題,涌現(xiàn)出一批優(yōu)秀的前端框架。然而,在移動(dòng)網(wǎng)絡(luò)中,網(wǎng)絡(luò)環(huán)境相對(duì)較差,體積龐大的前端框架本身可能造成網(wǎng)絡(luò)瓶頸,而頻繁的DOM操作也使頁(yè)面刷新效率成為前端性能主要制約因素之一,Web應(yīng)用開(kāi)發(fā)對(duì)能解決以上問(wèn)題并合理縮減自身體積提高加載效率以適應(yīng)低速網(wǎng)絡(luò)環(huán)境的輕型前端框架的需求越來(lái)越迫切。本文采用MVVM架構(gòu),實(shí)現(xiàn)了以虛擬DOM為核心的輕型前端框架Luna。具體研究?jī)?nèi)容如下:首先,對(duì)該前端框架進(jìn)行業(yè)務(wù)需求分析,確定框架的總體架構(gòu),確定該框架MVVM主要功能模塊,并分別對(duì)Luna前端框架各模塊進(jìn)行了詳細(xì)的功能分析以及對(duì)該框架的性能優(yōu)化和框架代碼構(gòu)建需求進(jìn)行了詳細(xì)分析,確定了性能測(cè)試的相關(guān)指標(biāo)。其次,基于MVVM架構(gòu)對(duì)該前端框架進(jìn)行了設(shè)計(jì)與實(shí)現(xiàn)。前端框架Luna由種子模塊、模型數(shù)據(jù)模塊、視圖模塊和視圖模型模塊四個(gè)基本模塊組成,本文對(duì)各個(gè)模塊分別進(jìn)行了詳細(xì)設(shè)計(jì)和代碼實(shí)現(xiàn)。種子模塊提供了框架必要的環(huán)境準(zhǔn)備和通用功能函數(shù),并針對(duì)JavaScript語(yǔ)言特性做了必要補(bǔ)充,實(shí)現(xiàn)了組件化設(shè)計(jì)和前端路由等前端框架必要功能,并為該框架提供了入口。模型數(shù)據(jù)模塊以數(shù)據(jù)對(duì)象為核心,實(shí)現(xiàn)了前端數(shù)據(jù)的存儲(chǔ)、讀取、監(jiān)聽(tīng)、更新和與服務(wù)端交互等相關(guān)功能。視圖模塊以虛擬DOM為核心,通過(guò)JavaScript對(duì)象模擬DOM樹(shù)結(jié)構(gòu),并比較視圖改動(dòng)前后虛擬DOM差異來(lái)減少DOM操作,提高了頁(yè)面的渲染性能和加載效率。視圖模型模塊將模型數(shù)據(jù)和視圖模塊進(jìn)行自動(dòng)關(guān)聯(lián)和雙向綁定,使開(kāi)發(fā)者無(wú)需手動(dòng)維護(hù)視圖更新,實(shí)現(xiàn)了視圖與數(shù)據(jù)的解耦,使數(shù)據(jù)更改可以同時(shí)更新所有關(guān)聯(lián)的元素節(jié)點(diǎn)和組件。接著利用緩存機(jī)制減少HTTP請(qǐng)求次數(shù),并通過(guò)對(duì)框架代碼合理壓縮與合并,減少了框架文件的網(wǎng)絡(luò)負(fù)載,進(jìn)而提高了頁(yè)面的加載速度。最后,對(duì)本文實(shí)現(xiàn)的Luna前端框架各功能模塊的主要功能做詳細(xì)測(cè)試,通過(guò)構(gòu)建Web應(yīng)用和模擬移動(dòng)網(wǎng)絡(luò)環(huán)境測(cè)試其關(guān)鍵性能指標(biāo),并與業(yè)界流行的React和Angular框架進(jìn)行性能測(cè)試對(duì)比,同時(shí)對(duì)測(cè)試結(jié)果進(jìn)行分析。本文實(shí)現(xiàn)的前端框架Luna所采用的MVVM架構(gòu)有效地解決了前端代碼組織混亂、可維護(hù)性差等問(wèn)題,采用優(yōu)化的虛擬DOM技術(shù)提高了頁(yè)面加載和刷新效率,利用壓縮緩存技術(shù)縮減了代碼體積,并使用合理的構(gòu)建方式使提升了應(yīng)用開(kāi)發(fā)者的開(kāi)發(fā)效率。該框架有效地提高了在特殊網(wǎng)絡(luò)環(huán)境下的前端性能,基于該框架的Web應(yīng)用頁(yè)面加載速度在較差網(wǎng)絡(luò)環(huán)境中相比于主流前端框架得到了較大提高,為前端框架的設(shè)計(jì)與研發(fā)提出了新的解決方案。
【學(xué)位授予單位】：西安電子科技大學(xué)
【學(xué)位級(jí)別】：碩士
【學(xué)位授予年份】：2019
【分類號(hào)】：TP393.09
【圖文】：

頻繁地發(fā)送 HTTP 請(qǐng)求這些資源會(huì)嚴(yán)重影響頁(yè)面初始化速度，帶來(lái)較差的用戶體驗(yàn)。圖3.5 移動(dòng) Web 應(yīng)用頁(yè)面加載文件示例為了加快此類文件的加載，可以將相同文件類型的文件進(jìn)行合并，如將多個(gè)JavaScript 框架類庫(kù)的文件按照依賴關(guān)系合并為一個(gè)文件，將所需的圖標(biāo)文件默認(rèn)使用精靈圖合并為一個(gè)圖片文件，在移動(dòng)應(yīng)用中可以將所有圖標(biāo)放到一個(gè) SVG 文件中。此外，由于 JavaScript、CSS 等在瀏覽器解析過(guò)程中沒(méi)有格式要求，因此可以對(duì)文件進(jìn)行壓縮處理以節(jié)省網(wǎng)絡(luò)帶寬。JavaScript 壓縮指的是把 JavaScript 文件中所有與運(yùn)行無(wú)關(guān)的部分進(jìn)行剝離的過(guò)程，剝離的內(nèi)容包括注釋和不必要的空白符號(hào)，再使用將局部變量名縮短、將方括號(hào)表示法替換為點(diǎn)表示法、合并常量等方式進(jìn)行進(jìn)一步壓縮，最后使用 Gzip 對(duì)文件進(jìn)行壓縮處理。CSS 壓縮則更為簡(jiǎn)單

內(nèi)部使用 MVVM 模式構(gòu)建，包含 data 對(duì)象與模板字符串對(duì)應(yīng)的虛擬 DOM 樹(shù)，其內(nèi)部 MVVM 整體架構(gòu)如圖 4.3 所示。圖4.3 組件內(nèi)部 MVVM 架構(gòu)從圖 4.3 可以看出，每個(gè)包含數(shù)據(jù)的動(dòng)態(tài)組件只有一個(gè)數(shù)據(jù)對(duì)象，但由于數(shù)據(jù)屬性可以是 Object 類型，因此可能包含有多個(gè) watcherList。此外，每個(gè)模板指令和標(biāo)

經(jīng)過(guò) patch 操作后，圖 4.7 中所示的抽象語(yǔ)法樹(shù)示例將會(huì)被渲染成為圖 4.8 所示的 DOM 節(jié)點(diǎn)。圖4.8 由抽象語(yǔ)法樹(shù)渲染出的 DOM 節(jié)點(diǎn)示例從圖 4.8 可以看出，type 為 text 的虛擬節(jié)點(diǎn)會(huì)直接被渲染為 HTML 的 textNode，除此之外還會(huì)做一些其他處理，比如會(huì)將駝峰屬性名轉(zhuǎn)化成 HTML 支持的連字符形式的屬性名。View 視圖模塊與 ViewModel 視圖模型模塊及 Model 模型數(shù)據(jù)模塊的交互主要通過(guò) Template 動(dòng)態(tài)模板類的_watch 和_update 兩個(gè)方法建立聯(lián)系的，而對(duì)內(nèi)則調(diào)用了虛擬 DOM 更新視圖，因此 Template 動(dòng)態(tài)模板類起到了承上啟下的作用。4.2.3 虛擬 DOM 的設(shè)計(jì)實(shí)現(xiàn)通過(guò)Template動(dòng)態(tài)模板類可以實(shí)現(xiàn)視圖與數(shù)據(jù)之間的聯(lián)動(dòng)，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，

【相似文獻(xiàn)】

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

1 孫正峰;閔西英;李西順;;汽車全塑前端框架拓?fù)鋬?yōu)化研究[J];汽車零部件;2017年08期

2 孫玉紅;胡遠(yuǎn)航;齊賀;牟雪雷;;汽車前端框架力學(xué)性能分析及優(yōu)化設(shè)計(jì)[J];汽車零部件;2016年03期

3 李翠萍;孫玉紅;牟雪雷;胡遠(yuǎn)航;宋廣晶;吳亮發(fā);;汽車前端框架上梁拓?fù)鋬?yōu)化設(shè)計(jì)[J];汽車工程師;2015年09期

4 蔡章恒;牟雪雷;楊晶晶;;全塑前端框架有限元分析[J];汽車零部件;2016年12期

5 陳濤;;塑料前端框架與車身安裝方式的研究[J];內(nèi)燃機(jī)與配件;2019年20期

6 于淑云;;高�？膳渲镁W(wǎng)站集群前端框架設(shè)計(jì)[J];長(zhǎng)春工業(yè)大學(xué)學(xué)報(bào);2015年05期

7 宋劉洋;劉小杰;吳方武;王鎮(zhèn)斌;許鈺龍;;某SUV車型塑料前端框架的研究[J];汽車零部件;2019年05期

8 周銀萍;王跟成;;MiniUI前端框架研究[J];福建電腦;2015年07期

9 胡遠(yuǎn)航;孫玉紅;楊廣鋒;刁芳芳;周震;陳浩;;前端框架Moldflow分析及優(yōu)化[J];汽車零部件;2016年05期

10 嚴(yán)春燕;戴仕明;;基于框架的web前端(Bootstrap和MUI)之比較[J];網(wǎng)絡(luò)安全技術(shù)與應(yīng)用;2017年04期

相關(guān)會(huì)議論文 前3條

1 高翔;李波;周佳;李陽(yáng);高聰;;汽車前端框架以塑代鋼輕量化開(kāi)發(fā)[A];2019中國(guó)汽車工程學(xué)會(huì)年會(huì)論文集（2）[C];2019年

2 張雷;鄒素平;朱德霞;;鎂合金前端框架設(shè)計(jì)[A];2019中國(guó)汽車工程學(xué)會(huì)年會(huì)論文集（2）[C];2019年

3 孫正峰;李西順;;汽車全塑前端框架拓?fù)鋬?yōu)化研究[A];2017Altair技術(shù)大會(huì)論文集[C];2017年

相關(guān)重要報(bào)紙文章 前1條

1 胡小建;華中銅業(yè)5月份實(shí)現(xiàn)“五項(xiàng)突破”[N];中國(guó)有色金屬報(bào);2017年

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

1 顧睿;基于MVVM的虛擬DOM輕型Web前端框架的設(shè)計(jì)與實(shí)現(xiàn)[D];西安電子科技大學(xué);2019年

2 林偉強(qiáng);實(shí)時(shí)跨平臺(tái)桌面證券交易系統(tǒng)前端框架的設(shè)計(jì)與實(shí)現(xiàn)[D];深圳大學(xué);2018年

3 張佳佳;基于Web App服務(wù)平臺(tái)的移動(dòng)搜索的應(yīng)用研究[D];河北工業(yè)大學(xué);2016年

4 劉志飛;基于模型驅(qū)動(dòng)的前端框架MBB設(shè)計(jì)與實(shí)現(xiàn)[D];華中科技大學(xué);2018年

5 于晶晶;基于MVVM的前端框架MTCG的設(shè)計(jì)與實(shí)現(xiàn)[D];天津大學(xué);2017年

6 許珊;針對(duì)百度品牌專區(qū)業(yè)務(wù)的前端框架的設(shè)計(jì)與實(shí)現(xiàn)[D];南京大學(xué);2017年

7 胡智超;騰訊Q~+應(yīng)用商店前端框架設(shè)計(jì)與實(shí)現(xiàn)及性能優(yōu)化[D];哈爾濱工業(yè)大學(xué);2013年

8 王光輝;基于iOS平臺(tái)的客戶端框架設(shè)計(jì)與實(shí)現(xiàn)[D];中國(guó)地質(zhì)大學(xué)(北京);2016年

9 鄭杰;AngularJS前端框架與后端代碼自動(dòng)生成系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D];西南交通大學(xué);2016年

10 羅銳;基于AJAX的組件式WebGIS客戶端框架的研究與實(shí)現(xiàn)[D];華北電力大學(xué)（北京）;2008年

本文編號(hào)：2800692