响应式设计在携程火车票的应用‘爱游戏ayx官方网站入口’
发布日期：2023-04-11 00:07
一、什么是响应式设计？可能许多人脑海中已经泛起了这样一个动画，当浏览器中页面尺寸不停变化时，内容也在随之变化。简朴说，响应式网站设计是一种允许设计和代码响应设备屏幕巨细的方法。二、响应式设计的优势有哪些？1) 节约人力物力一套代码两头使用，节约开发、设计、测试、产物、运营资源。2) 两个端使用同一个url：利于seo，可以集中精神和资源做一个url的seo，提升搜索引擎的排名。
以Google来说，网址差别但内容相同的情况下，虽不会将该网站列为恶意连结，但仍会影响评价。不需要设置302跳转。如果是非响应式的站点，当移动端浏览器会见桌面站点的url，或者当桌面浏览器会见移动端站点的url时，需要设置正确的302跳转，而这将大大影响用户体验。
三、在携程火车票的应用响应式设计的观点已经出来蛮长时间，但在海内一直处于不愠不火的状态。固然这与响应式设计并非完美不无关系，在我们的实践当中，也确实遇到了一些问题。
1）业务代码中充斥着大量的媒体查询代码，两个端样式的离开书写倒霉于阅读和维护。如下：css// h5.box { font-size: 14px; }// pc@media only screen and (min-width: 760px) { .box { font-size: 18px; }}如果遇到层级嵌套很深，这种写法可读性更差。
解决方案：响应式不仅可以凭据屏幕尺寸做，一些简朴的场所，还可以凭据设备署理（UA）做。由于项目中绝大部门模块的样式代码纵然移动端和桌面端有所差别，也只需要书写两种即可，不必特意针对差别尺寸的屏幕划分书写样式代码。据此可以试着来优化代码。
html<html class="isMobile ? 'h5' : 'pc'"></html>less.box { font-size: 14px; .pc & { font-size: 18px; }}首先，我们在html中预设了h5或者pc的class，之后在样式中划分凭据h5，pc情况书写样式。默认是h5的样式，pc如果有所差别直接笼罩样式即可。这样就把移动端和桌面端的样式写在了一起，样式中淘汰了大量的媒体查询的代码，而且.pc、.h5的名字不比媒体查询的代码更容易看懂吗？固然isMobile可以通过屏幕尺寸甚至可以通过UA来实现。
使用屏幕尺寸实现的利益就是当用户屏幕在尺寸变化时可以实时响应，不外这个利益不大。用UA实现的利益是服务端也能拿到UA，做ssr时在服务端就能确定渲染哪个平台组件，能够有效的淘汰size。
这边的less代码用到了一个小技巧，假设没有 & 符号，那么.pc的类会从.box的子元素中去寻找，由于在less中 & 代表的是父元素，也就是.box类，.pc & 就会逃逸出.box的作用规模。.pc会从.box的祖先元素中去寻找，在scss中可以使用@at-root实现相同的效果。2）size的增加桌面端和移动端的屏幕巨细和操作方式的差异决议了两者的设计一定存在着基础性的区别。
为了保证两个端都有较好的用户体验，某些组件(如都会选择器，日期选择器)不得不划分引入。这是导致尺寸增加最重要的因素。要解决这个问题需要凭据模块展示的位置做差别处置惩罚。模块在非首屏上展示，这种场景解决比力简朴，两个端划分动态引入差别的组件即可。
如今的react和vue都已经支持动态引入组件的方式。棘手的是模块在首屏展示，要如何区分引入呢？如果还是根据动态引入组件的方式，那势必是需要在模块展示区域中有一个加载中的状态，影响体验。
两个都导入又会增加包size，如果是ssr的项目，倒是可以在服务端通过UA来区分引入两个端的组件，只不外打包后的js依旧会比力大，降低执行性能。怎么才气一箭双鵰呢？我们的解决方案是划分界说pc和h5两个page级此外组件，划分引入各自端需要的模块。
服务端识别UA去加载正确的page。这个组件要做到只管的轻量，业务逻辑都交给内部的组件去处置惩罚。这样就解决了首屏模块区分引入的问题，只是会多一点代码的维护量。
由于我们用的是携程公司内部的nfes ssr 框架，nfes是这样去界说一个路由的：javascript{ reg: '/xxx', pageName: 'xxx.html',}基于此，我们向框架组提出了pageName能够支持传入一个方法，支持凭据ua来区分。如下：javascript{ reg: '/xxx', pageName(req) { return /mobile/i.test(req.headers['user-agent']) ? 'xxxh5.html' : 'xxxpc.html' },}如果你的项目没有用到前端路由，那么事情到这里就竣事了。
可是我们做的是一个ssr项目，在前端无刷新路由跳转时，前端需要判断UA，去渲染正确的page组件。这种方式并不适合无刷新跳转，前端拿不到req。一开始我们有思量过是否可以把req这个工具中须要的字段序列化到html中，好比说headers，这样就能保证前端也能完全有这套设置。可是思量到这种做法太邪术，不太好明白，最终针对性的出相识决方法。
javascript{ reg: '/xxx', h5PageName: 'xxxh5.html', onlinePageName: 'xxxpc.html',}详细的实现交由前端或者后端跳转时统一实现即可。如果有些页面确实不适合做响应式，可是又想路径一致，也可以用这种方式解决。3）图片的引入对于一些小icon时只管接纳iconfont的形式去替代，幸运的是公司有专业的设计师能做到。其他的情况就用image标签的srcset属性或者用background-image的 image-set方法去引入差别的倍图。
记得做好兼容处置惩罚即可。四、适合场景只要两个端想做的事情相似，偏浏览而且交互不是特别庞大的绝大部门web应用，都很是适适用响应式的方案。有些人可能会担忧尺寸增加，会导致加载和执行性能的降低，其实完全没须要，究竟现在的移动网络和浏览器的执行效率跟五六年前相比已经好太多了。
现在在trip中铁项目中的订单详情页和订单完成页，用了响应式设计来开发，其他页面也在陆续跟进中。这种方式对开发人员最直观的感受就是除了样式上需要凭据情况适配一下桌面和移动端，js代码是险些完全一致的，开发效率获得了显着提升，再也不想回去之前的开发方式了。
【作者简介】永利，携程开发司理，专注于Web领域的探索。
本文关键词：爱游戏ayx官方网站入口,响应,式,设,计在,携程,火车票,的,应用,‘,爱
本文来源：爱游戏ayx官方网站入口-www.xzjkxny.com
博亚app最新官方入 欧宝体育app官方入 华体会体育 米乐m6网页版登录
Copyright © 2002-2022 www.xzjkxny.com. 爱游戏ayx官方网站入口科技 版权所有 网站备案号：ICP备71651382号-9