Skip to content

前端系统设计面试-用户界面组件

原文：https://www.frontendinterviewhandbook.com/front-end-system-design/ui-components/

例题

Read front end system design case studies

出色的前端向您展示如何通过前端系统设计指南和案例研究进行前端系统设计面试。今天就开始阅读吧！

框架

在系统设计面试中，候选人应该引导对话。这里有一个框架，你可以用它来给面试官一个大纲，告诉他你将要涵盖的内容。这个框架被称为 RADAD ，它由每一步的第一个字符组成。你可以把这个结构写在白板/在线编辑器上，这样你就不会忘记。

  1. R 需求澄清/调整——询问系统的需求。
  2. 一个架构——在相关的地方概述组件中子组件的架构。
  3. D ata 模型 -组件如何存储传递给它的任何数据？使用什么数据结构？
  4. A PI 设计——使用这个组件的 API 是什么？组件上允许哪些选项？
  5. Deep dive——用户体验(UX)、性能、可访问性(a11y)、国际化(i18n)、多设备支持、安全性

需求澄清

每一次系统设计面谈(即使对于非前端也是如此)都应该从需求收集/澄清关于问题的需求开始，这通常是故意留下的。建议您至少花几分钟时间来阐明这些要求。在明确需求之前，不要开始绘制架构！

幸运的是，组件有定义良好的范围，不会试图做太多的事情。您自己可能已经使用过这样的组件，并且可能知道您需要从这样的组件中得到什么。

一些注意事项:

  • 系统应该支持哪些设备？桌面网络、移动网络等
  • 用户访问系统的主要设备是什么？
  • 我们应该支持哪些浏览器？
  • 我们需要支持国际化吗？
  • 我们希望允许多少样式定制？

架构

前端面试的架构通常集中在客户端架构，而不是涉及数据库、负载平衡器和服务器的大规模分布式系统。

对于组件，列出其中存在的各种子组件，以及每个组件之间传递的数据。

让我们以图像轮播为例。图像转盘中的子组件包括:

  • 主图像-显示焦点照片的图像
  • 缩略图-下面更小的图像(会有缩略图吗？您只有在之前澄清需求时才会知道)
  • 图像存储-显示照片列表的客户端缓存

如果你有一个白板/在线绘图工具，画图表来说明实体和它们之间的关系也会很有帮助。当发生用户交互时，哪个子组件与哪个子组件进行通信。

Read front end system design case studies

出色的前端向您展示如何通过前端系统设计指南和案例研究进行前端系统设计面试。今天就开始阅读吧！

数据模型

组件的数据模型将引用组件状态。大多数使用过 React、Angular、Vue、Svelte 等前端 UI 库/框架的前端开发人员应该对状态的概念很熟悉。在所有这些库/框架中，状态是一个常见的概念。

决定将哪些数据放入状态对于做好这一部分至关重要。在决定什么进入组件状态时，需要考虑几个因素:

  • 在组件的生命周期中，状态可以随着时间的推移而改变，这通常是用户交互的结果。
  • 每个组件应该保持它自己的独立状态，这允许组件的多个实例共存于一个页面上。组件实例的状态不应该影响另一个实例的状态。
  • 状态中的字段越少，组件越容易推理(读取/理解)。我们应该努力减少所需的国家数量。如果一个组件使用一个可以从另一个状态中派生出来的值，那么这个值很可能不属于这个状态。例如，如果您的组件正在呈现一个项目列表，并且您希望在没有项目要呈现时显示一条消息，那么就不应该有额外的isEmpty状态，因为它可以从items的长度中派生出来。
  • 如果一个组件有多个子组件，最好是能够将状态合并到顶层，而其余的组件是纯的和无状态的。

API 设计

