记一道腾讯前端笔试题

我今年4月投递了腾讯前端开发岗位，很可惜笔试题没通过，48小时内给出答案回复面试官，我的答案太过于简单，所以后面面试官估计也就懒得回我这个菜鸡来（嘤嘤嘤）。当然以我现在的眼光来重新看那份答案，都觉得那不应该是一个一年的前端开发工作者给出的答案。

话不多说，下面给出面试题吧

一、腾讯线上面试原题和附带材料

1. 面试原题截图

2. 附件

具体的psd文件点击前往谷歌云盘获取

二、题目分析

首先我目前只针对前端做题目分析，当然全栈大佬们还会顺带实现切图，用户体验设计，后台，运维等等

2.1 高精度还原

考察ps工具的使用，因为附件中面试官给的材料是psd格式文件。需要自己去切图、取色、取间隔大小

2.2 使用Vue，合理规划组件

考察你对框架的理解和运用能力。这个框架的选择无大碍，大概是因为当初我简历上Vue的项目比较多，所以面试官选择让我用Vue实现。当然，你用React或者其他也行

2.3 支持手势滑动和左右切换Tab

对我这种初级前端工程师，更多考察我对第三方库的运用，而不是让我造轮子。

2.4 下载态的更换和小动效

考察异步和css基本能力

2.5 48小时内回复

这应该是最难的一点。毕竟大公司，追求速度效率，谁能在规定时间内交出一份令人更满意的答案，谁更能得到青睐。

三、项目分析

这道题看起来很简单，应该很多人会直接上手撸代码，边做边改。
这时候我们不妨放慢脚步，慢慢欣赏这张UI设计图。

忽略头部，专注主体

红框内是手机浏览器自带可忽略，硬要说考虑，那就只有“游戏分类”这4个字了= =

Tab部分

• 重点在于这部分要配合底部列表的滑动切换，从项目结构来看，就是涉及到Tab组件与List组件之间的通信
• 从用户体验上来看，我们还喜欢在切换的时候，底下的Tab滑动条不是瞬变的，而是随着页面一起滑动。
• 从程序涉及的可延伸性来看，我们还希望，Tab组件不应该是6个固定值，而应该是可配置的，如果超过6个，Tab也可以滑动。

列表部分

• 重点在于长列表处理，考察懒加载、下拉加载
• 如果还注重细节，那还要考虑切换Tab的再次回来的时候，原先的Tab页面是否需要缓存位置；各种边界情况的处理，比如说空数据，网络错误等等；上拉刷新页面；左右切换实现过渡效果

四、答题前的准备

1. react配合webpack

思否上也有从0开始webpack配置react脚手架的详细教程

我自己按流程搭建的脚手架git地址

2. 脚手架准备好了，那么接下来我们需要分析页面结构

• 头部Tab组件，这个实现比较简单，那我们就原生实现
• 可左右滑动，上拉刷新，下拉加载的列表页。下滑列表采用第三方库better-scroll再次封装出一个组件
• 2个组件之间要相互通信，这样左右滑动的时候，导航栏可以跟着滑动。通信方式我们采用redux
• 暂时先用mock数据模拟数据

目录结构

├── src                      
│   ├── pages                    // 页面
│   ├── components               // 组件
│   ├── store                    // redux数据源