记一道腾讯前端笔试题

2019-08-16

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

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

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

1. 面试原题截图

clipboard.png

2. 附件

图片描述

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

二、题目分析

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

2.1 高精度还原

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

2.2 使用Vue,合理规划组件

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

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

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

2.4 下载态的更换和小动效

考察异步和css基本能力

2.5 48小时内回复

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

三、项目分析

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

忽略头部,专注主体

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

clipboard.png

Tab部分

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

clipboard.png

列表部分

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

clipboard.png

四、答题前的准备

react配合webpack

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

原文链接:segmentfault.com

上一篇:从图片优化说起
下一篇:react-native Cannot get property 'packageName' on null object
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部