组件背后的关键思想是让它们被重用和抽象复杂性。好的组件设计得很好，可以在多种场景中重用，用户在使用它们之前不必知道它们内部是如何工作的。对于组件，API 指的是组件开发人员向其他开发人员公开以指定的配置选项。

  • 您允许组件有哪些配置选项？(props in React)。什么是合理的违约？
  • 遵循打开-关闭原则 -组件应该为扩展而打开，为修改而关闭。
  • 如果你的组件是一个 UI 库的一部分，它不关心外观，把样式留给用户，那么在设计道具时要格外小心，允许用户定制组件的外观和感觉。在 React 中有几种方法可以做到这一点:
    • Composition - Props 接受 React 组件，这也促进了代码重用。
    • 渲染道具是组件用来知道渲染什么的功能道具。它还有助于重用行为，而不必担心外观。
    • className或styleprops——允许用户向内部 DOM 元素注入类名和/或样式属性。这可能会产生负面影响，但仍然是允许用户定制组件外观的常用方法。
  • 可能的配置选项:
    • 生命周期/事件挂钩- onClick、onChange、onBlur、onFocus等。

Read front end system design case studies

出色的前端向您展示如何通过前端系统设计指南和案例研究进行前端系统设计面试。今天就开始阅读吧！

深潜

在了解了组件的基础知识之后，我们可以深入到组件可能需要特别关注的特定领域。请注意，几乎肯定没有足够的时间来涵盖每个领域，并且不是每个领域都与手边的组件非常相关。

表现出对这些领域的了解并能够深入研究这些领域是高级前端工程师的特征。

用户体验(UX)

UX 可能不属于工程，但良好的前端工程师有很好的理解 UX 和建设与伟大的 UX 用户界面。有太多的 UX 实践需要注意，但最常见的/容易实现的是:

  • 向用户反映组件的状态——如果有未决的后台请求，显示一个微调器。如果有错误，一定要显示出来，而不是静静地失败。
  • 如果列表中没有项目，则显示空状态，而不是不呈现任何内容。
  • 破坏性的行动应该有一个确认步骤，尤其是不可逆的。
  • 如果交互式元素触发异步请求，则禁用它们！防止在意外双击的情况下重复触发事件(对于有运动障碍的人来说是可能的)。
  • 如果涉及到搜索输入，每次击键都不应该触发网络请求。
  • 处理极端情况
    • 字符串可以很长/很短，在这两种情况下你的 UI 都不应该看起来很奇怪。对于长字符串，它们的内容可以被截断并隐藏在“查看更多”按钮后面。
    • 如果一个组件中有很多条目要显示，它们不应该同时显示在屏幕上，这样会使页面变得非常长/宽。对项目进行分页或将它们包含在具有最大宽度/高度的容器中。
  • 键盘友好性——这包括确保组件是键盘友好的
    • 添加快捷方式，使只使用键盘的用户更容易使用该组件
    • 确保元素可以聚焦，并且组件中的 tab 键顺序正确
  • 可访问性是 UX 的一部分，但将在后面的章节中讨论

性能

在前端，性能通常是指几件事——加载速度、UI 响应用户交互的速度、组件所需的内存空间(堆)。

  • 加载速度——组件包含的 JavaScript 越少，浏览器加载组件所需下载的 JavaScript 就越少，网络请求时间也就越短。模块化组件并允许用户仅下载其用例所需的必要 JavaScript 模块也很重要。
  • 对用户交互的响应
    • 如果用户交互导致显示必须通过网络加载的数据，则在用户交互和 UI 更新之间会有延迟。最小化延迟或完全消除延迟是提高响应能力的关键。
    • 浏览器中的 JavaScript 是单线程的。浏览器一次只能执行一行代码。当用户在页面上做一些事情时，组件需要做的工作(JavaScript 执行、DOM 更新)越少，组件更新 UI 以响应变化的速度就越快。
  • 内存空间——你的组件在页面上占用的内存越多，浏览器的运行速度就越慢，用户的体验也会变得迟钝。如果您的组件必须呈现数百/数千个项目(例如，转盘中的图像数量、选择器中的项目数量)，内存空间可能会变得很大。

