Skip to content

前端访谈中的用户界面编码

原文：https://www.frontendinterviewhandbook.com/coding/build-front-end-user-interfaces/

许多前端工程师花费大量时间构建 UI，构建 UI 组件是评估某人对前端三个最大方面(HTML、JavaScript、CSS)熟悉程度的好方法。

问这种问题的公司通常会要求应聘者用以下三种方式之一进行编码:

  • 带预览功能的在线编辑器:你可以在浏览器中编写 HTML、CSS、JavaScript，并看到页面的即时预览。常用的平台有 CodePen 和 CodeSandbox ，
  • 没有预览的在线编辑器:与上面类似，但是你看不到页面的任何视觉输出。一个常见的平台是 CoderPad 。过去，谷歌使用谷歌文档😱。
  • BYOE(自带环境):考生自带开发环境/笔记本电脑，可以自由选择是使用自己的编辑器进行本地开发，还是使用 CodePen 或 CodeSandbox 等在线环境。这是对候选人有利的最理想的情况，但通常只在现场进行。您通常可以使用 JavaScript 框架/库，在这种情况下，建议您使用工具来帮助您搭建一个全新的应用程序，您可以立即开始编码(例如create-react-app、vue-cli)。你不想在面试中花时间做不必要的准备工作，因为这不会给你的面试官额外的有用信号。
  • 白板:考生要把所有需要的 HTML，JS，CSS 都写在白板上。没有预览，没有自动完成，没有在线文档来帮助你；你完全靠自己了。到目前为止，脸书和谷歌是仅有的两家让候选人在前端面试中写在白板上的公司。

例题

  • 成分
  • 应用程序
    • 可排序的数据表(带有过滤扩展)
    • 所有列表
    • 看板
  • 比赛
    • Tic-tac-toe
    • 打地鼠
    • 沃尔多
    • 俄罗斯方块(高级)
    • 蛇(高级)

Practice questions on Great Front End

不确定如何开始？大前端有前端面试学习计划和一个编码题的庞大题库。今天就开始练习吧！

注意事项

完成问题后(甚至开始前)，思考这些潜在的问题(如果相关的话)。你可能需要也可能不需要处理它们，所以你可以在开始之前和面试官澄清一下，这样你就不会写太多/太少的代码。

前端最佳实践

  • 避免编写全局变量。将你的代码包装在一个生命中，不要污染全局范围。
  • 如果您需要在页面上有该组件的多个实例，该怎么办？
    • 您的代码能让您做到这一点吗？
    • 你是否使用了任何全局变量使你很难做到这一点？
    • 在同一个页面上有多个组件会互相影响吗？他们应该是独立的！
  • 你有一个方便的 API 来实例化带有可配置选项的独立组件吗？在 React 出现之前，老派的 jQuery UI 组件就是很好的例子。

性能和可扩展性

您的组件是否可扩展(延迟、性能、UI、UX 等)？

  • 网络退东西时间太长怎么办？网速慢怎么测试？提示:Chrome Devtools 网络标签。
  • 字符串太长怎么办？提示:CSS word-break属性。
  • 图像太大怎么办？
  • 组件可以包含任意数量的子项吗？示例:支持照片库组件中灵活数量的缩略图或选项卡导航组件中的项目。
  • 如果这些项目太少或太多，布局会变得混乱吗？
    • 物品太多怎么办？提示:设置最大高度或分页。
    • 如果没有项目，你会显示什么？提示:显示一个空状态，表示没有内容。不要显示任何内容。
  • 如果页面上的元素太多，性能会受到什么影响？你是怎么解决的？提示:虚拟列表
  • 您是否硬编码了任何值，使得将来很难扩展到不断变化的需求？你设计了可扩展性吗？

网络请求

  • 组件是否处理网络/异步请求中的竞争条件？例如，在返回对先前请求的响应之前，启动新的网络请求。
  • 如果请求超时或出错怎么办？如何优雅地从中恢复？
  • 如何提高组件的性能？你能利用缓存、延迟加载、预取/预加载吗？
  • 如果需要加载大量数据/图像怎么办？你能延迟加载它们吗？您能批量获取数据以减少 API 端点的垃圾邮件吗？

用户体验

  • 该组件是移动友好的吗？该组件能适应不同的屏幕宽度吗？如何让它变得对移动设备友好？
  • 该组件容易安装吗？如何改变设计来迎合 i18n？你的组件支持 RTL 语言吗？
  • 您的组件是否存在任何潜在的 UX/可访问性(a11y)问题？
  • 有哪些常见的可访问性技术和陷阱？
  • 您可以使用哪些工具来检查可访问性？
  • 如果你不熟悉 a11y，你可能没有太多时间成为 a11y 的专家。你至少可以承认 a11y 中的知识缺口，并尝试将 a11y 纳入你的答案中。你至少应该了解基本的 a11y 实践，如文本大小、颜色对比、可聚焦元素、标签聚焦顺序等。a11y 知识是初级工程师和高级工程师之间的区别因素之一。

安全

  • XSS 的弱点。每当你需要呈现用户输入时，面试官都会特别留意这一点。你几乎不需要使用.innerHTML或者 jQuery 的$.html()。有.textContent和$.text()。如果您必须呈现原始 HTML，请确保首先对内容进行转义。
  • 显示在 URL 中的用户输入也必须首先进行编码，否则也有可能造成损害。

未来

最后，提到如果你有更多的时间，并且正在编写你需要维护的产品代码，你会如何做不同的事情。也许使用 Sass 而不是 CSS，使用 React 而不是 jQuery 以获得更好的可维护性，使用 Babel 为旧浏览器编译代码，使组件移动友好并在不同的屏幕宽度上测试，添加键盘快捷键，等等。

回到顶部