经验总结

  1. 首页 > 生活 > >

前端开发日常——CSS动画无限轮播

生活百科

近来没有什么值得写的东西 ， 空闲的时候帮前端的同学做了些大屏上的展示模块 ， 就放在这里写写吧 ， 手把手“需求->设计-> 实现” ， 受众偏新手向 。

前端开发日常——CSS动画无限轮播

文章插图
为了直观便于理解 ，  直接把结果贴在上面 。
如上所示 ， 基本需求比较简单明了 ，  “分页显示供应商、供应占比列表 ， 自动轮播” 。
一、需求评审
该有的环节还是要有 ， 尽管需求简单 ， 评审不能省略 ， 无论形式 。开发的同学千万不要真的相信需求就这么简单 ， 否则南辕北辙 ， 出力不讨好 ， 那必定是日常-_-|| 。
于是有丰富填坑经验的开发同学 ， 对于这个简单的模块需求 ， 可能会提出如下的一些问题
1. 如果只有一页 ， 要不要轮播？
2.每页的轮播间隔频率是多少？
3.如果列表没有数据 ， 如何显示这个模块？
4.数据的刷新时机？是翻页刷新 ， 轮播一圈刷新 ， 还是其他？
5.这个绿色的比值是什么含义？ 是不是还有红色？
6.百分比的小数位？
7.如果接口异常比如网络不通 ， 如何表示这种异常？
8.供应商的名字会不会有500字那么长？ 放不下如何布局？
……等等
以上任何一个未明确的需求 ， 都可能成为你编码完成后的一个bug或优化建议 。o(*￣︶￣*)o 。
二、设计评审
关于上面待确认的每一个问题 ， 我们伟大的产品经理都一一耐心的给出了“令人信服的”回答后 。还是不能马上开始编码 。下面我们需要进行一些技术方案的设计讨论 ， 由技术leader把关 。例如：
1. 数据流 ， 这个列表的数据 ， 是从数据库中的哪几个表取出的？ 确认下查询逻辑 。
2.接口设计 ， 是一次返回前端所有数据 ， 还是支持分页查询 。
3.性能考虑 ， 查询频率是不是较高 ， 并发是不是大 ， 缺不缺索引 ， 要不要上缓存？
4.轮播如何实现？ 有没有已经集成的轮播控件 ， 是否满足要求 ， 还是需要自己写一个 。
5.如何进行模块化开发 ， 作为一个模块集成嵌入到整体页面中 。
……等等
明确了以上的问题后 ， 作为前端同学的我 ， 是不是可以开始撸代码了？
三、想清楚再写
说到这里 ， 
一类同学已经开始着手编码了 ，  第一个想到需要写的方法可能是 ， ajax 去后台请求数据列表的接口 。
另一类同学 ， 可能仍在构思 ， 如何组织代码 ， 提炼主要的数据结构和功能方法 。
这里我们显然应该向“另外一类”同学学习 。想清楚再写 ， 是一个毫无疑问的好习惯 。
技术预研
实现一个功能 ， 首先要扫除其中的未知技术点 ， 扫除了所有未知之后 ， 才能够优化的组织实现方案 。
上面的需求对于我这种半吊子前端来说 ， 比较关键的两个技术问题是 。
1）用什么方案来实现滑动动画 。2）如何实现“无限滚动” 。
滑动动画——经过一番百度 ， 总结下动画可能的实现方案 ， 包括用JS实现或者用CSS实现 。各有优劣 ， js 兼容性好 ， 控制灵活；CSS性能高 ， 平滑流畅 。因为我们的动画非常线性 ， 简单 ， 于是这里我们决定采用CSS动画作为动画的实现方案 。

经验总结扩展阅读


上一篇：2023爆红抖音儿歌

下一篇：2022年12月2日五行穿衣指南