前端系统设计问题类型

前端系统设计问题主要有两种：(1)应用和(2)用户界面组件。

应用

如上所述，为前端系统设计面试设计应用软件与一般的软件工程系统设计面试感觉类似，事实上，问题也高度相似。 然而，与其谈论分布式系统，不如关注客户端，讨论应用架构和客户端实现细节。

在当今时代，许多网站都是交互式的丰富应用程序，几乎可以实现许多桌面应用程序所能实现的功能。 如果您在网页上使用 Gmail、Facebook、YouTube、Google Calender，您已经使用了 Web 应用程序。 Web 应用往往是动态的，Web 应用中的导航通常不需要刷新整个页面，而是使用 JavaScript 获取下一页的远程数据，并动态更改内容和 URL。 由于 Web 应用是涉及多个模块的复杂软件，我们在软件工程课程中学到的常见应用架构，如模型-视图-控制器（MVC）、模型-视图-视图模型（MVVM），在构建 Web 应用时也同样适用。 React 是 Facebook 最流行的 JavaScript 库之一，用于构建交互式 Web 应用程序，许多 React Web 应用程序采用基于 Flux/Redux 的单向架构。

不同的应用有其独特的方面和谈话要点。 您必须将重点放在申请材料的独特之处，而不要花太多时间谈论适用于所有问题的一般性内容。 首先，设计高层架构，确定系统中的组件以及组件之间的 API。 然后深入研究与问题相关的几个方面，以及如何实施或优化这些方面。

实例

以下是前端系统设计面试中常见的应用问题列表，以及您应重点关注的领域：

用户界面组件

在现代前端开发中，通常使用组件库来构建应用程序。 一些流行的组件库您可能已经使用过，包括 jQuery UI（多么老派！）、Bootstrap、Material UI、Chakra UI 等。

前端工程师需要能够构建应用程序所需的各种用户界面组件。 有些用户界面组件很容易构建（例如文本、按钮、徽章等），而其他组件则可能要复杂得多（自动完成、下拉、模态等）。 大多数情况下，如果您被要求设计一个用户界面组件，它将属于后一类。

首先确定组件的子组件（例如，对于一个图片传送带，有图片、分页按钮、缩略图），定义组件的对外 API（组件应该接受哪些选项/道具），描述组件的内部状态、子组件之间的 API（如果相关），然后深入到性能、可访问性、用户体验、安全性等相关的优化和考虑。

您可能需要为以下一个或多个目的编写少量代码：

1. 描述组件层次结构。
2. 描述组件状态的形状。
3. 解释一些组件中的非平凡逻辑。

<ImageCarousel
  images={...}
  onPrev={...}
  onNext={...}
  layout="horizontal">
  <ImageCarouselImage style={...} />
  <ImageThumbnail onClick={...} />
</ImageCarousel>

自定义主题

您肯定需要为组件的用户（开发人员）设计一种自定义组件外观的方法。 请参阅前端面试指导手册的用户界面组件 API 设计原则部分，了解不同方法的概述和比较。

示例

在前端系统设计访谈中提出的用户界面组件示例：

• 设计一个自动完成组件
• 设计一个下拉菜单组件
• 设计一个可嵌入的投票小部件
• 设计一个图片轮播
• 设计一个模态组件
• 设计一个带排序和分页功能的数据表
• 设计一个日期选择器
• 设计一个多选组件

面试时该做什么？

既然您已经了解了前端系统设计面试中可能会问到的问题类型，那么该如何回答这些问题呢？ 我们提出了RADIO 框架，这是一种易于记忆的结构化方法，您可以用它来应对系统设计面试问题。