基于Web Components的跨终端商城系统的设计与实现

发布时间：2022-01-03 14:40

　　商城系统是应用最广泛的Web系统,在目前多终端设备并存的条件下,支持多终端运行已经成为商城系统的一个必备功能。传统跨终端的实现主要采用独立站点的方案,即为每一套设备定制单独的Web界面,不仅增加了开发过程的工作量,而且每一次的变更都需要同时对多个独立站点进行变更,不利于后期的维护与应用的拓展。新的跨终端Web设计是通过一套系统支持多种终端设备的浏览访问。首先,需要考虑页面之间的复用性问题,基于Web Components思想的组件化页面设计是一条可行的途径;其次,跨终端设计需要通过多屏自适应,完成页面的布局自适应和高清适配;最后,还需要考虑手机等移动设备自身硬件性能的限制,对Web进行性能的优化。本文首先根据商城系统的功能需求和跨终端需求,对商城系统进行了总体的方案设计。其中,功能需求围绕商城系统设计了业务流程,跨终端需求围绕Web组件化、多屏自适应、性能优化三个方面进行了设计实现。在性能优化方面,基于虚拟DOM思想和H5的Web Worker功能,提出了新的虚拟DOM树更新算法,设计了高效的页面更新机制来加快页面的响应。最后,从商城系统功能和网站性能两方面对系统进行了测试和性能分析。... 

【文章来源】：北京邮电大学北京市 211工程院校 教育部直属院校

【文章页数】：90 页

【学位级别】：硕士

【部分图文】：

图２－１?Ｗｅｂ组件化示意图??

电脑的宽度像素则一般会大于ｌ〇２４ｐｘｌ１６］，同一个网页要能在这些设备上正??常显示就需要实现布局的自适应，为此我们需要以设备屏幕的大小将屏幕划分为??三类，在三类设备上分别实现三种不同的布局，如下图２－２所示。??＞?ｌ〇２４ｐｘ??ｊ?！薩變七雜?丨??＿：：：．：：〇?一?．?．?—?．＿?＿?．??！■丨丨Ｍｓｍ?■■■Ｉ????？＿＿＿?￡＿＿＿＿？??图２－２布局自适应图??（２）手机高清适配??布局自适应主要以屏幕的像素大小将设备分为了三类，但即使是处于同一分??类的设备，它们的屏幕大小以及分辨率也还是有差异，现在手机设备多种多样，??对于各大厂商生产的手机，手机屏幕的大小以及清晰度都有明显的差异，例如一??些小屏幕的手机设备宽度只有３２０ｐｘ，但是对于新版的Ｉｐｈｏｎｅ手机它的设备宽度??达到了?４１４ＰＸ［１＇因此对于同种分类的设备间的差异也是需要考虑的，当前这个??问题主要在手机端比较突出。因为在ＰＣ端，电脑屏幕一般是足够显示网站内容??的，例如１２８０ｐｘ和１４４０ｐｘ的电脑屏幕，我们的网站完全可以只以１２８０ｐｘ为标??准来设计

而我们的页面是基于数据驱动的，页面的数据就是由最外层的父组件层层的传递??会合下一层的子组件，因此父子组件之间会存在相互的数据传递，父子组件间的数??据交互模型如图３－３所示，父组件通过子组件提供的ｐｒｏｐｓ接口将数据传递给子??组件，而在子组件上触发的事件则会传递给上层的父组件进行处理。??（３）组件渲染树??１４??

【参考文献】：
期刊论文
[1]基于Web components标准的前端工程组件化的改进研究[J]. 黄江宁.  电子技术与软件工程. 2016(22)
[2]基于HTML5的Web App的开发与探索[J]. 章斓.  长沙大学学报. 2015(05)
[3]基于HTML5的响应式Web页面重组适配技术研究[J]. 蒋凌燕,查英华.  计算机与现代化. 2015(02)

硕士论文
[1]Web前端工程组件化的分析与改进[D]. 戴翔宇.吉林大学 2016
[2]基于Web的富客户端跨平台移动应用开发技术研究[D]. 吕昕.云南大学 2015
[3]移动图片社交Web前端性能优化及应用[D]. 郑宇航.北京邮电大学 2015
[4]PC端Web应用到手机端Web App转换的研究与实现[D]. 李玥.北京邮电大学 2015
[5]基于Web前端的性能优化方案研究[D]. 刘柳.华中科技大学 2015
[6]移动Web前端性能与图片优化的研究[D]. 朱聚豹.华中师范大学 2013
[7]基于HTML5的跨终端Web生成系统的设计与实现[D]. 梁仲智.中山大学 2013
[8]WEB页面的移动终端适配技术研究[D]. 陈栋.北京邮电大学 2012



本文编号：3566449