共计 9093 个字符，预计需要花费 23 分钟才能阅读完成。
前言
H5 页面作为挪动端 Web 利用的重要模式之一，曾经成为了古代 Web 开发的热门话题。在 H5 页面的开发过程中，前端技术的利用至关重要。本文将探索京东竞速榜 H5 页面的外围前端技术，包含动画、款式配置化、皮肤切换、海报技术、调试技巧等方面，心愿可能为宽广前端开发者提供一些有用的参考和思路。
技术要点
一、动画
为进步用户体验，使页面更加生动有趣，进步用户的满意度和留存率，页面中增加了多个动画。
其中为了突出页面中的重点内容竞速排名，增加了进度条、徽章、菜单、按钮和弹框等动画。
1.1、进度条动画
进度条中蕴含 2 个动画成果：ProgressRise 和 moveScaleRight。这两个动画成果是通过 CSS 的 animation 属性同时利用在同一个元素上实现的，animation 属性能够承受多个动画成果，用逗号分隔即可。当初始化加载数据时，进度条从 0 到 100%，用缓动函数，即动画开始和完结时速度较慢，两头时速度较快的形式开展，只执行一次，ProgressRise 动画完结。提早 4.6 秒后，开始交替动画 moveScaleRight，元素在 X 轴方向上进行了缩放，缩放比例为 1.04 倍，依照 2 秒工夫有限循环，实现右侧弹性成果。
其中成果如下：
<div class="progress"></div><!--* 进度条 *-->
.progress {
z-index: 10;
height: 7px;
background-image: @progress-bar-color;
border-radius: 8px;
/* 这是一个 CSS 动画，蕴含两个动画成果：ProgressRise 和 moveScaleRight。这两个动画成果是通过 CSS 的 animation 属性同时利用在同一个元素上实现的。其中，animation 属性能够承受多个动画成果，用逗号分隔。在这个例子中，示意同时利用 ProgressRise 和 moveScaleRight 两个动画成果。*/
animation: ProgressRise 2s ease, moveScaleRight 2s 4.6s alternate ease-out infinite;
transform-origin: left center;
}
/* 当页面首屏渲染进度条的宽度 */
@keyframes ProgressRise {
0% {width: 0;}
100% {width: 100%;}
}
@keyframes moveScaleRight {
from {transform: translate3d(0, 0, 0) scale3d(1, 1, 1) skewX(0deg);
}
to {transform: translate3d(0, 0, 0) scale3d(1.04, 1, 1) skewX(0deg);
}
}1.2、徽章左右摇摆动画
排名徽章须要跟着进度条一起弹性摇晃。首先先提早 4.6 秒后，有限次挪动该元素 X 轴的地位，并且应用了 alternate 属性，使得动画在反复播放时会反向播放，实现摇晃动画成果。
<div class="light-theme-0"></div><!--* 排名徽章 *-->
.light-theme-0 {
position: absolute;
top: -6px;
right: -34px;
width: 22px;
height: 22px;
background: url('~@/assets/images/bcmixin/1.png') no-repeat center center;
background-size: 100% 100%;
// 这段代码为元素增加了一个名为 lightMoveRight 的动画成果，持续时间为 2 秒，工夫函数为 ease-out，延迟时间为 4.6 秒，反复次数为有限次，并且应用了 alternate 属性，使得动画在反复播放时会反向播放。animation: lightMoveRight 2s ease-out 4.6s alternate infinite; // 右侧弹性成果动画
transform-origin: left center;
}
@keyframes lightMoveRight {
from {transform: translateX(0px);
}
to {transform: translateX(-8px);
}
}1.3、菜单滚动动画
当切换下拉菜单时，菜单上会有滚动动画，次要是通过监听 touchmove 事件来获取菜单元素的 transform 属性值，计算元素地位后，为元素增加了一个 transform 属性，使得元素在 X 轴方向上向右平移，并且增加了一个 transition-duration 属性，使得元素的变换过程持续时间为 0.3 秒，实现菜单平滑滚动成果。
<div class="menu" style="transform: translateX(257px); transition-duration: 0.3s;">
<ul><li> 菜单项 1 </li>...</ul></div>
document.querySelector('.menu').addEventListener('touchmove', function () {var transformValue = window.getComputedStyle(menu).getPropertyValue('transform')
var translateXValue = parseInt(transformValue.split(',')[4])
var scrollDistance = 100
menu.style.transform = 'translateX(' + (translateXValue + scrollDistance) + 'px)'
})1.4、按钮过渡动画
为了让用户能够一屏查看更多要害信息，新增了简洁版页面。切换简洁版时，按钮采纳了过渡动画。为按钮元素增加了一个过渡成果，使得元素的所有属性在 1 秒内发生变化时会平滑过渡。其中当点击按钮时，将会依照 1 秒工夫平滑更换背景图片。
<div class="bc-controll-zoom-wrap bc-controll-zoom-wrap-deep"></div>
.bc-controll-zoom-wrap {
position: fixed;
bottom: 30px;
right: 0;
width: 83px;
height: 54px;
background: url('../../assets/images/float_btn_2023_618.png');
background-size: 100% 100%;
z-index: 1999;
display: flex;
justify-content: center;
align-items: center;
//all 示意所有属性都会产生过渡，1s 示意过渡的持续时间为 1 秒
transition: all 1s;
}
.bc-controll-zoom-wrap-deep {background: url('../../assets/images/float_btn_deep_2023_618.png');
background-size: 100% 100%;
}1.5、弹框由小变大动画
弹框由小变大动画能够为弹框增加一个突变的放大成果，使得弹框在呈现时更加活泼、天然，进步用户的体验感。因而竞速榜海报事实用了突变放大动画。次要是定义了一个名为 zoomIn 的动画，用于实现元素的缩放成果。在动画开始时，元素的 opacity 属性为 0，即元素齐全通明；同时，元素的 transform 属性为 scale3d(0.3, 0.3, 0.3)，即元素在三个方向上都放大了 0.3 倍。在动画进行到 50% 时，元素的 opacity 属性变为 1，即元素齐全不通明；同时，元素的 transform 属性不再变动，放弃放大状态。
.zoomIn-enter-active {animation: zoomIn 0.3s;}
@keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
50% {opacity: 1;}二、动画兼容性
CSS 款式兼容性的作用是确保网页在不同浏览器和设施上都可能正确地显示和出现，进步网页的兼容性和可拜访性。能够定义了一些 CSS 动画和过渡成果的 Mixin，在其余 Less 文件中援用这些 Mixin 来疾速定义 CSS 动画和过渡成果。CSS 动画兼容性用 mixin 写法的益处是能够进步 CSS 代码的可重用性和可维护性，同时保障在不同浏览器中的兼容性。具体 mixin 可参考上面写法。次要分为 6 种成果，animation 动画成果，transform 变换成果，rotation 旋转成果、scale 缩放成果、translate3d 平移成果、keyframes 关键帧动画。
// Animation 定义 CSS 动画成果
.animation(@animation) {
-webkit-animation:@animation;
-moz-animation:@animation;
-o-animation:@animation;
animation:@animation;
}三、海报技术
页面主动生成海报能够进步用户的互动性和分享性，加强品牌的曝光度和口碑效应，进步用户留存率和转化率。将网页的重要信息主动生成海报，并加上二维码不便竞速榜网页分享和流传。那么纯前端怎么画海报这块，就是一个要害的技术。竞速榜采纳了通过 css 属性画 canvas 图片的轻量级的 vue 组件 Vue Canvas Poster。它能够应用类 css 属性的形式，依照相对定位布局生成 canvas 图。并且能够通过 widthPixels 设置生成图片尺寸，解决图片含糊问题。其中 image 属性用来绘制图片，text 用来绘制文本，rect 用来绘制矩形，qrcode 用来绘制二维码。依据 width 宽度、height 高度、top 上边距、left 右边距，来组装对应元素地位，绘制海报内容。
import {VueCanvasPoster} from 'vue-canvas-poster'
export default {
components: {VueCanvasPoster,},
}
this.painting = {
width: '334px',
height: '600px',
top: 0,
background: backgroundImage,
views: [
{
// 小标题背景
type: 'image',
url: subTitleBackgroundImage,
css: {
top: '125px',
left: '16px',
width: '297px',
height: '70px',
},
},
// 页面文本
{
type: 'text',
text: currTitle,
css: [
{
left: '23px',
top: '140px',
fontFamily: 'PingFangSC-Semibold',
fontSize: currTitleFontSize,
color: textColor,
width: '290px',
height: '33px',
textAlign: 'center',
},
],
},
...
{
// 底部红色背景
type: 'rect',
css: {
bottom: '10px',
right: '24px',
width: '53px',
height: '53px',
color: '#fff',
},
},
// 二维码
{
type: 'qrcode',
content: qrcodeSrc,
css: {
bottom: '14px',
right: '28px',
width: '44px',
height: '44px',
color: '#000',
},
},
],
}四、B 版竞速榜页面 UI 降级
竞速榜单的一直降级，将更无效的卷动厂商，同时也能进步榜单引单引流效率，在大促期间成为手机品类与品牌博弈的重要工具之一。因而每年大促都会进行一次 UI 调整，次要波及色彩调整。所以咱们将主题色提取出，批改公共变量，进步开发效率。次要总结为 6 种罕用变量，色彩、字体、边框、布局、动画、响应式。
/* 色彩变量 */
@primary-color: #007bff;
/* 字体变量 */
@font-size-base: 16px;
/* 边框变量 */
@border-color: #ccc;
/* 布局变量 */
@container-width: 1200px;
/* 动画变量 */
@animation-duration: 0.3s;
/* 响应式变量 */
@screen-xs: 576px;五、履行皮肤抉择
用户能够抉择皮肤能够进步网站的个性化和用户体验，满足不同用户的需要和爱好，从而进步用户的满意度和忠诚度。
这就须要开发时反对款式配置化，进步网站的开发效率和可维护性，同时也能够缩小款式谬误和反复代码，进步网站的稳定性和性能。
首先新增页面配置后盾，使用户能够抉择想要的皮肤。
在页面中加载款式配置文件，能够通过接口申请加载用户抉择的皮肤，通过 JavaScript 动静设置款式属性和值，从而疾速地批改页面的款式，实现页面主题皮肤更换。
// 背景色彩
this.posterConfig = getConfigBySkin(this.$store.state.skin)
let getConfigBySkin = (skin) => {
// 默认背景
let config = {
globalBg:'#3F2786', // 背景图
purpleTitleBg: require('../../../assets/images/skin_purple/bg-time-purple.png'), // 题目背景图
rightArrow: require('../../../assets/images/skin_purple_pre/arrow-right.png'),
titleBg: require('../../../assets/images/skin_common/purple-title-border.png'),
number: 'skin_purple',
progressBar: require('../../../assets/images/skin_common/purple-bar.png'),
leftBg: require('../../../assets/images/skin_common/digital-l-b.png'),
rightBg: require('../../../assets/images/skin_common/digital-r-t.png'),
}
// 获取背景图片 'red'、'golden'、'purple'、'blue'
switch (skin) {
case 'red':
config.globalBg = '#780605'
config.number = 'skin_red'
...
break
case 'blue':
...
break
case 'golden':
...
break
}
return config
}六、快照模式
为了满足用户查看历史要害节点数据的诉求，增加了快照模式来实现。具体计划如下
1、历史工夫生成惟一标识工夫戳 SnapshotId，与历史数据一起存储下来。
2、当用户抉择快照工夫时，依据历史工夫生成惟一标识工夫戳 SnapshotId，增加到页面 URL 中。当页面进行分享时，SnapshotId 能够一起分享。当页面首屏加载时，读取 Url 中的 SnapshotId，传入接口取得历史数据展现。
七、价格平安降级
因为竞速榜单访问量很高，吸引了大量爬虫对价格数据的抓取和滥用，这样会进犯网站数据隐衷，影响接口稳定性，毁坏业务利益。那接口加反爬能够无效避免歹意爬虫对价格数据的抓取和滥用，爱护商家的利益和数据安全，同时也能够进步网站的稳定性和性能，晋升用户的体验感。
于是竞速榜网页价格信息接口增加网关和对应的 SDK 实现加密操作。次要通过后盾下发的 token 和随机密钥算法，由前端将特定信息通过算法生成签名，传递给后端进行辨认，可无效辨认 / 拦挡刷单刷券所产生的业务损失，增强接口的对抗性，晋升防刷能力。
八、调试技巧
8.1、新增 vconsole
竞速榜 H5 页面次要在京东 APP 以及微信中关上，如果发现报错等问题，无奈在手机中调出开发者工具进行排查。vconsole 是一个轻量级的前端调试工具，能够在挪动端页面中不便地查看日志、调试代码、性能剖析等，帮忙开发者疾速定位和解决问题，进步开发效率和品质。因而，退出 vconsole 能够不便地进行挪动端页面的调试和优化，进步开发效率和用户体验。当 URL 中退出 vconsole= 1 的参数时，会显示控制台，提效挪动端排查效率。
/**
* 参数携带了 vconsole, 就启用 vconsole
*/
import VConsole from 'vconsole'
if (location.href.indexOf('vconsole') !== -1) {import('vconsole').then(({default: VConsole}) => {new VConsole();
})
}8.2、新增 nojump 不跳转
局部异样场景会主动跳转到其余页面中，之前异样报错将被笼罩无奈查看，不利于排查，如以后流动不在对外工夫范畴内时，会主动跳转到首页。于是须要加上不主动跳转机制，当 URL 中退出 nojump= 1 的参数时，页面停留在当前页，不便查看异样信息。
/**
* 返回后果解决控制器
*
* @param {function} resolve promise resolve function
* @param {function} reject promise reject function
* @param {object} result 接口返回数据
* @param {boolean} isNeedReject 是否须要执行 reject
* @param {string} url 申请的接口地址
*/
const handlerResult = (resolve, reject, result, isNeedReject, url) => {
// 是否须要跳转
const nojump = getQueryString('nojump') === '1'
switch (result.code) {
// 工夫小于“流动对外工夫”或者工夫大于“流动下线工夫”case '103':
if (nojump) {console.log('nojump 非跳转模式', '状态码:103', '工夫小于“流动对外工夫”或者工夫大于“流动下线工夫”', '申请接口:', url, '以后页面地址:', location.href)
} else {window.location.href = '//www.jd.com'}
break
case '200':
resolve(result.data)
break
// 未登录 ERP / 登录异样 / 流动类型有误
case '401':
window.location.href = `//ssa.jd.com/sso/login?ReturnUrl=${encodeURIComponent(location.href)}`
break
...
}
}九、勾销接口
当页面跳转或敞开时，须要勾销正在进行的申请，避免出现响应谬误，以及节约服务器资源和带宽的状况。
具体实现计划为读取接口时生成接口惟一标识，存入全局对象中。再在 window 对象增加了一个 beforeunload 事件监听器，当用户敞开或刷新页面时，会执行监听器中的回调函数。将之前存在全局变量 window.globleAxioToken 中的申请勾销掉。
十、轮询接口异样 3 次跳兜底页面
因为竞速榜要求实时性十分高，每秒都会轮询拿最新数据。为了防止因为网络稳定或服务器异样等起因导致的偶发性谬误，履行轮询接口 3 次调用出异样后才跳谬误页面的做法。从而进步网站的稳定性和用户体验。如果只是偶发性的谬误，那么用户在第一次或第二次尝试时可能会从新尝试，而不会立刻放弃，从而缩小了用户的流失率。同时，这种做法也能够缩小因为网络稳定或服务器异样等起因导致的误报，防止对用户造成不必要的困扰和影响。
十一、本地包拆分命令
为进步开发效率，须要新增多个快捷启动命令如下所示：
1、启动本地 mock 数据环境，不便后端接口未开发好时，前端 Mock 数据并行开发。
2、启动测试环境数据环境，不便与后端进行连调。
3、启动线上数据，模仿用户实在环境排查问题。
4、编译测试环境
5、编译线上环境
"start:dev": "node script/switch_env_server.js dev && cross-env BUILD_ENV=dev vue-cli-service serve --open",
"start:prod": "node script/switch_env_server.js prod && cross-env vue-cli-service serve --open",
"start:mock": "node script/switch_env_server.js local && cross-env MOCK=true vue-cli-service serve --open",
"build:dev": "node script/switch_env_build.js dev && cross-env BUILD_ENV=dev npm run oss",
"build:prod": "node script/switch_env_build.js prod && cross-env BUILD_ENV=prod npm run oss"将通过不同命令读取不同文件，实现不同环境代理不同环境接口。
十二、监控
新增 ump 监控，每分钟会去拜访页面链接的连通性，判断页面是否返回除了 200、301、302 的异样状态码，如果间断 3 次页面拜访异样。如返回异样状态码，则通过公司外部聊天工具咚咚、邮件等形式进行音讯推送。
总结
本文介绍了京东竞速榜 H5 页面的外围前端技术，这些技术能够帮忙开发者更好地开发 H5 页面，进步网站的品质和用户满意度。同时，咱们还有一些将来的布局，如进一步减速页面加载速度、优化页面构造和布局、增强网站的可拜访性等方面，以适应一直变动的市场需求和用户需要。将来，咱们将持续关注 H5 页面的前沿技术和发展趋势，一直摸索和实际新的技术计划，为用户提供更好的体验和服务。
作者：京东批发 饶恩慧
起源：京东云开发者社区
