124 lines
11 KiB
Plaintext
124 lines
11 KiB
Plaintext
---
|
||
title: 用户界面编码面试
|
||
description: 面试时的最佳实践、需要了解的重要概念以及需要做的关键实践问题
|
||
seo_title: 用户界面编码问题 | 如何准备
|
||
seo_description: 准备 UI 面试问题的指南，包括面试最佳实践、要准备的重要概念和最佳实践问题
|
||
social_title: 破解用户界面问题 | 前端面试手册
|
||
---
|
||
|
||
用户界面编码面试将涉及候选人编写 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
|
||
* 您是否可以执行代码并预览 UI
|
||
* 什么是最新支持的 JavaScript 语法和语言特性？
|
||
* 您是否可以事先安装依赖项
|
||
2. **自我介绍**：在一分钟内进行自我介绍。除非被要求，否则不要超过这个时间，否则您可能没有足够的时间来编码。
|
||
3. **澄清问题**：收到问题后，提出澄清问题。澄清以下内容：
|
||
* 您可以使用最新的 JavaScript 语法吗？
|
||
* 浏览器支持，因为这将影响您可以使用哪些浏览器 API
|
||
4. **管理复杂性**：将问题分解为相互构建的阶段/里程碑。将此分解传达给您的面试官。与编码面试不同，用户界面编码面试的重点通常在于组件状态和 API，而不是复杂的数据结构和算法
|
||
5. **开始编码**：编写您的解决方案，并在编码时向您的面试官解释您的代码
|
||
* 在可能的情况下，在添加每个里程碑/功能后在浏览器中测试您的代码，而不仅仅是在最后
|
||
* 参考[用户界面问题备忘单](/front-end-interview-playbook/user-interface-questions-cheatsheet)，了解用户界面编码面试期间需要注意的事项列表
|
||
6. **检查您的代码**：编码后，通读您的代码一次，并尝试发现基本错误，例如拼写错误、在使用变量之前初始化它们、不正确地使用 API 等。
|
||
7. **测试**：概述一些基本测试用例和一些边缘情况。使用这些用例测试您的代码，并确定您的代码是否通过了它们。如果失败，请调试问题并修复它们
|
||
8. **权衡**：解释您所做的任何权衡、您明确未处理的案例以及如果您有更多时间将如何改进代码
|
||
9. **后续行动**：面试可能不会在这里结束，面试官可能会就此问题向您提出后续问题或给您另一个问题。为他们做好准备
|
||
|
||
## 如何准备用户界面编码面试
|
||
|
||
1. **核心概念**：熟悉下面 [重要概念](#important-concepts) 部分的主题。 [测验部分](/front-end-interview-playbook/quiz) 也可以作为一个好的开始，因为在编码过程中，你可能会被问到这些概念的测验问题。
|
||
2. **练习编写 UI**：最好学习如何使用 Vanilla JavaScript 和你选择的 UI 框架来构建 UI。 大多数公司都允许使用 JavaScript UI 框架，但有些公司（例如 Google）强制要求你只能使用 Vanilla JavaScript
|
||
* **Vanilla JavaScript**：学习 DOM 操作 API。 至少你应该知道如何创建新的 DOM 元素，向它们添加类/属性，以及添加子元素。 如果你来自 [jQuery](https://jquery.com/) 背景，请查看 [你可能不需要 jQuery](https://youmightnotneedjquery.com)，这是一个网站，向你展示如何在 Vanilla JavaScript 中完成常见的 jQuery 操作。 你会惊喜地发现，使用现代浏览器 API 已经不再需要 jQuery 了。
|
||
* **JavaScript UI 框架**：熟悉你选择的 UI 框架。 坚持使用你最熟悉的框架。 没有必要，也可能没有足够的时间来学习新的框架。 如果你刚接触 JavaScript UI 框架，[React](https://react.dev/) 将是我们的推荐，因为它是目前构建 UI 最流行的库/框架，也是大多数公司在招聘前端工程师时所寻找的。
|
||
3. **CSS**：熟悉在面试条件下编写 CSS（小问题，不需要编写那么多 CSS）：
|
||
* **编写 Vanilla CSS**：学习编写 CSS，不依赖于 Sass/Less 等预处理器。 并非所有编码环境都允许使用处理器，并且面试问题可能很小，实际上并没有从 CSS 预处理器带来的功能中受益。 CSS 处理器最有用的功能是使用变量，这可以通过 CSS 自定义属性（CSS 变量）本地获得。
|
||
* **采用 CSS 命名约定**：考虑在编写类时采用 CSS 命名方法，例如 [Block Element Modifier](https://getbem.com)。
|
||
4. **深入研究**：阅读我们的用户界面编码深入研究指南：
|
||
* [用户界面问题备忘单](/front-end-interview-playbook/user-interface-questions-cheatsheet)
|
||
* [用户界面组件 API 设计原则](/front-end-interview-playbook/user-interface-components-api-design-principles)
|
||
5. **更多练习**：尝试 [GFE 75](/interviews/gfe75) 或选择一个 [学习计划](/interviews/study-plans) 并练习为所选学习计划推荐的 [用户界面编码问题](/questions/formats/ui-coding)。
|
||
* 花费大致相等的时间来练习构建 UI 组件和构建应用程序/游戏。 两者同样重要。
|
||
|
||
## 重要概念
|
||
|
||
熟悉这些 Web 开发概念：
|
||
|
||
| 类别 | 重要主题 |
|
||
| --- | --- |
|
||
| 数据结构 | 数组、映射、堆栈、树、集合 |
|
||
| 软件工程 | 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、网络、性能
|
||
* **沟通**：提问以澄清细节，并清楚地解释自己的方法和考虑因素
|
||
* **验证**：确定各种场景以测试代码，包括边缘情况。 能够诊断和修复出现的任何问题
|
||
|
||
## 最佳实践问题
|
||
|
||
根据经验，最适合练习的 UI 面试问题，由频率和涵盖的重要概念决定，是：
|
||
|
||
* [待办事项列表](/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/data-table)
|
||
* [打地鼠](/questions/user-interface/whack-a-mole)
|
||
* [井字棋](/questions/user-interface/tic-tac-toe)
|
||
* [标签页](/questions/user-interface/tabs)
|
||
* [图片轮播](/questions/user-interface/image-carousel)
|
||
* [模态对话框](/questions/user-interface/modal-dialog)
|
||
* 自动完成
|
||
* 下拉菜单
|
||
|
||
GreatFrontEnd 有一个 [全面的用户界面编码问题列表](/questions/formats/ui-coding)，你可以在你选择的框架中练习（目前支持 Vanilla JavaScript 和 [React](https://react.dev/)）。 我们还提供了手动测试用例，你可以根据这些用例测试你的代码，以验证由前 FAANG 高级工程师编写的各种 JavaScript UI 框架的正确性和解决方案。 UI 问题不提供自动化测试用例，因为它们往往与实现相关联，并且难以通过自动化测试进行准确测试。 此外，在面试期间，你可能需要自己测试你的 UI。
|
||
|
||
GreatFrontEnd 的许多编码问题也被分解为阶段，这些阶段会逐渐变得更难。 在面试中，你的面试官可能只会明确要求基本功能。 但是，在你完成基本功能后，你可以主动添加更多功能以改进基本版本并处理更多边缘情况。 一个被分解成阶段的问题的例子：
|
||
|
||
1. [手风琴](/questions/user-interface/accordion)：构建一个基本的、侧重于渲染和显示/隐藏功能的手风琴
|
||
2. [手风琴 II](/questions/user-interface/accordion-ii)：构建一个具有改进的可访问性的手风琴，该手风琴具有正确的 ARIA 角色、状态和属性
|
||
3. [手风琴 III](/questions/user-interface/accordion-iii)：构建一个完全可访问的手风琴，该手风琴根据 ARIA 规范具有键盘支持
|
||
|
||
构建基本的手风琴组件可能让你通过面试，但掌握可访问性方面将帮助你获得更多分数，并可能让你达到高级水平。
|
||
|
||
请注意，我们在某些问题中故意含糊不清，并且没有在问题描述中预先呈现完整的需求。 但是，我们将在解决方案中尽可能多地涵盖内容。 在阅读解决方案时，你可能会感到沮丧，因为你错过了一些东西，但这可以训练你提前思考并考虑在处理解决方案时需要注意的可能领域。 最好在练习期间发现，而不是在实际面试期间。
|