記一道騰訊前端筆試題

孫吉亮發布于2019-08-26 14:01 / 2927人閱讀

摘要：我今年月投遞了騰訊前端開發崗位，很可惜筆試題沒通過，小時內給出答案回復面試官，我的答案太過于簡單，所以后面面試官估計也就懶得回我這個菜雞來嚶嚶嚶。

我今年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數據源

云服務器 GPU云服務器前端筆試題前端基礎js筆試題筆試題大數據筆試題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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