contents(zh-CN): update and replace broken links for frontend interview playbook (#484)
This commit is contained in:
DanielJames0302
GitHub
parent
7b12e4a351
commit
b4f0800d42
|
|
@ -114,4 +114,4 @@ description: 这是前端/网站开发者面试中准备算法编码问题的指
|
|||
|
||||
## 实践问题
|
||||
|
||||
目前，最好的练习算法问题的平台无疑是 LeetCode。 但是，GreatFrontEnd 提供一些[数据结构和算法的练习问题](/questions/js/coding/data-structures-algorithms)，在其中，您可以练习实现常见的数据结构（[堆栈](/questions/javascript/stack)、[队列](/questions/javascript/queue)）和算法（[二分查找](/questions/javascript/binary-search)、[归并排序](/questions/javascript/merge-sort)）等在 JavaScript 中的操作。
|
||||
目前，最好的练习算法问题的平台无疑是 LeetCode。 但是，GreatFrontEnd 提供一些[数据结构和算法的练习问题](/questions/javascript-interview-questions/algo-coding)，在其中，您可以练习实现常见的数据结构（[堆栈](/questions/algo/stack)、[队列](/questions/algo/queue)）和算法（[二分查找](/questions/algo/binary-search)、[归并排序](/questions/algo/merge-sort)）等在 JavaScript 中的操作。
|
||||
|
|
|
|||
|
|
@ -59,13 +59,13 @@ description: 准备前端/ Web开发人员面试中的编码问题——了解
|
|||
|
||||
请继续阅读每种编码面试类型的提示：
|
||||
|
||||
- [算法编码](/front-end-interview-guidebook/algorithms)
|
||||
- [JavaScript 编码](/front-end-interview-guidebook/javascript)
|
||||
- [用户界面编码](/front-end-interview-guidebook/user-interface)
|
||||
- [算法编码](/front-end-interview-playbook/algorithms)
|
||||
- [JavaScript 编码](/front-end-interview-playbook/javascript)
|
||||
- [用户界面编码](/front-end-interview-playbook/user-interface)
|
||||
|
||||
## 练习问题
|
||||
|
||||
GreatFrontEnd 有一个长列表的[编码问题](/prepare/coding)，您可以练习并花时间检查它们。
|
||||
GreatFrontEnd 有一个长列表的[编码问题](/questions)，您可以练习并花时间检查它们。
|
||||
|
||||
请注意，我们在某些问题中特意保持模糊，并没有提出完整的要求。 这是为了训练您提前思考并考虑在解决方案时可能需要注意哪些可能的事项。
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ description: 为前端/网站开发人员面试准备JavaScript问题的指南
|
|||
|
||||
1. 它传递 4 个参数给回调函数，包括 `index` 和 `this` ？
|
||||
2. 它保留稀疏数组中的“空”，即 `[1, 2, , 4].map(val => val * val) === [1, 4, , 16]`。
|
||||
3. `map`处理的元素范围在第一个调用*callbackfn*之前设置。 在调用 map 之后附加到数组中的元素将不会被*callbackfn*访问。 如果更改数组的现有元素，则将它们的值作为传递给*callbackfn*的值在`map`访问它们时。 来源：[Array.prototype.map ECMAScript 说明]（https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.prototype.map）
|
||||
3. `map`处理的元素范围在第一个调用*callbackfn*之前设置。 在调用 map 之后附加到数组中的元素将不会被*callbackfn*访问。 如果更改数组的现有元素，则将它们的值作为传递给*callbackfn*的值在`map`访问它们时。 来源：[Array.prototype.map ECMAScript 说明](https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.prototype.map)
|
||||
|
||||
您的实施不必处理所有这些情况，特别是数组突变的情况。 但是，如果您提到了这些情况，那么这是一个积极的信号。 您的实现越接近规范，您就会显得更加资深/有经验。
|
||||
|
||||
|
|
@ -66,8 +66,8 @@ JavaScript 编码面试与算法编码面试有许多相似之处。 一般来
|
|||
|
||||
## JavaScript 编码面试规则
|
||||
|
||||
1. 通过参考下面的“重要概念”熟悉 HTML、CSS、JavaScript 和 DOM 概念。 [测验部分](/front-end-interview-guidebook/quiz) 也可以是一个好的开始，因为您可能会以测验问题的形式被问到这些概念。
|
||||
2. 选择[学习计划](/get-started)并练习所选学习计划推荐的[JavaScript 编码问题](/questions/js/coding/utilities)。 在做问题的同时，也可以学习某个主题。
|
||||
1. 通过参考下面的“重要概念”熟悉 HTML、CSS、JavaScript 和 DOM 概念。 [测验部分](/front-end-interview-playbook/quiz) 也可以是一个好的开始，因为您可能会以测验问题的形式被问到这些概念。
|
||||
2. 选择[学习计划](/interviews/get-started)并练习所选学习计划推荐的[JavaScript 编码问题](/questions/javascript-interview-questions/javascript-functions)。 在做问题的同时，也可以学习某个主题。
|
||||
|
||||
## 重要概念
|
||||
|
||||
|
|
@ -114,6 +114,6 @@ JavaScript 编码面试类似于算法编码面试，应该采用相似的方法
|
|||
- [Deep Clone](/questions/javascript/deep-clone)
|
||||
- [Data Selection](/questions/javascript/data-selection)
|
||||
|
||||
GreatFrontEnd 有[全面的 JavaScript 编码问题列表](/questions/js/coding/utilities)，您可以练习。 还有可以运行您的代码以验证正确性的自动化测试用例，以及由前 FAANG 资深工程师编写的解决方案。
|
||||
GreatFrontEnd 有[全面的 JavaScript 编码问题列表](/questions/javascript-interview-questions/javascript-functions)，您可以练习。 还有可以运行您的代码以验证正确性的自动化测试用例，以及由前 FAANG 资深工程师编写的解决方案。
|
||||
|
||||
请注意，我们在某些问题中故意含糊不清，并没有在问题说明中全面介绍要求。 但是，我们将在解决方案中涵盖尽可能多的方面。 在阅读解决方案时，如果您发现错过了一些内容，可能会感到沮丧，但是这可以锻炼您的提前思考，并考虑在解决方案工作时需要注意哪些可能区域。 最好在练习期间找出，而不是在实际面试中发现。
|
||||
|
|
|
|||
|
|
@ -11,11 +11,11 @@ description: 前雇主的FAANG为前端/ Web开发人员面试提供了权威指
|
|||
|
||||
请不要担心！ GreatFrontEnd 旨在成为前端工程师通过一站式平台获得必要知识并进行前端面试的最佳资源。 在 GreatFrontEnd 上，读者可以：
|
||||
|
||||
1. 学习如何创建一个专门针对前端工程职位的[**精彩简历**](/front-end-interview-guidebook/resume)。
|
||||
1. 学习如何创建一个专门针对前端工程职位的[**精彩简历**](/front-end-interview-playbook/resume)。
|
||||
2. 学习适用于所有问题类型的**重要的前端概念和技术**。
|
||||
3. 准备最常见的**前端面试问题类型**（编码，系统设计，测验，行为）。
|
||||
4. [**练习问题**](/questions)，涵盖最常见的前端面试格式和由前 FAANG 高级工程师编写的**高质量解决方案**。
|
||||
5. 浏览建议的[**学习计划**](/get-started)，并采用**结构化准备方法**。
|
||||
5. 浏览建议的[**学习计划**](/interviews/get-started)，并采用**结构化准备方法**。
|
||||
|
||||
## 准备精彩简历
|
||||
|
||||
|
|
@ -23,7 +23,7 @@ description: 前雇主的FAANG为前端/ Web开发人员面试提供了权威指
|
|||
|
||||
如果您在申请工作时遇到了困难，即使拥有必要的资格，也可能是因为您的简历。 即使高素质的候选人可能也不知道如何有效地展示他们的成就在简历中，因此可能无法获得短名单。 需要记住的是，低资格并不总是不被选中的原因；有时只是因为呈现不良和未包含重要内容。 一旦您通过简历筛选流程，过去的成就就变得次要了，您的技术能力成为首要考虑因素，这可以通过学习和改进来实现。 因此，通过提交代表您的高水平的优秀简历，进入门槛是极其重要的。
|
||||
|
||||
虽然已有一些有关制作良好的软件工程简历的资源，例如[Tech Interview Handbook](https://www.techinterviewhandbook.org/resume/)和[FAANG Tech Leads 的简历手册](https://www.faangtechleads.com/resume/handbook)，但它们都是通用的，不是针对前端工程师的。 我们写了一些[如何为前端工程职位定制简历的技巧](/front-end-interview-guidebook/resume)。
|
||||
虽然已有一些有关制作良好的软件工程简历的资源，例如[Tech Interview Handbook](https://www.techinterviewhandbook.org/resume/)和[FAANG Tech Leads 的简历手册](https://www.faangtechleads.com/resume/handbook)，但它们都是通用的，不是针对前端工程师的。 我们写了一些[如何为前端工程职位定制简历的技巧](/front-end-interview-playbook/resume)。
|
||||
|
||||
## 按问题类型准备
|
||||
|
||||
|
|
@ -35,9 +35,9 @@ description: 前雇主的FAANG为前端/ Web开发人员面试提供了权威指
|
|||
|
||||
编码问题将涉及编写代码（搞定！）。 但您需要编写的代码以及您将编写代码的平台可能截然不同。 您可能会问到：
|
||||
|
||||
1. **算法编码**：解决棘手的算法问题，评估您对数据结构，算法和时间复杂度的理解。 [阅读算法编码面试](/front-end-interview-guidebook/algorithms)的相关内容。
|
||||
2. **JavaScript 编码**：在 JavaScript 中实现与前端领域相关且在前端开发过程中常用的函数或数据结构。 [阅读 JavaScript 编码面试的相关内容](/front-end-interview-guidebook/javascript)。
|
||||
3. **用户界面编码**：使用 HTML，CSS 和 JavaScript 构建用户界面（组件，小部件，应用程序），有时甚至包括使用 JavaScript 框架。 [阅读有关用户界面编码面试的相关内容](/front-end-interview-guidebook/user-interface)。
|
||||
1. **算法编码**：解决棘手的算法问题，评估您对数据结构，算法和时间复杂度的理解。 [阅读算法编码面试](/front-end-interview-playbook/algorithms)的相关内容。
|
||||
2. **JavaScript 编码**：在 JavaScript 中实现与前端领域相关且在前端开发过程中常用的函数或数据结构。 [阅读 JavaScript 编码面试的相关内容](/front-end-interview-playbook/javascript)。
|
||||
3. **用户界面编码**：使用 HTML，CSS 和 JavaScript 构建用户界面（组件，小部件，应用程序），有时甚至包括使用 JavaScript 框架。 [阅读有关用户界面编码面试的相关内容](/front-end-interview-playbook/user-interface)。
|
||||
|
||||
公司愈趋趋向使用领域特定的编程问题，而不是测试关于算法和数据结构的知识，因为前者对于评估前端工程工作所需的核心技能更为相关。
|
||||
|
||||
|
|
@ -53,7 +53,7 @@ description: 前雇主的FAANG为前端/ Web开发人员面试提供了权威指
|
|||
|
||||
大多数情况下，前端工程师将被要求设计客户端应用程序和复杂的用户界面组件，因为这些产品更相关于前端工程。
|
||||
|
||||
[了解关于前端系统设计的更多信息](/front-end-interview-guidebook/system-design)
|
||||
[了解关于前端系统设计的更多信息](/front-end-interview-playbook/system-design)
|
||||
|
||||
### 测验问题
|
||||
|
||||
|
|
@ -61,7 +61,7 @@ description: 前雇主的FAANG为前端/ Web开发人员面试提供了权威指
|
|||
|
||||
通常不会有整个面试环节只问测验问题，但它们可能会在其他面试环节中出现。
|
||||
|
||||
[阅读有关测验问题的更多信息](/front-end-interview-guidebook/quiz)。
|
||||
[阅读有关测验问题的更多信息](/front-end-interview-playbook/quiz)。
|
||||
|
||||
## 行为问题/面试
|
||||
|
||||
|
|
@ -69,7 +69,7 @@ description: 前雇主的FAANG为前端/ Web开发人员面试提供了权威指
|
|||
|
||||
行为面试背后的理念是，过去的行为和经验是了解某个人将来行为的良好指标，因此面试官将提出旨在让您描述您所面临的具体情况以及您如何应对它们的问题，以更好地了解您的个人能力。
|
||||
|
||||
行为面试是一个大型主题，我们[撰写了一个完整的指南](/behavioral-interview-guidebook)。
|
||||
行为面试是一个大型主题，我们[撰写了一个完整的指南](/behavioral-interview-playbook)。
|
||||
|
||||
## 典型的招聘流程
|
||||
|
||||
|
|
@ -135,9 +135,9 @@ description: 前雇主的FAANG为前端/ Web开发人员面试提供了权威指
|
|||
|
||||
继续阅读，了解如何准备以下前端面试格式/问题类型：
|
||||
|
||||
- [编程问题](/front-end-interview-guidebook/coding)
|
||||
- [算法问题](/front-end-interview-guidebook/algorithms)
|
||||
- [JavaScript 问题](/front-end-interview-guidebook/javascript)
|
||||
- [用户界面问题](/front-end-interview-guidebook/user-interface)
|
||||
- [系统设计问题](/front-end-interview-guidebook/system-design)
|
||||
- [测验问题](/front-end-interview-guidebook/quiz)
|
||||
- [编程问题](/front-end-interview-playbook/coding)
|
||||
- [算法问题](/front-end-interview-playbook/algorithms)
|
||||
- [JavaScript 问题](/front-end-interview-playbook/javascript)
|
||||
- [用户界面问题](/front-end-interview-playbook/user-interface)
|
||||
- [系统设计问题](/front-end-interview-playbook/system-design)
|
||||
- [测验问题](/front-end-interview-playbook/quiz)
|
||||
|
|
|
|||
|
|
@ -51,6 +51,6 @@ description: 准备测验式前端面试问题的指南——预期情况，需
|
|||
|
||||
GreatFrontEnd 的列表中包含 100 多个常见测验式问题，每个问题都有详细的解决方案。
|
||||
|
||||
- [JavaScript 测验式问题](/questions/js/quiz)
|
||||
- [HTML 测验式问题](/questions/html/quiz)
|
||||
- [CSS 测验式问题](/questions/css/quiz)
|
||||
- [JavaScript 测验式问题](/questions/javascript-interview-questions/quiz)
|
||||
- [HTML 测验式问题](/questions/html-interview-questions/quiz)
|
||||
- [CSS 测验式问题](/questions/css-interview-questions/quiz)
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@ description: 准备前端/网络开发人员面试中的系统设计问题——
|
|||
|
||||
系统设计面试可以采用多种形式，涵盖整个开发堆栈。 GreatFrontEnd 专注于**前端系统设计**，即客户端应用程序和 UI 组件的系统设计和架构，而不是后端分布式系统。
|
||||
|
||||
我们编写了一个全面的[前端系统设计指南](/system-design)，您绝对应该查看。
|
||||
我们编写了一个全面的[前端系统设计指南](/front-end-system-design-playbook)，您绝对应该查看。
|
||||
|
||||
## 遵循最佳实践设计您的系统
|
||||
|
||||
无论您被要求设计应用程序、游戏还是 UI 组件，面试中进行系统设计时，都需要特别注意一些事项。 结合我们的[用户界面问题备忘单](/front-end-interview-guidebook/user-interface-questions-cheatsheet)中的提示，提升您的前端面试游戏。
|
||||
无论您被要求设计应用程序、游戏还是 UI 组件，面试中进行系统设计时，都需要特别注意一些事项。 结合我们的[用户界面问题备忘单](/front-end-interview-playbook/user-interface-questions-cheatsheet)中的提示，提升您的前端面试游戏。
|
||||
|
||||
## 练习问题
|
||||
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ slider 可以通过传入一个普通的 JavaScript 对象的选项来进行定
|
|||
|
||||
### Vanilla JavaScript 风格
|
||||
|
||||
在初始化组件方面没有 vanilla JavaScript 风格，因为 vanilla JavaScript 不是一个标准或框架。 但如果你读够了 GreatFrontEnd 对我们的 vanilla JavaScript [UI 编码问题](/questions/vanilla)的解决方案，你会发现我们推荐的 API 与 jQuery 的类似，构造函数接收一个根元素和选项：
|
||||
在初始化组件方面没有 vanilla JavaScript 风格，因为 vanilla JavaScript 不是一个标准或框架。 但如果你读够了 GreatFrontEnd 对我们的 vanilla JavaScript [UI 编码问题](/questions/javascript-interview-questions/ui-coding)的解决方案，你会发现我们推荐的 API 与 jQuery 的类似，构造函数接收一个根元素和选项：
|
||||
|
||||
```js
|
||||
function slider(rootEl, options) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ title: 前端用户界面问题备忘单
|
|||
description: 在前端/网络开发人员面试时，改善你必须建立的用户界面的顶级技巧 - 代码结构、管理状态、可访问性等。
|
||||
---
|
||||
|
||||
以下是一些提示，可帮助您在前端/ Web 开发人员面试期间改善您必须构建/设计的用户界面。 这些提示可应用于[用户界面编码面试](/front-end-interview-guidebook/user-interface)和[前端系统设计面试](/system-design/types-of-questions)。
|
||||
以下是一些提示，可帮助您在前端/ Web 开发人员面试期间改善您必须构建/设计的用户界面。 这些提示可应用于[用户界面编码面试](/front-end-interview-playbook/user-interface)和[前端系统设计面试](/front-end-system-design-playbook/types-of-questions)。
|
||||
|
||||
## 概览
|
||||
|
||||
|
|
@ -147,7 +147,7 @@ Google 的[web.dev]有一个[免费的深入课程](https://web.dev/learn/access
|
|||
|
||||
## 安全
|
||||
|
||||
- **跨站点脚本（XSS）**: 在渲染内容时，请避免分配给[`Element.innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)或 React 的`dangerouslySetInnerHTML`，因为它来自用户会导致跨站点脚本，应将其分配给[`Node.textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) 或使用实验性的[`Element.setHTML()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setHTML) 方法代替。 请参考[OWASP 的 XSS 预防备忘单](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)
|
||||
- **跨站点脚本（XSS）**: 在渲染内容时，请避免分配给[`Element.innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)或 React 的`dangerouslySetInnerHTML`，因为它来自用户会导致跨站点脚本，应将其分配给[`Node.textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) 或使用实验性的[`Element.setHTML()`](https://webdocs.dev/en-us/docs/web/api/element/sethtml) 方法代替。 请参考[OWASP 的 XSS 预防备忘单](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)
|
||||
- **“URL 上下文”的输出编码**: 如果用户提供的输入可能用于 URL 查询参数，请使用`encodeURIComponent`来防止意外的值成为 URL 的一部分（例如额外的查询参数）。
|
||||
- **跨站点请求伪造**: 请参见[OWASP 的 XSS 预防备忘单](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)。
|
||||
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ description: 准备前端/网络开发人员面试中的用户界面问题的指
|
|||
4. 将问题分解为不同的阶段/里程碑。 将此分解通知面试官。 与编码面试不同，用户界面编码面试的重点通常在于组件状态和 API 上，而不是复杂的数据结构和算法。
|
||||
5. 使用这些用例测试您的代码，并确定您的代码是否通过这些用例。
|
||||
- 在添加每个里程碑/功能后，尽可能在浏览器中测试您的代码，而不是仅在最后进行测试。
|
||||
- 请参阅[用户界面问题备忘单](/front-end-interview-guidebook/user-interface-questions-cheatsheet)，了解需要注意哪些方面在用户界面编码面试期间。
|
||||
- 请参阅[用户界面问题备忘单](/front-end-interview-playbook/user-interface-questions-cheatsheet)，了解需要注意哪些方面在用户界面编码面试期间。
|
||||
6. 在编码后，阅读您的代码一次，尝试找出基本错误，例如拼写错误、在初始化变量之前使用变量、错误使用 API 等。
|
||||
7. 概述一些基本的测试用例和一些边缘情况。 使用这些用例测试您的代码，并确定您的代码是否通过这些用例。 如果失败，请调试问题并修复问题。
|
||||
8. 解释您所做的折衷、您明确未处理的情况以及如何在有更多时间的情况下改进代码。
|
||||
|
|
@ -50,7 +50,7 @@ description: 准备前端/网络开发人员面试中的用户界面问题的指
|
|||
|
||||
## 如何准备用户界面编码面试
|
||||
|
||||
1. 熟悉“重要概念”下的主题。 [测验部分](/front-end-interview-guidebook/quiz)也可能是一个好的开始，因为您可能会在形式上的测验问题中被问及这些概念。
|
||||
1. 熟悉“重要概念”下的主题。 [测验部分](/front-end-interview-playbook/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 的最流行的库/框架，是大多数公司在招聘前端工程师时寻找的最受欢迎的语言。
|
||||
|
|
@ -58,9 +58,9 @@ description: 准备前端/网络开发人员面试中的用户界面问题的指
|
|||
- **编写原生 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)。
|
||||
- [用户界面问题备忘单](/front-end-interview-playbook/user-interface-questions-cheatsheet)
|
||||
- [用户界面组件 API 设计原则](/front-end-interview-playbook/user-interface-components-api-design-principles)
|
||||
5. 选择一个[学习计划](/interviews/get-started)，并练习推荐的[用户界面编码问题](/questions)。
|
||||
- 在构建 UI 组件和构建应用程序/游戏方面，花费大致相等的时间。 两者同样重要。
|
||||
|
||||
## 重要概念
|
||||
|
|
|
|||
Loading…
Reference in New Issue