118 lines
10 KiB
Plaintext
118 lines
10 KiB
Plaintext
---
|
||
title: 前端面试界面编码问题
|
||
description: 准备前端/网络开发人员面试中的用户界面问题的指南
|
||
---
|
||
|
||
用户界面编码面试将涉及候选人编写 HTML、CSS 和 JavaScript。 在我们看来，这对于评估前端工程师的技能至关重要，而越来越多的公司正转向要求候选人在面试期间编写用户界面。
|
||
|
||
要求候选人编码的用户界面可以范围从非常小的 UI 组件到更复杂的客户端产品，例如小型应用程序和游戏。
|
||
|
||
## 例子
|
||
|
||
### 用户界面组件/小部件/布局
|
||
|
||
- 用户界面组件/小部件/布局组件：[手风琴](/questions/user-interface/accordion)、[选项卡](/questions/user-interface/tabs)、[星级评分小部件](/questions/user-interface/star-rating)、[推特](/questions/user-interface/tweet)、图片轮播。
|
||
- 小部件：[数字时钟](/questions/user-interface/digital-clock)、[模拟时钟](/questions/user-interface/analog-clock)。
|
||
- 页面部分：[注册表单](/questions/user-interface/signup-form)、[圣杯](/questions/user-interface/holy-grail)
|
||
|
||
### 应用程序/游戏
|
||
|
||
针对应用程序/游戏问题的时间通常比组件/小部件更长。 根据问题的复杂程度，您可能需要花上半个小时甚至一个小时来完成问题，特别是如果您被要求构建游戏。
|
||
|
||
- 应用程序：[待办事项列表](/questions/user-interface/todo-list)、[秒表](/questions/user-interface/stopwatch)、[温度转换器](/questions/user-interface/temperature-converter)。
|
||
- 游戏：[井字游戏](/questions/user-interface/tic-tac-toe)、[捉地鼠游戏](/questions/user-interface/whack-a-mole)、贪吃蛇、俄罗斯方块、扫雷、四连棋。
|
||
|
||
请注意，大多数游戏将是基于 2D 网格的游戏。 请确保您知道如何在 HTML 和 CSS 中创建网格布局！
|
||
|
||
## 在用户界面编码面试期间需要做的事情
|
||
|
||
用户界面编码面试与非前端编码面试有许多共性。 一般来说，你应该：
|
||
|
||
1. 了解您所编码的平台并熟悉编码环境：
|
||
- 是否使用本地 IDE 或在线 IDE。 如果使用本地 IDE，是否使用自己的笔记本电脑？
|
||
- 支持的编辑器快捷键。
|
||
- 是否可以使用 JavaScript 库/框架或必须使用原生 JavaScript。
|
||
- 是否可以执行代码并预览用户界面。
|
||
- 最新支持的 JavaScript 语法和语言特性是什么？
|
||
- 是否可以预先安装依赖项。
|
||
2. 在一分钟内进行自我介绍。 除非受到要求，否则不要花费更长时间，否则您可能没有足够的时间来编码。
|
||
3. 在收到问题时询问澄清问题。 澄清以下内容：
|
||
- 是否可以使用最新的 JavaScript 语法？
|
||
- 浏览器支持，因为这将影响您可以使用的浏览器 API。
|
||
4. 将问题分解为不同的阶段/里程碑。 将此分解通知面试官。 与编码面试不同，用户界面编码面试的重点通常在于组件状态和 API 上，而不是复杂的数据结构和算法。
|
||
5. 使用这些用例测试您的代码，并确定您的代码是否通过这些用例。
|
||
- 在添加每个里程碑/功能后，尽可能在浏览器中测试您的代码，而不是仅在最后进行测试。
|
||
- 请参阅[用户界面问题备忘单](/front-end-interview-guidebook/user-interface-questions-cheatsheet)，了解需要注意哪些方面在用户界面编码面试期间。
|
||
6. 在编码后，阅读您的代码一次，尝试找出基本错误，例如拼写错误、在初始化变量之前使用变量、错误使用 API 等。
|
||
7. 概述一些基本的测试用例和一些边缘情况。 使用这些用例测试您的代码，并确定您的代码是否通过这些用例。 如果失败，请调试问题并修复问题。
|
||
8. 解释您所做的折衷、您明确未处理的情况以及如何在有更多时间的情况下改进代码。
|
||
9. 面试可能不会在这里结束，面试官可能会对这一问题或其他问题有跟进问题。 要为它们做好准备。
|
||
|
||
## 如何准备用户界面编码面试
|
||
|
||
1. 熟悉“重要概念”下的主题。 [测验部分](/front-end-interview-guidebook/quiz)也可能是一个好的开始，因为您可能会在形式上的测验问题中被问及这些概念。
|
||
2. 最好学习如何在原生 JavaScript 和首选的 UI 框架中构建 UI。 大多数公司将允许使用 JavaScript UI 框架，但某些公司（例如 Google）强制要求仅使用原生 JavaScript。
|
||
- **原生 JavaScript**：学习 DOM 操作 API。 您至少应该知道如何创建新的 DOM 元素，在其中添加类/属性，并添加子元素。 如果您来自 [jQuery](https://jquery.com/) 背景，请查看 [You might not need jQuery](https://youmightnotneedjquery.com)，这是一个网站，显示您如何在原生 JavaScript 中实现常见的 jQuery 操作。 你会惊喜地发现，使用现代浏览器 API，实际上并不需要 jQuery。
|
||
- **JavaScript UI 框架**：熟悉首选的 UI 框架。 坚持您最熟悉的框架即可。 没有必要也可能没有足够的时间学习新的框架。 如果您是 JavaScript UI 框架的新手，我们将推荐 [React](https://reactjs.org/)，因为它是目前构建 UI 的最流行的库/框架，是大多数公司在招聘前端工程师时寻找的最受欢迎的语言。
|
||
3. 熟悉在面试条件下编写 CSS（不需要编写太多的 CSS 的小问题）：
|
||
- **编写原生 CSS**：学习如何在没有预处理器（例如 Sass/Less）的情况下编写 CSS。 不是所有的编码环境都将允许使用处理器，并且面试问题可能很小，不会真正受益于 CSS 预处理器带来的功能。 CSS 处理器最有用的功能是使用变量，可通过 CSS 自定义属性（CSS 变量）本地提供。
|
||
- **采用 CSS 命名约定**：在编写类时，请考虑采用 CSS 命名方法论，例如 [块元素修饰符](https://getbem.com)。
|
||
4. 阅读我们的用户界面编码深入指南：
|
||
- [用户界面问题备忘单](/front-end-interview-guidebook/user-interface-questions-cheatsheet)
|
||
- [用户界面组件 API 设计原则](/front-end-interview-guidebook/user-interface-components-api-design-principles)
|
||
5. 选择一个[学习计划](/get-started)，并练习推荐的[用户界面编码问题](/prepare/coding)。
|
||
- 在构建 UI 组件和构建应用程序/游戏方面，花费大致相等的时间。 两者同样重要。
|
||
|
||
## 重要概念
|
||
|
||
| 类别 | 重要主题 |
|
||
| --- | --- |
|
||
| 数据结构 | 数组、映射、栈、树、集合 |
|
||
| 软件工程 | SOLID 原则、设计模式、模型 - 视图 - 控制器 |
|
||
| HTML | 语义 HTML、表单验证、表单提交 |
|
||
| CSS | 盒模型、选择器、特异性、定位、单位、Flexbox、Grid、CSS 自定义属性（变量） |
|
||
| JavaScript | 闭包、回调、`Promise`、`async`/`await`、变长参数处理 |
|
||
| DOM | DOM 遍历、DOM 创建、DOM 操作、访问元素/节点属性、事件委托 |
|
||
| 运行时 API | 计时器（`setTimeout()`、`setInterval()`）、网络（Ajax、`fetch()`） |
|
||
| 可访问性 | ARIA 角色、状态和属性、键盘交互 |
|
||
|
||
## 用户界面编码面试评分标准
|
||
|
||
用户界面编码面试与 JavaScript 编码面试具有类似的评分标准，因为两者都涉及前端领域的编码。 然而，用户界面编码问题将更加强调领域专业知识和各种前端主题。
|
||
|
||
- **问题解决能力**：使用系统性和逻辑性的方法来理解和解决问题。 将问题分解为更小的独立问题。 评估不同方法及其权衡。
|
||
- **软件工程基础**：熟悉数据结构、算法、运行时复杂度分析、使用设计模式、使用干净的抽象设计解决方案。
|
||
- **领域专业知识**：了解前端领域及相关语言：浏览器（DOM 和 DOM API）、HTML、CSS、JavaScript、用户体验、可访问性、i18n、网络、性能。
|
||
- **交流**：询问澄清细节并清楚地解释自己的方法和考虑因素。
|
||
- **验证**：确定各种测试代码的场景，包括边缘情况。 能够诊断和修复出现的任何问题。
|
||
|
||
## 最佳实践问题
|
||
|
||
从经验而言，最佳用户界面面试问题将根据频率和涉及重要概念来确定：
|
||
|
||
- [待办事项列表](/questions/user-interface/todo-list)
|
||
- [注册表单](/questions/user-interface/signup-form)
|
||
- [温度转换器](/questions/user-interface/temperature-converter)
|
||
- [进度条](/questions/user-interface/progress-bar)
|
||
- [模拟时钟](/questions/user-interface/analog-clock)
|
||
- [求职信息板](/questions/user-interface/job-board)
|
||
- [捉地鼠游戏](/questions/user-interface/whack-a-mole)
|
||
- [井字游戏](/questions/user-interface/tic-tac-toe)
|
||
- [选项卡](/questions/user-interface/tabs)
|
||
- 图片轮播
|
||
- 自动完成
|
||
- 下拉菜单
|
||
- 模态框
|
||
|
||
GreatFrontEnd 提供[广泛的用户界面编码问题列表](/prepare/coding)，您可以在首选的框架中进行练习（目前支持原生 JavaScript 和 [React](https://reactjs.org/)）。 我们还提供了您可以使用各种 JavaScript UI 框架编写解决方案的测试用例，由前 FAANG 高级工程师编写。 UI 问题不提供自动化测试用例，因为它们往往与实现耦合，并且自动化测试很难准确测试它们。 此外，在面试中，您可能需要自己测试您的 UI。
|
||
|
||
GreatFrontEnd 的许多编码问题也分阶段，逐渐变得更加困难。 在面试中，您的面试官可能仅显式要求基本功能。 然而，在完成基本功能之后，您可以采取主动措施，添加更多功能以改进基本版本并处理更多的边缘情况。 阶段划分的一个例子：
|
||
|
||
1. [手风琴](/questions/user-interface/accordion)：构建一个基本的手风琴，重点放在渲染和显示/隐藏功能上。
|
||
2. [手风琴 II](/questions/user-interface/accordion-ii)：构建一个可访问性更好的手风琴，具有正确的 ARIA 角色、状态和属性。
|
||
3. [手风琴 III](/questions/user-interface/accordion-iii)：构建一个完全可访问的手风琴，具有 ARIA 规范的键盘支持。
|
||
|
||
构建基本的手风琴组件可能会让您通过面试，但掌握可访问性方面将有助于您获得更多分数，可能会使您达到高级水平。
|
||
|
||
请注意，我们在某些问题上有意模糊，没有在问题描述中提供完整的要求。 但是，我们将在解决方案中尽可能涵盖尽可能多的内容。 在阅读解决方案时，您可能会感到沮丧，因为您已经错过了一些东西，但是这可以训练您提前考虑并考虑在解决方案上需要注意的可能领域。 在练习期间发现比在实际面试中发现要好。
|