【弹性布局在web前端开发中的应用问题探究9600字（论文）】

弹性布局在web前端开发中的应用问题研究摘要：近几年随着互联网技术的告诉发展，现在教育结合互联网技术进行融合，利用虚拟的网络空间将教学的一些实验进行模拟教学系统，新的教学时代也孕育而出，使学生动手力不足的情况得到解决。因为实验教学分很多种，所以每个实验教学都要有独立的中心网站来对实验教学的信息进行展示和实时更新，移动互联网技术在现代已经相当的普及了，对中心门户网站的需求和要求也就越来越多，需要越来越全面，中心网站也就必须对终端进行不断的开发和更新。网页的制作业务有很多种，我们对这些业务进行了解和分析，发现在自适应的动态网页制作在制作中工序繁多，重复性多，整个过程下来相当复杂，作为网页的开发工作者，他们的工作量不但多而且重复性工作和重复性编码多，导致制作出来的网页效果质量不佳等问题。对目前社会对自适应动态网页的需求越来越多，越来越大，所以就需要一些构建工具来解决自适应动态网页的需求，本文就是希望通过研究开发一个多终端的动态网站构建工具对这个问题进行解决。前期开发肯定需要相当多的理论数据和实践数据来给予支撑才能完成构建工具，我们结合网页构建工具目前的情况和自适应网页技术的融合过程中出现的问题进行研究分析，目前我们使用功能分析方式对系统的功能模块进行区分划分，并利用理论经验和系统进行结合，从而使网页构建工具的研发工作完成。此次开发的网页构建工具加入了弹性盒子和调用接口等先进技术功能都在属性编辑器中进行优化，用户对网页多终端的操作和动态信息的了解及展示越来越直观可视化，这次构建工具的开发对传统模式的网页使用流程进行了优化，在自适应动态网页制作和开发上效率大大的提高。关键词：网页构建工具动态网页多终端适配弹性盒子模型目录TOC\o"1-3"\h\u摘要： 绪论1.1研究背景及意义移动终端在如今科技信息发展迅速中，其优势快捷方便，让人们很快的就接受和接纳，成为人们生活和生产中的一部分，由于信息化的告诉发展，对信息技术的需求和不断学习创新模式都跟着不断变化，使越来越多的智能移动技术和移动设备得以普及和快速的发展。在智能移动技能的快速发展下对相关技术的学习也是各学术界和商业界比较关注的热点，之前的学习都是在个人计算机端口进行学习，为了更好的更方便的学习相关技术，就需要从传统的个人计算机端口移动到可移动设备端口，进而使老师和学生在需要学习相关信息或者进行浏览的时候就有多种的终端可以来完成。最刚开始的门户网站开发的效率非常的低，首先需要专业的网页开发工作人员对静态和动态两个模板页面的研发，然后将研发的页面上传到服务器后再有专门的网页管理人员对网页的内容进行完善填充，使网页内容丰富，过程是相当的复杂。网站的网页内容和风格设定需要工作人员不断的进行编写代码来实现网页结构的完成，在终端网页中也需要开发人员不断的对样式进行调整，大量的重复而繁杂的工作和过程会使这些工作人员身心疲惫，专业人员的技能也有不同，都有自己的性格喜好和风格，编码也就会有不同，呈现出阿里的网页效果也就有好有坏，对网页的后期问题处理和维护不便。综上所述，研发出多终端动态网站的构建工具是相当重要的也是相当必要的，通过这项技术可以使传统的网页开发过程进行优化，越来越简单的操作将重复而繁重的编写代码过程进行优化，这样就可以使制作出来的网页效果佳，就算是技能经验不佳的开发人员也可以操作作出不错的网页，是开发工作人员的工作量降低，开发的效率得以提升。1.2国内外研究现状1.2.1国内研究现状刚开始研发的多终端动态网站的构建工具的用意就是最有效便捷的能将此项技术应用于动态网站中，但是动态网站的终端设备的产品种类是相当杂乱，屏幕的大小不一样，分辨率大小也不一样，使在很多移动设备在浏览网页查询资料信息的时候就会出现乱码，网页家长不出来过慢，所需要的信息也不符合等问题。我们对屏幕分辨率不同在终端上无法正常的显示这一问题进行了解，解决的方法最开始是两种：一是使用缩略图将视图进行缩大放小，用户通过操作放大或者缩小的操作可以对网页进行浏览和访问，这样就相当的麻烦这种方法后续也进行过改良但是效果不是很好。第二种就是根据电脑屏幕的分辨率来对网站进行调整，调整网站的版本来达到分辨率的要求，这样就会出现新的问题就是要多多个网站进行维护，在多个网站不断的维护中无形的加大了维护的成本。这两种方法都是治标不治本，且不太适用，用户的需求也越来越多，国内对此问题也进行了研究开发，也就出现了各种各样的在线可视化构建工具，对这些问题可以做到有效的解决也能对网页进行快速的自适应，达到用户对浏览网页的需求更加方便。1.2.2自适应网页设计的发展及现状自适应网页的概念在2010年提出，就是要求利用终端设备来对网页进行客自动识别屏幕分辨率的技术，并可以对页面设计进行相应的调整，还可以根据分辨率来改变图片和网页文件的布局，展示的方式也可以进行适配展示，除了这个基本的功能，还要对自适应网页其它技术进行开发，主要的是布局的流动性，图片的灵活性以及各种信息的查询功能。为用户提供舒适的视觉上网感受是自适应网页的宗旨，网站的可用性和可访问性的要求高，企业要对对外宣传和让更多的人了解熟知，就需要利用网站来达到，国外的大部分中小企业都拥有自己的移动优化网站，可供用户浏览和访问，更好的让用户了解该企业。目前国内网页自适应技术的实现主要是靠流动布局技术、媒体信息查询技术和弹性盒子等模型技术进行，我们对折几个技术进行说明：流动布局是基于固定的布局无法解决的问题或者缺陷来进行优化的，我们所说的固定的布局就是局限性大就相当于在一个固定的容器内，容器的大小没没做调整导致其它的元素尺寸的大小和未知也是没法做调整的，优势是这种布局都是按部就班很容易达到，两者之间的冲突也小，劣势就是当出现分辨率的需求时就会出现页面的显示过大过小，不完整或者出现很多白空间等诸多问题，页面不断滚动垂直，这种情况对用户浏览网页的时候就相当的不便，网页的整体平衡也没有，更谈不上美观，带给用户的上网感受极差。流动布局与固定布局的差异在于，流动布局是以百分比来作为长度单位，这样就可以是网页可以根据屏幕的大小分辨率的大小和空间来进行自适应调配。在以百分比来作为宽度还可以使网页的位置也会根据显示屏的大小可以自行变化，例如当改页面元素位置在一行内放不下的时候就会自动的转到下一行，不会在同以页面挤压，流动布局中的页面元素不会使页面的整体布局发生改变，会自行的根据屏幕大小分辨率而进行缩放。媒体查询模块(MediaQuerise)是CSS3的一项关键技术，这项技术也是核心技术，它是自适应网页解决同一页面中可以提供多视窗的主要技术，可以提供用户根据设备的性能自己做选择。媒体查询功能是使用户可以增加媒体查询的一种表达方式，是指将属性为样式媒体的类型限定在不一样的媒体类型基础上，通过选择核实的页面布局来达到不同终端设备对屏幕尺寸不同的适应，在不改变网页的内容下对网页样式的一种调整和修整，就可以达到改良用户的上网体验感。可以让网页开发工作者在自适应网页的设计中，只需要使用几行代码就可以对屏幕的宽度、比例、设备的特性作出判断，网页开发者就可以快速的作出对应的代码编程，但是终端设备的不同，自适应的需求也会众多，所以一般最少编写三套样式，才能保证稳定性，这样也就有重复性和浪费人员的时间。弹性盒子模型是能够将网页的布局更加的灵活和自适应调整的一种新的盒子模型。盒子模型是CSS的核心，它的属性从里到外包括：内容(content)、填充(padding)、边框(border)、边界(margin)。盒子模型主要是根据子元素的尺寸来决定父容器的尺寸大小，我们现在说的弹性盒子则是由父容器的尺寸大小来为子元素的空间进行合理的分配。弹性盒子模型还包括伸缩容器和伸缩项目，其中主轴方向和侧轴方向是伸缩容器的两个方向，伸缩项目就可以顺着这两个其中的一个方向来进行布局。它在伸缩容器中可以完美的进行排列布局，可以很好的对尺寸大小或者随时产生的变化做处理来达到玩味的弹性布局。我们对以上三项技术做了对比，发现利用弹性盒子模型可以简单高效地实现网页的自适应。为了达到最佳的自适应效果，笔者对元素的长度单位进行了调研，发现关于CSS长度单位的选取，可以是px、%、em以及rem，这些都是长度的计量单位，px是在CSS中定义的像素，利用PX设置的元素尺寸是固定不变的，并不会适应浏览器分辨率的变化。％是元素相对于父元素尺寸的百分比，当父元素的大小发生变化时，父元素包含的所有使用百分比的子元素都会进行相应的变化。剩下的两个长度单位ｅｍ和ｒｅｍ都是相对字体的长度单位，不同的是ｅｍ是相对于当前文本的尺寸，如果尺寸未设置则为相对浏览器的默认字体尺寸［221而ｒｅｍ是相对于＜＾1111＞根元素的字体设置。但是ｅｍ有一个弊端，它会继承父元素字体的大小，会出现元素大小层层叠加的连锁反应。因此在实现网页自适应的时候最好的选择就是将弹性盒子模型和rem配合使用。1.3研究内容和方法1.3.1研究内容本文研究的对象是根据国内目前用户对浏览和访问网址所遇到的问题做研发，需要相关学术者和网页开发工作者对网站开发一个自适应的动态网站构建工具，可以通过此技术项目让页面的制作和操作更简单容易上手，对页面元素的增加、样式的需求和修饰，对屏幕的大小分辨率的大小尺寸进行弹性的自适应调整设置，后台也可以根据通过接口调用反馈过来的请求数据，来对网页上的信息做展示。1.3.2研究方法在本研究我主要采用了文献研究探讨法、功能分析解决法和经验累积总结的办法进行研究，具体研究情况如下说明：(1)文献研宄法文献研究法是指通过科学的方法对想关资料的借鉴、甄别、整理的过程，然后进行汇整进而研究和事务的形成的认知，大多数的科学技术研究项目都是通过以上方法相结合来进行完成。除了对以纳入的相关数据进行借鉴，对我们所研究的课题网页技术和自适应构建工具做专项的查询和收集，除了国内的相关资料数据文献的参考对国外的发达中国家的相关技术知识也要进行收集借鉴以作参考，取长补短，希望通过本研究得出的理论能更好的对自适应网页的构建工具开发工程中起到帮助作用。(2)功能分析法功能分析法是社会利用科学的方式把单一的系统作为一个整体来看，然后对折整个系统是如何组成融合对其内部进行分析的一种方式。中心门户网站是对学校的实验教学和教育工作有很大的重用。特别是在虚拟的实验教学，他可以很好的对实验教学进行模拟仿真，这样才能更好的服务于实验教学。为了数据的准确就要求门户网站的功能性全面也就需要现代的移动互联网设备的加入，让学校的中心网站适用于更多的移动终端设备，在保证适配的情况下就要构建工具的加入稳定自适应网页终端的运行。(3)经验总结法经验总结法也就是对理论和实践相结合后的情况进行汇整，使后续成为参考的资料，该方法就是对发现的问题进行统计分析，针对发现的问题进行解决的方案制定。通过开发部门、研发工作者等工作中发现的问题进行统计，还有在开发和试行过程中出现的问题进行统计，最后再一起进行研讨进行解决并将相关方式方法归类，方便后续的工作和人员做参考。2弹性布局与Web前端开发概念2.1弹性布局概念流式布局的缺点是使适配的工作量多，科学的百分比单位使用不便，这就让让其在页面布局中不顺畅，针对这个问题有一种方式很好的解决此问题，就是弹性布局，他可以很好的应用于响应式网页布局，不会漂浮，也可以不用考虑盒子的规模，是一种非常灵性的布局方式。它的构造就像是在一个大容器中房进去几个小容器，而他们是独立的一体，方便设置，我们可以把这个容器盒子是由容器、子元素、主轴和交叉着而组成的。具体构造图如下图4弹性盒子模型2.2Web前端开发概念2.2.1HtmlHtml是一个应用，是一个文本标记语言，在通用的标记语言下，而Html是在普通通用的标记语言下的一种超文本应用，可以将页面终端非文本元素、图片、视频、网址等，网页就是一个页面结构和标签元素的组成，其中加入一些脚本语言、其它公共的接口和组建来为网页提供新鲜的血夜和皮肤，提供网页的相关信息，进而通过网页中的内容可以打开更强大的网页和需要的信息，图片、音乐、链接等等。2.2.2CSScss即级联样式表，它是一种针对文件的计算机语言。Css3是css语言的最新版本，css通过很多的标识符号，让网页的内容和表面层做区分分离。比较传统的以html做基础设计出来的网页样式，css通过科学技术可以达到对html标签对象在网页中的精准掌控，包含标签的位置、标签的样式和标签排版进，css代码对编写的格式是非常的严格的，初学者智能对其基本要领进行领会及掌握，需要更深层的学习，在网页浏览器中跨网站的兼容性甚至css通过进行交互设计时，css又体现出其实施渊博的特点，css是目前在该网页设计领域中最突出，使用最广泛的应用设计语言，比较灵活，可以对多种属性进行建议的代码编写，操作简单。使用进行网页布局带来的优点包括：css代码的代码精简，是可以让同一个代码文件可以被多种前段使用或者引用，或者当系统中的样式需要更新或者调整设计的时候，使更改时需要的流程简单更便于统一做维护。该文件在浏览器页面中方便缓存，可以对网页的访问速度进行提升，该文件一直是作为静态资源来被前端所使用，目前很多浏览器都是具备这个功能，让资源可以快速缓存，我们当在浏览器中打开一个页面时，我们打开第二页面时，第一个页面就会在静态资源下进行缓存，当再次回到第一个页面的时候我们就可以进行快速的访问和浏览，不会受到加载缓慢页面补流程的问题，使用户的浏览体验感提升。利用CSS布局的网站进行搜索都会很简洁和精准的进行搜索，便于用户对资料的抓取。2.2.3JavaScrScript目前浏览器客户端最流行的脚本语言是JavaScrScript，是WEB开发出的，它对事件的相应和面向性的特性，一般都是给html网页增加动态功能，用来满足用户的各种操作做响应。它是由科学技术人员开发设计实现的，最主要的特点是动态、弱类型、基于原型、内置支持类，随着可续技术的不断发展创新，网页前段技术也需要更多的功能进行优化，在非浏览器端如核心的服务器端在编程方面也是优化，都充满了新的活力。3弹性布局在web应用前端开发需求分析与实现3.1web应用用户系统前端用户系统需求分析用户系统作为web平台的门户，承载了大量丰富的网站信息；随着系统需求的增大和功能的扩展，前端页面结构DOM元素也急剧增加，页面的整体高度翻倍，UI展示逻辑变得复杂，产生大量的静态图片文件和异步请求数据；致使页面加载过程中，浏览器需要渲染大量的信息与文件，因此页面的加载速度成为用户体验的瓶颈问题。而当前加载资源通常采用在页面加载之初集中请求的方式，在网络环境不理想的情况下，一站式的请求方式己经不能够保证网页的首屏时间，如何优化门户平台的页面加载、缩短渲染时间，是当前用户系统应用方面的首要需求。另一方面，平台普遍采用服务端语言注入后端模板的方式实现用户个性化信息的渲染，此种渲染方式虽然能够满足业务需求，但是在开发过程中会使前后端职责分流不清；通常前后端并行开发，最后对接数据端口才是合理高效的开发流程，当前前后端语言耦合的情况显然是低效的；虽然目前大部分的平台都使用RESTFUL接口的方式来解决多语言开发的问题，但是用户的信息渲染依然依赖于服务器语言渲染。因此，在当前用户平台需求日益复杂的情况，使用当前的开发模式已经显得捉襟见肘。综上所述，当前用户系统的开发模式，不管是应用的技术还是开发的进度上均不能满足需求。因此针对以上问题，用户系统的前端框架应该满足以Ｋ耍求：在信息渲染方面，所有的信息加载(用户信息，客观信息)都应由前端负责渲染；在页面加载方面，避免所有资源的一次性请求，实现资源的按需请求，避免在较差的网络环境下资源加载错误。下面针对以上两方面进行详细分析。3.2web应用用户系统前端用户信息渲染机制需求与分析渲染是将后台传回数据进行模板填充，模板按照定义的样式将数据展示出来，即数据与DOM结合的过程。目前普遍使用的渲染方式主要包括以下两种：服务器渲染：浏览器向服务器发送请求，服务器处理请求后，对数据库读取到的数据进行处理，将其写入前端编写的模板中，从而生成特定的文件，将此文件传回给浏览器负责加载。这里出现的前端编写的模板是指后端语言模板如JSP、PHP等，虽然是在前端编写，实际上还是后端语言。这种模式带来的主要问题——不能够实现局部更新；用户即使产生细微的UI变动，后台都要重新渲染整个页面，再将其发送给浏览器，导致产生了不必要的HPPT请求，如果页面大部分是静态部分，这种方式无疑是低效的。浏览器渲染：首先浏览器向后台请求HTML页面，服务器返回模板文件，接着浏览器采用异步请求的方式向服务端发送数据请求，最后将返回的数据填充到前端HTML模板中。这种方式利于两端的隔离开发，前端控制模板，后端开发API，但这种方式会出现一个很严峻的问题，那就是跨域；虽然目前针对不同跨域问题有很多解决方案，但是在平台的开发测试域名与线上域名往往不同，需要开发者在上线是更改跨域解决方案，以此给开发上线带来很多不便；因此，从根本上解决跨域问题才是应对之道。基于以上的分析，服务器渲染没有跨域问题，但是前后端耦合太大，渲染效率低下，而采用浏览器渲染方式渲染效率有所提升，但是不能够适应多种域名下的部署。结合以上两种渲染各自特点，本课题提出基于Node.js的大前端渲染方式。3.3web应用后台管理系统前端开发需求分析后台管理系统具有高频率的数据CURD操作、低频率的DOM操作与频繁的监听回调等特点。因此在实现过程中不需要将精力放在UI渲染与优化过程中，转而应该更加注重如何加强数据合理的流动，避免因为代码堆积而给整个平台带来的扩展性差、前后端并行效率低等问题。服务器渲染：浏览器向服务器发送请求，服务器处理请求后，对数据库读取到的数据进行处理，将其写入前端编写的模板中，从而生成特定的文件，将此文件传回给浏览器，浏览器负责加载。这里出现的前端编写的模板是指后端语言模板如JSP、PHP等，虽然是在前端编写，实际上还是后端语言。这种模式带来的主要问题——不能够实现局部更新；用户即使产生细微的UI变动，后台都要重新渲染整个页面，再将其发送给浏览器，导致产生了不必要的HTML请求，如果页面大部分是静态部分，这种方式无疑是低效的。3.4弹性布局在Web应用前端开发需求设计实现3.4.1用户系统总体设计原则对用户系统主要从两个维度进行框架的设计一页面加载和消息渲染；在页面结构上，将前端文档按照主屏和次屏的思路进行分步加载，采用主屏Node.渲染，次屏动态请求局部刷新的通信方式；优化静态文件，设计数据灾备方案；最终达到良好的页面加载效果，减少渲染时间。在前端层次结构上，针对用户信息引起前后端的问题，作为浏览器和服务器的中间层Node.js，结合MongoDB数据库资料来对用户信息进行的染部分，目的是实现前后端分离，使得前后端可以协同开发，方便不同环境的开发测试和上线。3.4.2用户系统需求综述用户系统作为Web平台的门户，承载了大量丰富的网站信息；随着系统需求的增大和功能的扩展，前端页面结DOM元素也急剧增加，页面的整体高度翻倍，UI展示逻辑变得复杂，产生大量的静态图片文件和异步请求数据；致使页面加载过程中，浏览器需要渲染大量的信息与文件，因此页面的加载速度成为用户体验的瓶颈问题。而当前加载资源通常采用在页面加载之初集中请求的方式，在网络环境不理想的情况下，一站式的请求方式己经不能够保证网页的首屏时间，如何优化门户平台的页面加载、缩短渲染时间，是当前用户系统应用方面的首要需求。3.4.3Web加载策略需求与分析在Web应用前端开发需求分，弹性布局可以根据媒体查询达到需求，具体准备工作，我们要达到不同的页面风格进行显示，就要对视扣的宽度，设备的方向等问题考虑，网页工作者需要对不同的移动终端设备的需求来进行编程和布局，就可以让用户在使用移动终端浏览网页的时候都呈现的是最舒适合理的页面。下面笔者利用媒体查询在不同终端设备中实现不同布局技术的效果，分别针对PC、平板和手机端进行样式布局效果。笔者将设定页面的内容分为3个模块，该页面的HTML结构部分代码如下：<divclass=”wrap”><divclass=»boxbox1»>A</div><divclass=»boxbox2»>B</div><divclass=»boxbox3»>C</div></div>对于PC端来说，屏幕分辨率一般比较大，所以笔者设计为3列的排版布局结构，具体如图1所示。实现的关键代码如下：/*pc>768px*/.wrap{width:90%;margin:10pxauto;}.wrap>.box{width:30%;height:200px;margin:1%;float:left;}图1PC端三列结构布局针对平板端来说，屏幕的分辨率一般没有PC端高，所以使用3列排版布局可能会显得比较紧凑，在这里调整为两列排版布局结构，具体如图2所示。实现的关键代码如下：/*平板*/@mediascreenand(max-width:768px){.wrap{width:100%;}.wrap>.box{width:48%;}.wrap>.box3{width:98%;}}图2平板端两列结构布局在手机端中，屏幕分辨率一般不大，所以看到的布局在移动端的页面中都是呈一列的结构显示出来。结论弹性布局在Web前端设计技术在跟着互联网告诉的发展，利用先进的高科技技术代替了传统的移动端和个人电脑端的网页制作，弹性布局是目前在浏览器互联网时代前端问题的最有效的解决方法，对于前端在自适应网页面还有需要创新的的地方，这也是我们要继续努力奋斗的方向和目标。目前弹性盒子对响应式网页布局给人们已经解决了人们工作和生活中的所需，让人们在不同的移动终端可以轻松的浏览和访问，这种比较科学的布局方式对传统的浏览器还是无法做到兼容，就需要我们的开发者继续努力，相信弹性布局在以后会越来越优化，越来越好的服务于人们。参考文献[1]王睿,杨帆,陶健,冯涛.1+X证书制度下课证融通教学资源建设的研究——以Web前端开发职业技能等级证书为例[J].工业和信息化教育,2022(04):9-14.[2]高广银,储久良,成艳,宦臣.线上线下混合式一流课程建设研究与实践——以“Web前端开发技术”课程为例[J].计算机时代,2022(04):77-79.DOI:10.16644/33-1094/tp.2022.04.021.[3]HonghuaWang.DiscussionandresearchonideologicalpoliticsofWebFront-endDevelopmentTechnology[J].AdvancesinEducationalTechnologyandPsychology,2022,6(4).[4]黄涛.基于工具的移动应用代码缺陷静态检测研究[J].武汉工程职业技术学院学报,2022,34(01):22-26.[5]周公平.基于jQuery框架的Web前端开发设计方法研究[J].信息与电脑(理论版),2022,34(05):128-130.[6]郝佳睿.“1+X”证书制度下Web前端人才培养模式的研究[J].科技视界,2022(06):130-132.DOI:10.19694/ki.issn2095-2457.2022.06.41.[7]邓丽君.“1+X”证书引领下《Web前端开发》教学的实践研究[J].电脑知识与技术,2022,18(06):134-135+138.DOI:10.14/ki.ckt.2022.0371.[8]郝风平.刍议Web前端开发技术与优化工作[J].电子元器件与信息技术,2022,6(02):37-38+41.DOI:10.19772/ki.2096-4455.2022.2.015.[9]秦源.基于HTML5技术的移动Web前端设计与开发[J].电子元器件与信息技术,2022,6(02):193-195.DOI:10.19772/ki.2096-4455.2022.2.074.[10]张崇明,高屹.基于CiteSpace的前端开发研究热点与趋势[J].西藏科技,2022(02):69-74.[11]周公平.Web前端开发技术在运维管理系统中的应用研究[J].信息与电脑(理论版),2022,34(03):192-194+199.[12]何芳.“1+X”证书制度下书证融通研究实施——以软件技术专业《Web前端开发》证书为例[J].电脑与电信,2022(Z1):28-31.DOI:10.15966/ki.dnydx.2022.z1.001.[13]张远平,郭伟