优化提示

  • 只呈现屏幕上显示的内容——例如，在选择器中，即使列表可以包含数百个元素，也只向用户显示几个项目。将它们全部呈现在浏览器中会浪费处理能力和内存空间。我们可以利用一种叫做窗口/虚拟化的技术来模拟一个包含许多元素的列表，同时尽可能地只渲染少数元素，以使最终结果看起来好像没有进行优化(尤其是保留滚动高度)。点击阅读关于虚拟化的更多信息。
  • 惰性加载/只加载必要的数据——例如，在一个照片库组件中，一个用户可能有成百上千的照片，但是急切地加载所有的照片是不可行的。最有可能的是，用户不会在那个会话中浏览所有的内容。优化可以是只加载用户可能查看的内容，或者在视口内的内容(我们称之为“折叠之上”)。其余的照片可以按需加载，这会导致响应延迟，但下一篇技巧文章将帮助您解决这个问题。
  • 提前预加载/预取数据——例如，在一个图像轮播中，有太多的图像需要预先加载，优化可以是在用户仍在当前图像上时提前加载下一个图像，这样当用户单击“下一个”按钮时，就不需要网络延迟，因为下一个图像已经被加载了。这种技术也可以修改为加载接下来的 N 个图像，以处理用户快速连续点击“下一个”的情况。

Read front end system design case studies

出色的前端向您展示如何通过前端系统设计指南和案例研究进行前端系统设计面试。今天就开始阅读吧！

可达性(a11y)

易访问性(a11y)是指让尽可能多的人可以使用你的网站。

  • 颜色对比(例如色盲)
  • 键盘友好性(例如精细运动控制能力有限的人)
  • 视觉障碍(如失明)
  • 音频抄本(如聋人)

不是每个人都以同样的方式上网；有的人专门用屏幕阅读器和键盘(没有鼠标)！以下是在 UI 组件中实现 a11y 的一些基本技巧:

  • 前景色应该与背景色有足够的对比
  • 为语义使用正确的 HTML 标签，或者正确的aria-role属性
  • 可点击的项目应该有tabindex属性(以便它们是可聚焦的)和“光标:指针”样式来表示它们可以被点击
  • 图像应该有alt文本，它将被屏幕阅读器读出，并作为图像加载失败时的后备描述
  • 这有助于为非视觉用户不明显的元素提供上下文。例如，一个内部没有任何文本标签的图标按钮应该有一个aria-label属性，这样对于看不到图标的用户来说，意图就很清楚了

a11y 是最常被忽视的领域之一，因为大多数时候它们对开发人员来说是不可见的。展示 a11y 的知识并拥有创建易访问组件的技能肯定会给你带来好的影响。更多关于网页可访问性的阅读。

国际化(i18n)

国际化(i18n)是一种产品、应用程序或文档内容的设计和开发，它使文化、地区或语言不同的目标受众能够轻松地进行本地化。通常，组件不应该担心 i18n，除非在少数特定情况下:

  • 组件使用字符串-组件中使用的字符串不应该硬编码为特定的语言(例如，照片库组件控件中的“Prev”/“Next”)。字符串可以被指定为一个属性，默认为英文版本
  • 内容的顺序很重要——你的组件支持 RTL(从右到左)语言吗，比如阿拉伯语和希伯来语？

多设备支持

该组件有望在移动 web 上使用吗？移动设备有独特的限制——它们的硬件功能较弱，而且视窗尺寸较小。因此，可以用不同的方式来让组件在移动设备上更好地工作——有意识地努力:

  • 不要使用太多内存——使用太多内存会使设备运行速度变慢
  • 增加交互元素的点击量——手指可以更轻松地点击正确的元素

安全

大多数时候，组件不会暴露在安全漏洞之下，但这种情况仍然会发生。以下是您应该了解的更常见的安全漏洞:

  • XSS -你的组件容易受到跨站点脚本(XSS)的攻击吗？例如，您是否通过.innerHTML或dangerouslySetInnerHTML(特定于 React)呈现用户输入？
  • CSRF(跨站点请求伪造)
  • 点击劫持
  • T2rel=noopener

Read front end system design case studies

出色的前端向您展示如何通过前端系统设计指南和案例研究进行前端系统设计面试。今天就开始阅读吧！

回到顶部