分享几道我们面试前端的“真题”

2,959 阅读3分钟

最近更新了一下我们的面试题库,将三道比较基础但是有代表性的题目分享出来。

我们在设计面试题时一般会从一个实际需求出发,根据面试者思考的深入程度和擅长的知识领域不断地提出更进一步的问题。我们并不要求面试者要回答出每一个问题,而是希望在探讨的过程了解对方的工程习惯、解决问题的思路等特质。

十分欢迎大家就面试题进行讨论,如果对我们考察工程师的方式感到认可,并且希望和我们进行更多深入的交流,欢迎查看我们的职位描述:

职位描述

简历也可以直接发到我的邮箱(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 的场景,侧面考察工程经验。