记一道腾讯前端笔试题

孙吉亮发布于2019-08-26 14:01 / 2747人阅读

摘要：我今年月投递了腾讯前端开发岗位，很可惜笔试题没通过，小时内给出答案回复面试官，我的答案太过于简单，所以后面面试官估计也就懒得回我这个菜鸡来嘤嘤嘤。

我今年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数据源

超融合服务器私有云前端笔试题前端基础js笔试题笔试题大数据笔试题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109976.html

前端笔试题面试题记录（下）

摘要：前言接上篇前端笔试题面试题记录上。默认值，不脱离文档流，，，，等属性不生效。。不脱离文档流，依据自身位置进行偏离，当子元素设置，将依据它进行偏离。。前言接上篇前端笔试题面试题记录（上）。趁清明小长假，把上篇剩下的部分也写一下，因为最近比较忙这篇已经拖了很久了。现在刚刚开始银四了，应该还是有些小伙伴在找工作，时间还不算太晚，希望本篇可以帮到这些小伙伴。个人博客了解一下：obkoro...

Lin_YT 2019-08-30 14:24 评论0 收藏0
前端笔试题面试题记录（下）

摘要：前言接上篇前端笔试题面试题记录上。默认值，不脱离文档流，，，，等属性不生效。。不脱离文档流，依据自身位置进行偏离，当子元素设置，将依据它进行偏离。。前言接上篇前端笔试题面试题记录（上）。趁清明小长假，把上篇剩下的部分也写一下，因为最近比较忙这篇已经拖了很久了。现在刚刚开始银四了，应该还是有些小伙伴在找工作，时间还不算太晚，希望本篇可以帮到这些小伙伴。个人博客了解一下：obkoro...

suemi 2019-08-22 16:05 评论0 收藏0
笔试题之Event Loop终极篇

摘要：下面开始分析开头的代码第一轮事件循环流程整体作为第一个宏任务进入主线程，遇到，输出遇到函数声明，声明暂时不用管遇到，其回调函数被分发到微任务中。我们记为遇到，其回调函数被分发到宏任务中。先上一道常见的笔试题 console.log(1); async function async1() { console.log(2); await async2(); con...

niceforbear 2019-08-23 18:09 评论0 收藏0
【手把手带你刷好题】——21.一道笔试题（非力扣）

摘要：前言今天是刷题打卡第天可能有铁汁会问，为什么变成刷好题，而不是刷了呢因为最近笔者遇到很多经典的笔试题，想着记录下来，方便大家和自己学习，所以今后笔者会在标题上注明是不是力扣题。【前言】今天是刷题打卡第21天！可能有铁汁会问，为什么变成刷好题，而不是刷LeetCode 了呢？因为...

骞讳护 2021-11-22 09:34 评论0 收藏0