亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

記一道騰訊前端筆試題

孫吉亮 / 3020人閱讀

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

我今年4月投遞了騰訊前端開發(fā)崗位，很可惜筆試題沒通過，48小時內(nèi)給出答案回復(fù)面試官，我的答案太過于簡單，所以后面面試官估計也就懶得回我這個菜雞來（嚶嚶嚶）。當(dāng)然以我現(xiàn)在的眼光來重新看那份答案，都覺得那不應(yīng)該是一個一年的前端開發(fā)工作者給出的答案。
話不多說，下面給出面試題吧
一、騰訊線上面試原題和附帶材料 1. 面試原題截圖

2. 附件 

具體的psd文件點擊前往谷歌云盤獲取
二、題目分析 
首先我目前只針對前端做題目分析，當(dāng)然全棧大佬們還會順帶實現(xiàn)切圖，用戶體驗設(shè)計，后臺，運(yùn)維等等
2.1 高精度還原 
考察ps工具的使用，因為附件中面試官給的材料是psd格式文件。需要自己去切圖、取色、取間隔大小
2.2 使用Vue，合理規(guī)劃組件 
考察你對框架的理解和運(yùn)用能力。這個框架的選擇無大礙，大概是因為當(dāng)初我簡歷上Vue的項目比較多，所以面試官選擇讓我用Vue實現(xiàn)。當(dāng)然，你用React或者其他也行
2.3 支持手勢滑動和左右切換Tab 
對我這種初級前端工程師，更多考察我對第三方庫的運(yùn)用，而不是讓我造輪子。
2.4 下載態(tài)的更換和小動效 
考察異步和css基本能力
2.5 48小時內(nèi)回復(fù) 
這應(yīng)該是最難的一點。畢竟大公司，追求速度效率，誰能在規(guī)定時間內(nèi)交出一份令人更滿意的答案，誰更能得到青睞。
三、項目分析 
這道題看起來很簡單，應(yīng)該很多人會直接上手?jǐn)]代碼，邊做邊改。
這時候我們不妨放慢腳步，慢慢欣賞這張UI設(shè)計圖。
忽略頭部，專注主體 
紅框內(nèi)是手機(jī)瀏覽器自帶可忽略，硬要說考慮，那就只有“游戲分類”這4個字了= =

Tab部分 

重點在于這部分要配合底部列表的滑動切換，從項目結(jié)構(gòu)來看，就是涉及到Tab組件與List組件之間的通信


從用戶體驗上來看，我們還喜歡在切換的時候，底下的Tab滑動條不是瞬變的，而是隨著頁面一起滑動。


從程序涉及的可延伸性來看，我們還希望，Tab組件不應(yīng)該是6個固定值，而應(yīng)該是可配置的，如果超過6個，Tab也可以滑動。

列表部分 

重點在于長列表處理，考察懶加載、下拉加載



如果還注重細(xì)節(jié)，那還要考慮切換Tab的再次回來的時候，原先的Tab頁面是否需要緩存位置；各種邊界情況的處理，比如說空數(shù)據(jù)，網(wǎng)絡(luò)錯誤等等；上拉刷新頁面；左右切換實現(xiàn)過渡效果

四、答題前的準(zhǔn)備 1. react配合webpack

思否上也有從0開始webpack配置react腳手架的詳細(xì)教程

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

2. 腳手架準(zhǔn)備好了，那么接下來我們需要分析頁面結(jié)構(gòu)

頭部Tab組件，這個實現(xiàn)比較簡單，那我們就原生實現(xiàn)

可左右滑動，上拉刷新，下拉加載的列表頁。下滑列表采用第三方庫better-scroll再次封裝出一個組件

2個組件之間要相互通信，這樣左右滑動的時候，導(dǎo)航欄可以跟著滑動。通信方式我們采用redux

暫時先用mock數(shù)據(jù)模擬數(shù)據(jù)

目錄結(jié)構(gòu) 
├── src                      
│   ├── pages                    // 頁面
│   ├── components               // 組件
│   ├── store                    // redux數(shù)據(jù)源

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/109976.html

相關(guān)文章

  • 前端筆試題面試題記錄（下）

    摘要：前言接上篇前端筆試題面試題記錄上。默認(rèn)值，不脫離文檔流，，，，等屬性不生效。。不脫離文檔流，依據(jù)自身位置進(jìn)行偏離，當(dāng)子元素設(shè)置，將依據(jù)它進(jìn)行偏離。。 前言 接上篇前端筆試題面試題記錄（上）。趁清明小長假，把上篇剩下的部分也寫一下，因為最近比較忙這篇已經(jīng)拖了很久了?，F(xiàn)在剛剛開始銀四了，應(yīng)該還是有些小伙伴在找工作，時間還不算太晚，希望本篇可以幫到這些小伙伴。 個人博客了解一下：obkoro...

    Lin_YT 評論0 收藏0

  • 前端筆試題面試題記錄（下）

    摘要：前言接上篇前端筆試題面試題記錄上。默認(rèn)值，不脫離文檔流，，，，等屬性不生效。。不脫離文檔流，依據(jù)自身位置進(jìn)行偏離，當(dāng)子元素設(shè)置，將依據(jù)它進(jìn)行偏離。。 前言 接上篇前端筆試題面試題記錄（上）。趁清明小長假，把上篇剩下的部分也寫一下，因為最近比較忙這篇已經(jīng)拖了很久了。現(xiàn)在剛剛開始銀四了，應(yīng)該還是有些小伙伴在找工作，時間還不算太晚，希望本篇可以幫到這些小伙伴。 個人博客了解一下：obkoro...

    suemi 評論0 收藏0

  • 筆試題之Event Loop終極篇

    摘要：下面開始分析開頭的代碼第一輪事件循環(huán)流程整體作為第一個宏任務(wù)進(jìn)入主線程，遇到，輸出遇到函數(shù)聲明，聲明暫時不用管遇到，其回調(diào)函數(shù)被分發(fā)到微任務(wù)中。我們記為遇到，其回調(diào)函數(shù)被分發(fā)到宏任務(wù)中。 先上一道常見的筆試題 console.log(1); async function async1() { console.log(2); await async2(); con...

    niceforbear 評論0 收藏0

  • 【手把手帶你刷好題】——21.一道筆試題（非力扣）

    摘要：前言今天是刷題打卡第天可能有鐵汁會問，為什么變成刷好題，而不是刷了呢因為最近筆者遇到很多經(jīng)典的筆試題，想著記錄下來，方便大家和自己學(xué)習(xí)，所以今后筆者會在標(biāo)題上注明是不是力扣題。 【前言】 今天是刷題打卡第21天！ 可能有鐵汁會問，為什么變成刷好題， 而不是刷LeetCode 了呢？因為...

    騫諱護(hù) 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<