分享幾道我們面試前端的“真題”

aryu發表於2019-02-28

最近更新了一下我們的面試題庫,將三道比較基礎但是有代表性的題目分享出來。

我們在設計面試題時一般會從一個實際需求出發,根據面試者思考的深入程度和擅長的知識領域不斷地提出更進一步的問題。我們並不要求面試者要回答出每一個問題,而是希望在探討的過程瞭解對方的工程習慣、解決問題的思路等特質。

十分歡迎大家就面試題進行討論,如果對我們考察工程師的方式感到認可,並且希望和我們進行更多深入的交流,歡迎檢視我們的職位描述:

職位描述

簡歷也可以直接發到我的郵箱(yanzhen#smartx.com,# 自行替換為 @)。

實現一個 Tabs 元件

主要針對過去使用 Vue 的開發者。

  1. 如何設計傳入的 props。
  2. 怎麼實現 tab content 可以是任意內容(字串、元件等),如果使用 v-html 實現需要說清利弊。
  3. 對基礎較好的看看是否能想到 dynamic component 和 render function 中解析 slot 的思路。
  4. 擴充到支援外部動態判斷點選 tab 後是否允許切換,考察 props 設計和對各種業務場景的抽象能力。
  5. 擴充到 Tab active 狀態和 vue-router 或 vuex 同步,考察對周邊生態的使用情況。
  6. 對需要考察 HTML 和 CSS 的情況,可以擴充到對應的 DOM 元素的語義化標籤的選擇以及一些樣式的實現方法。

實現一個倒數計時元件

適用 Vue、React、Angular 等元件化框架背景的開發者

  1. 基本功能實現,考察在生命週期的 hook 中是否正確的建立和回收定時器。
  2. 要在生命週期中共享定時器的 handler 一般選擇儲存在 this 上,考察是否能意識到 handler 與 render 無關不需要是響應式的,例如 React 中不要存在 state 裡。
  3. 設計一些 props 控制定時器的初始時間、計時間隔、對外事件等,考察元件設計和抽象能力。
  4. 擴充到基於 setInternal 的計時器是否準確,如果知道有阻塞的問題,進一步考察是否能想到用 requestAnimationFrame 實現更高精度的定時器。
  5. 擴充到 event loop 的相關理解。
  6. 擴充到是否能通過 mixin、HOC、React hooks 等形式實現一個無 DOM 實體的抽象倒數計時,與其它元件組合使用。

實現簡單的 Enum

主要針對有 Typescript 使用經驗的開發者

  1. 是否理解 Typescript 中的哪些特性是編譯期實現,哪些是執行時實現。
  2. 實現一個數字型別的 Enum,也需要實現 reverse mapping。
  3. 擴充到如何避免該 Enum 在執行時被修改,考察閉包、Object.defineProperty、Proxy 等思路。如果能夠想到以上思路,進一步討論為什麼 Typescript 只是簡單的使用物件模擬,考察對於通用型技術設計時的思考。
  4. 描述一下在業務場景中使用 Enum 的場景,側面考察工程經驗。

相關文章