商城系統(tǒng)是應(yīng)用最廣泛的Web系統(tǒng),在目前多終端設(shè)備并存的條件下,支持多終端運(yùn)行已經(jīng)成為商城系統(tǒng)的一個(gè)必備功能。傳統(tǒng)跨終端的實(shí)現(xiàn)主要采用獨(dú)立站點(diǎn)的方案,即為每一套設(shè)備定制單獨(dú)的Web界面,不僅增加了開發(fā)過程的工作量,而且每一次的變更都需要同時(shí)對多個(gè)獨(dú)立站點(diǎn)進(jìn)行變更,不利于后期的維護(hù)與應(yīng)用的拓展。新的跨終端Web設(shè)計(jì)是通過一套系統(tǒng)支持多種終端設(shè)備的瀏覽訪問。首先,需要考慮頁面之間的復(fù)用性問題,基于Web Components思想的組件化頁面設(shè)計(jì)是一條可行的途徑;其次,跨終端設(shè)計(jì)需要通過多屏自適應(yīng),完成頁面的布局自適應(yīng)和高清適配;最后,還需要考慮手機(jī)等移動設(shè)備自身硬件性能的限制,對Web進(jìn)行性能的優(yōu)化。本文首先根據(jù)商城系統(tǒng)的功能需求和跨終端需求,對商城系統(tǒng)進(jìn)行了總體的方案設(shè)計(jì)。其中,功能需求圍繞商城系統(tǒng)設(shè)計(jì)了業(yè)務(wù)流程,跨終端需求圍繞Web組件化、多屏自適應(yīng)、性能優(yōu)化三個(gè)方面進(jìn)行了設(shè)計(jì)實(shí)現(xiàn)。在性能優(yōu)化方面,基于虛擬DOM思想和H5的Web Worker功能,提出了新的虛擬DOM樹更新算法,設(shè)計(jì)了高效的頁面更新機(jī)制來加快頁面的響應(yīng)。最后,從商城系統(tǒng)功能和網(wǎng)站性能兩方面對系統(tǒng)進(jìn)行了測試和性能分析。... 

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

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

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

【部分圖文】：

圖２－１?Ｗｅｂ組件化示意圖??

電腦的寬度像素則一般會大于ｌ〇２４ｐｘｌ１６］，同一個(gè)網(wǎng)頁要能在這些設(shè)備上正??常顯示就需要實(shí)現(xiàn)布局的自適應(yīng)，為此我們需要以設(shè)備屏幕的大小將屏幕劃分為??三類，在三類設(shè)備上分別實(shí)現(xiàn)三種不同的布局，如下圖２－２所示。??＞?ｌ〇２４ｐｘ??ｊ?！薩變七雜?丨??＿：：：．：：〇?一?．?．?—?．＿?＿?．??！■丨丨Ｍｓｍ?■■■Ｉ????？＿＿＿?￡＿＿＿＿？??圖２－２布局自適應(yīng)圖??（２）手機(jī)高清適配??布局自適應(yīng)主要以屏幕的像素大小將設(shè)備分為了三類，但即使是處于同一分??類的設(shè)備，它們的屏幕大小以及分辨率也還是有差異，現(xiàn)在手機(jī)設(shè)備多種多樣，??對于各大廠商生產(chǎn)的手機(jī)，手機(jī)屏幕的大小以及清晰度都有明顯的差異，例如一??些小屏幕的手機(jī)設(shè)備寬度只有３２０ｐｘ，但是對于新版的Ｉｐｈｏｎｅ手機(jī)它的設(shè)備寬度??達(dá)到了?４１４ＰＸ［１＇因此對于同種分類的設(shè)備間的差異也是需要考慮的，當(dāng)前這個(gè)??問題主要在手機(jī)端比較突出。因?yàn)樵冢校枚�，電腦屏幕一般是足夠顯示網(wǎng)站內(nèi)容??的，例如１２８０ｐｘ和１４４０ｐｘ的電腦屏幕，我們的網(wǎng)站完全可以只以１２８０ｐｘ為標(biāo)??準(zhǔn)來設(shè)計(jì)

而我們的頁面是基于數(shù)據(jù)驅(qū)動的，頁面的數(shù)據(jù)就是由最外層的父組件層層的傳遞??會合下一層的子組件，因此父子組件之間會存在相互的數(shù)據(jù)傳遞，父子組件間的數(shù)??據(jù)交互模型如圖３－３所示，父組件通過子組件提供的ｐｒｏｐｓ接口將數(shù)據(jù)傳遞給子??組件，而在子組件上觸發(fā)的事件則會傳遞給上層的父組件進(jìn)行處理。??（３）組件渲染樹??１４??

【參考文獻(xiàn)】：
期刊論文
[1]基于Web components標(biāo)準(zhǔn)的前端工程組件化的改進(jìn)研究[J]. 黃江寧.  電子技術(shù)與軟件工程. 2016(22)
[2]基于HTML5的Web App的開發(fā)與探索[J]. 章斕.  長沙大學(xué)學(xué)報(bào). 2015(05)
[3]基于HTML5的響應(yīng)式Web頁面重組適配技術(shù)研究[J]. 蔣凌燕,查英華.  計(jì)算機(jī)與現(xiàn)代化. 2015(02)

碩士論文
[1]Web前端工程組件化的分析與改進(jìn)[D]. 戴翔宇.吉林大學(xué) 2016
[2]基于Web的富客戶端跨平臺移動應(yīng)用開發(fā)技術(shù)研究[D]. 呂昕.云南大學(xué) 2015
[3]移動圖片社交Web前端性能優(yōu)化及應(yīng)用[D]. 鄭宇航.北京郵電大學(xué) 2015
[4]PC端Web應(yīng)用到手機(jī)端Web App轉(zhuǎn)換的研究與實(shí)現(xiàn)[D]. 李玥.北京郵電大學(xué) 2015
[5]基于Web前端的性能優(yōu)化方案研究[D]. 劉柳.華中科技大學(xué) 2015
[6]移動Web前端性能與圖片優(yōu)化的研究[D]. 朱聚豹.華中師范大學(xué) 2013
[7]基于HTML5的跨終端Web生成系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D]. 梁仲智.中山大學(xué) 2013
[8]WEB頁面的移動終端適配技術(shù)研究[D]. 陳棟.北京郵電大學(xué) 2012



本文編號：3566449