成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

記一道騰訊前端筆試題

孫吉亮 / 2961人閱讀

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

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

2. 附件 

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

Tab部分 

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


從用戶體驗(yàn)上來看，我們還喜歡在切換的時(shí)候，底下的Tab滑動(dòng)條不是瞬變的，而是隨著頁面一起滑動(dòng)。


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

列表部分 

重點(diǎn)在于長列表處理，考察懶加載、下拉加載



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

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

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

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

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

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109976.html

相關(guān)文章

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

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

    Lin_YT 評(píng)論0 收藏0

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

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

    suemi 評(píng)論0 收藏0

  • 筆試題之Event Loop終極篇

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

    niceforbear 評(píng)論0 收藏0

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

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

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

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<