From 2f6b764134ee100ae2f0bce3bdc0e0dbea6274ec Mon Sep 17 00:00:00 2001 From: Yangshun Date: Tue, 29 Apr 2025 15:58:10 +0800 Subject: [PATCH] i18n --- .../contents/overview/en-US.langnostic.json | 4 +-- .../contents/overview/zh-CN.mdx | 2 +- .../contents/overview/en-US.langnostic.json | 4 +-- .../contents/overview/zh-CN.mdx | 12 +++---- .../contents/quiz/en-US.langnostic.json | 4 +-- .../contents/quiz/zh-CN.mdx | 2 +- .../contents/resume/en-US.langnostic.json | 4 +-- .../contents/resume/zh-CN.mdx | 24 ++++++------- .../en-US.langnostic.json | 8 ++--- .../zh-CN.mdx | 4 +-- .../en-US.langnostic.json | 20 +++++------ .../zh-CN.mdx | 28 +++++++-------- .../user-interface/en-US.langnostic.json | 4 +-- .../contents/user-interface/zh-CN.mdx | 22 ++++++------ .../en-US.langnostic.json | 4 +-- .../zh-CN.mdx | 2 +- .../en-US.langnostic.json | 8 +++-- .../zh-CN.mdx | 36 +++++++++++++++++-- .../en-US.langnostic.json | 8 ++--- .../zh-CN.mdx | 4 +-- .../en-US.langnostic.json | 32 +++++++++++------ .../zh-CN.mdx | 28 ++++++++++----- .../en-US.langnostic.json | 4 +-- .../zh-CN.mdx | 2 +- .../en-US.langnostic.json | 8 ++--- .../contents/react-design-patterns/zh-CN.mdx | 4 +++ .../en-US.langnostic.json | 4 +-- .../introduction/en-US.langnostic.json | 4 +-- .../contents/introduction/zh-CN.mdx | 2 +- .../types-of-questions/en-US.langnostic.json | 4 +-- .../contents/types-of-questions/zh-CN.mdx | 2 +- 31 files changed, 181 insertions(+), 117 deletions(-) diff --git a/packages/behavioral-interview-guidebook/contents/overview/en-US.langnostic.json b/packages/behavioral-interview-guidebook/contents/overview/en-US.langnostic.json index 6ef820b3e..7496ca543 100644 --- a/packages/behavioral-interview-guidebook/contents/overview/en-US.langnostic.json +++ b/packages/behavioral-interview-guidebook/contents/overview/en-US.langnostic.json @@ -24,7 +24,7 @@ "bd006acd", "4872f499", "154000a3", - "904ad9cb", + "a8000e78", "c84a600e", "ee02e149", "80a251c", @@ -111,7 +111,7 @@ "bd006acd", "4872f499", "154000a3", - "904ad9cb", + "a8000e78", "c84a600e", "ee02e149", "80a251c", diff --git a/packages/behavioral-interview-guidebook/contents/overview/zh-CN.mdx b/packages/behavioral-interview-guidebook/contents/overview/zh-CN.mdx index 9aeded3fa..7ab6ebe05 100644 --- a/packages/behavioral-interview-guidebook/contents/overview/zh-CN.mdx +++ b/packages/behavioral-interview-guidebook/contents/overview/zh-CN.mdx @@ -38,7 +38,7 @@ seo_description: 前端工程师行为面试的权威指南。由前 FAANG 面 评分必须根据情况的复杂性进行。处理得当的更困难或复杂的情况通常会获得更高的评分和级别推荐。 -在面试结束时，他们会协调所有评分和定性反馈，以决定： +在面试结束时，他们会核对所有评分和定性反馈，以决定： * 是否通过或未通过候选人 * 如果通过，候选人应该获得什么级别 diff --git a/packages/front-end-interview-guidebook/contents/overview/en-US.langnostic.json b/packages/front-end-interview-guidebook/contents/overview/en-US.langnostic.json index 60c39dc29..e2614ae78 100644 --- a/packages/front-end-interview-guidebook/contents/overview/en-US.langnostic.json +++ b/packages/front-end-interview-guidebook/contents/overview/en-US.langnostic.json @@ -52,7 +52,7 @@ "14af9fbb", "2d1f52c8", "3607fb25", - "7f524bab", + "e8f904c", "fe6b5994", "e10248d9", "70cd2c67" @@ -102,7 +102,7 @@ "14af9fbb", "2d1f52c8", "3607fb25", - "7f524bab", + "e8f904c", "fe6b5994", "e10248d9", "70cd2c67" diff --git a/packages/front-end-interview-guidebook/contents/overview/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/overview/zh-CN.mdx index 86238d895..a4a7f6ee9 100644 --- a/packages/front-end-interview-guidebook/contents/overview/zh-CN.mdx +++ b/packages/front-end-interview-guidebook/contents/overview/zh-CN.mdx @@ -127,12 +127,12 @@ social_title: 前端面试 - 快速入门指南 | GreatFrontEnd **问题类型图例** -* **测验**：封闭式测验/琐事风格的问题。 -* **算法**：实现一个解决算法问题的函数。它通常不是前端领域特定的。 -* **JavaScript**：用 JavaScript 实现一个与前端领域相关的函数/类。 -* **UI**：使用 HTML/CSS/JavaScript 构建用户界面。一些公司允许您使用您选择的框架，而另一些公司只允许 Vanilla JS/某些框架。 -* **系统设计**：设计一个系统并讨论架构及其组件。 -* **行为**：讨论您与他人合作的特定经验以及您如何处理困难的情况。 +* **测验**: 封闭式测验/琐事风格的问题。 +* **算法**: 实现一个解决算法问题的函数。它通常不是前端特定领域。 +* **JavaScript**: 用 JavaScript 实现一个与前端领域相关的函数/类。 +* **UI**: 使用 HTML/CSS/JavaScript 构建用户界面。一些公司允许您使用您选择的框架，而另一些公司只允许 Vanilla JS/某些框架。 +* **系统设计**: 设计一个系统并讨论架构及其组件。 +* **行为**: 讨论您与他人合作的具体经验以及您如何处理困难的情况。 ## 学习和实践 diff --git a/packages/front-end-interview-guidebook/contents/quiz/en-US.langnostic.json b/packages/front-end-interview-guidebook/contents/quiz/en-US.langnostic.json index d0b648222..69414b96d 100644 --- a/packages/front-end-interview-guidebook/contents/quiz/en-US.langnostic.json +++ b/packages/front-end-interview-guidebook/contents/quiz/en-US.langnostic.json @@ -18,7 +18,7 @@ "2d4699d8", "14246030", "38ec276", - "159edb1e", + "62c60e5c", "7e75ddb2", "9ac8168", "5962f6f", @@ -39,7 +39,7 @@ "2d4699d8", "14246030", "38ec276", - "159edb1e", + "62c60e5c", "7e75ddb2", "9ac8168", "5962f6f", diff --git a/packages/front-end-interview-guidebook/contents/quiz/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/quiz/zh-CN.mdx index 611ed4439..72f398032 100644 --- a/packages/front-end-interview-guidebook/contents/quiz/zh-CN.mdx +++ b/packages/front-end-interview-guidebook/contents/quiz/zh-CN.mdx @@ -32,7 +32,7 @@ social_title: 破解问答式面试 | 前端面试手册 * **系统设计环节**: 就像在编码环节一样，面试官可以就你所说的事情提出进一步的问题。 * **招聘经理环节**: 招聘经理环节通常不是技术性的，但他们可能会查看你的简历，并就你的简历中提到的技术/项目向你提问相关的问答题。 -正如你所看到的，你可能会在几乎所有可能的环节中被问到问答题。随时做好准备。 +正如你所看到的，你可能会在几乎每一轮中被问到测验问题。时刻做好准备。 ## 重要概念 diff --git a/packages/front-end-interview-guidebook/contents/resume/en-US.langnostic.json b/packages/front-end-interview-guidebook/contents/resume/en-US.langnostic.json index a0a6d30a5..f9a8fba7d 100644 --- a/packages/front-end-interview-guidebook/contents/resume/en-US.langnostic.json +++ b/packages/front-end-interview-guidebook/contents/resume/en-US.langnostic.json @@ -37,7 +37,7 @@ "d4270045", "80b38a54", "e3ca65fa", - "aa5fe7b8", + "19ea6a8d", "9b5019f0", "ea71a21d", "df75b028", @@ -78,7 +78,7 @@ "d4270045", "80b38a54", "e3ca65fa", - "aa5fe7b8", + "19ea6a8d", "9b5019f0", "ea71a21d", "df75b028", diff --git a/packages/front-end-interview-guidebook/contents/resume/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/resume/zh-CN.mdx index 3df731c5d..06dfc1930 100644 --- a/packages/front-end-interview-guidebook/contents/resume/zh-CN.mdx +++ b/packages/front-end-interview-guidebook/contents/resume/zh-CN.mdx @@ -6,7 +6,7 @@ seo_description: 使用我们的终极指南制作完美的前端工程师简历 social_title: 前端工程师简历指南 | 前端面试手册 --- -为了获得前端工程师的职位面试机会，我们必须提交一份通过公司简历筛选流程的简历。 现有的资源很多，可以帮助您制作一份优秀的软件工程师简历，但很少有专门针对前端工程师的。 有关一般的软件工程师简历技巧，请参阅 [Tech Interview Handbook](https://www.techinterviewhandbook.org/resume/）。 +为了获得前端工程师的职位面试机会，我们必须提交一份通过公司简历筛选流程的简历。 现有的资源很多，可以帮助您制作一份优秀的软件工程师简历，但很少有专门针对前端工程师的。 有关一般的软件工程师简历技巧，请参阅 \[Tech Interview Handbook]\(https://www.techinterviewhandbook.org/resume/）。 在本页中，我们提供了一些前端特定的技巧，以帮助前端工程师改进他们的简历并进入面试阶段。 @@ -71,17 +71,17 @@ social_title: 前端工程师简历指南 | 前端面试手册 尝试列出**至少一个且最多两个**属于以下类别的技术。并非所有类别都适用于您，因此仅包括相关的类别。下面显示了流行的示例。 -* **JavaScript 库**：[React](https://react.dev/)、[Angular](https://angular.io/)、[Vue](https://vuejs.org/)、[Svelte](https://svelte.dev/) -* **元框架**：[Next.js](https://nextjs.org/)、[Gatsby](https://www.gatsbyjs.com/)、[Nuxt](https://nuxtjs.org/)、[SvelteKit](https://kit.svelte.dev/) -* **状态管理**：[Redux](https://redux.js.org/)、[Flux](https://facebook.github.io/flux/)、[Jotai](https://jotai.org/)、[Zustand](https://github.com/pmndrs/zustand)、[Relay](https://relay.dev/) -* **CSS**：[CSS Modules](https://github.com/css-modules/css-modules)、[Styled Components](https://styled-components.com/)、[Tailwind CSS](https://tailwindcss.com/)、[Sass](https://sass-lang.com/)、[Less](https://lesscss.org/) -* **CSS 框架**：[Bootstrap](https://getbootstrap.com/)、[MUI](https://mui.com/)、[Chakra UI](https://chakra-ui.com/)、[Bulma](https://bulma.io/) -* **单元测试**：[Jest](https://jestjs.io/)、[Vitest](https://vitest.dev/)、[Storybook](https://storybook.js.org/)、[Mocha](https://mochajs.org/)、[Jasmine](https://jasmine.github.io/)、[Karma](https://karma-runner.github.io/latest/index.html) -* **数据获取**：[GraphQL](https://graphql.org/)、[tRPC](https://trpc.io/)、[TanStack Query](https://tanstack.com/query/v3/)、[swr](https://swr.vercel.app/) -* **集成测试**：[Cypress](https://www.cypress.io/)、[Selenium](https://www.selenium.dev/)、[Puppeteer](https://pptr.dev/)、[WebdriverIO](https://webdriver.io/)、[Playwright](https://playwright.dev/) -* **语言工具**：[Babel](https://babeljs.io/)、[TypeScript](https://www.typescriptlang.org/)、[Flow](https://flow.org/)、[ESLint](https://eslint.org/) -* **构建工具（可选）**：[webpack](https://webpack.js.org/)、[Vite](https://vitejs.dev/)、[Parcel](https://parceljs.org/)、[Gulp](https://gulpjs.com/)、[Rollup](https://rollupjs.org/)、[Browserify](https://browserify.org/) -* **包管理（可选）**：[npm](https://www.npmjs.com/)、[Yarn](https://yarnpkg.com/)、[pnpm](https://pnpm.io/) +* **JavaScript 库**: [React](https://react.dev/), [Angular](https://angular.io/), [Vue](https://vuejs.org/), [Svelte](https://svelte.dev/) +* **元框架**: [Next.js](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.com/), [Nuxt](https://nuxtjs.org/), [SvelteKit](https://kit.svelte.dev/) +* **状态管理**: [Redux](https://redux.js.org/), [Flux](https://facebook.github.io/flux/), [Jotai](https://jotai.org/), [Zustand](https://github.com/pmndrs/zustand), [Relay](https://relay.dev/) +* **CSS**: [CSS Modules](https://github.com/css-modules/css-modules), [Styled Components](https://styled-components.com/), [Tailwind CSS](https://tailwindcss.com/), [Sass](https://sass-lang.com/), [Less](https://lesscss.org/) +* **CSS 框架**: [Bootstrap](https://getbootstrap.com/), [MUI](https://mui.com/), [Chakra UI](https://chakra-ui.com/), [Bulma](https://bulma.io/) +* **单元测试**: [Jest](https://jestjs.io/), [Vitest](https://vitest.dev/), [Storybook](https://storybook.js.org/), [Mocha](https://mochajs.org/), [Jasmine](https://jasmine.github.io/), [Karma](https://karma-runner.github.io/latest/index.html) +* **数据获取**: [GraphQL](https://graphql.org/), [tRPC](https://trpc.io/), [TanStack Query](https://tanstack.com/query/v3/), [swr](https://swr.vercel.app/) +* **集成测试**: [Cypress](https://www.cypress.io/), [Selenium](https://www.selenium.dev/), [Puppeteer](https://pptr.dev/), [WebdriverIO](https://webdriver.io/), [Playwright](https://playwright.dev/) +* **语言工具**: [Babel](https://babeljs.io/), [TypeScript](https://www.typescriptlang.org/), [Flow](https://flow.org/), [ESLint](https://eslint.org/) +* **构建工具（可选）**: [webpack](https://webpack.js.org/), [Vite](https://vitejs.dev/), [Parcel](https://parceljs.org/), [Gulp](https://gulpjs.com/), [Rollup](https://rollupjs.org/), [Browserify](https://browserify.org/) +* **包管理（可选）**: [npm](https://www.npmjs.com/), [Yarn](https://yarnpkg.com/), [pnpm](https://pnpm.io/) ### 示例 diff --git a/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/en-US.langnostic.json b/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/en-US.langnostic.json index 53a05c067..49533f079 100644 --- a/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/en-US.langnostic.json +++ b/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/en-US.langnostic.json @@ -15,7 +15,7 @@ "818c7548", "862b5f64", "96652970", - "f834d037", + "898bf4bf", "bead125a", "fa8e2a5", "df3835a1", @@ -43,7 +43,7 @@ "8cf8b49e", "5e098ec0", "eed4a20e", - "724ac05a", + "8056bb62", "d09c29f1", "614f6160", "25258abb", @@ -104,7 +104,7 @@ "818c7548", "862b5f64", "96652970", - "f834d037", + "898bf4bf", "bead125a", "fa8e2a5", "df3835a1", @@ -132,7 +132,7 @@ "8cf8b49e", "5e098ec0", "eed4a20e", - "724ac05a", + "8056bb62", "d09c29f1", "614f6160", "25258abb", diff --git a/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/zh-CN.mdx index 931cc90d9..624b5d59d 100644 --- a/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/zh-CN.mdx +++ b/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/zh-CN.mdx @@ -16,7 +16,7 @@ social_title: UI 组件的 API 设计原则 | 前端面试手册 ### jQuery 风格 -在像 [React](https://react.dev/)、[Angular](https://angular.io/) 和 [Vue](https://vuejs.org/) 这样的现代 JavaScript UI 库/框架出现之前，[jQuery](https://jquery.com/)（和 [jQuery UI](https://jqueryui.com/)）是构建 UI 最流行的方式。 jQuery UI 推广了通过“构造函数”初始化 UI 组件的想法，其中涉及两个参数： +在像 [React](https://react.dev/)、[Angular](https://angular.io/) 和 [Vue](https://vuejs.org/) 这样的现代 JavaScript UI 库/框架出现之前，[jQuery](https://jquery.com/)（和 [jQuery UI](https://jqueryui.com/)）是构建 UI 最流行的方式。 jQuery UI 推广了通过“构造函数”初始化 UI 组件的想法，这涉及两个参数： 1. **根元素**：用于渲染内容的根 DOM 元素 2. **自定义选项**：可选的、额外的、自定义选项，通常以纯 JavaScript 对象的形式 @@ -142,7 +142,7 @@ function Slider({ label, value, className, classNameLabel, classNameTrack }) { {label} 出现错误的概率越低。 确定基本状态与派生状态。 派生状态是可以从基本状态计算出来的状态。 通过即时派生状态，您可以减少状态值不同步的可能性。 -* **分离渲染代码与数据管理代码**: 使 UI 成为数据的函数，并将代码分成两部分（渲染代码与数据管理代码），以提高可读性。 如果您使用 JavaScript 框架（例如 React），您或多或少会被迫这样做。 -* **对复杂的状态交互使用状态-reducer 模式**: 如果问题需要许多状态字段，并且某些操作需要同时更改多个字段，请使用 [reducer 来合并状态更新逻辑](https://react.dev/learn/extracting-state-logic-into-a-reducer)。 状态-reducer 模式最初由 Redux 推广，它鼓励您确定 UI 的状态、可以采取的操作以及如何将操作与状态结合起来以推导出下一个状态。 如果您使用 React，您可以通过 [`useReducer` React hook](https://react.dev/reference/react/useReducer) 实现此模式。 Redux 通常对于面试来说是过度的，而 `useReducer` 应该足够了。 +* **确定 UI 中所需的最小状态**：状态越小，代码就越容易阅读和理解 -> 降低出现错误的几率。确定基本状态与派生状态。派生状态是可以从基本状态计算出来的状态。通过即时派生状态，您可以减少状态值不同步的可能性。 +* **分离渲染代码与数据管理代码**：使 UI 成为您数据的函数，并将您的代码分成两部分（渲染代码与数据管理代码），以提高可读性。如果您使用 JavaScript 框架（例如 React），您或多或少会被迫这样做。 +* **对复杂的状态交互使用状态-reducer 模式**：如果问题需要许多状态字段，并且某些操作需要同时更改多个字段，请使用 [reducer 来整合状态更新逻辑](https://react.dev/learn/extracting-state-logic-into-a-reducer)。状态-reducer 模式最初由 Redux 推广，它鼓励您确定 UI 的状态、可以执行的操作以及如何将操作与状态结合起来以推导出下一个状态。如果您使用 React，您可以通过 [`useReducer` React hook](https://react.dev/reference/react/useReducer) 实现此模式。Redux 通常对于面试来说是过度的，而 `useReducer` 应该足够了。 -[React 的](https://react.dev/) 关于 [“管理状态”](https://react.dev/learn/managing-state) 的文档是关于如何正确设计和使用组件状态的绝佳资源。提到的一些想法并非特定于 React，可以应用于任何 UI 框架。 +[React 的](https://react.dev/) 关于 ["管理状态"](https://react.dev/learn/managing-state) 的文档是关于如何正确设计和使用组件状态的优秀资源。其中提到的一些想法并非 React 独有，可以应用于任何 UI 框架。 ## JavaScript @@ -75,14 +75,14 @@ social_title: 用户界面问题备忘单 | 前端面试手册 您的 UI 是否提供了出色的用户体验？ -* **移动友好性**：检查您是否需要使您的 UI 在移动设备上运行良好。 - * CSS 媒体查询可用于在移动设备上呈现不同的布局。 - * 使按钮等交互元素足够大以供按压（建议至少 44 x 44 像素）并充分间隔。 +* **移动端友好性**：检查您是否需要使您的 UI 在移动端上也能良好运行。 + * CSS 媒体查询可用于在移动端上呈现不同的布局。 + * 使按钮等交互元素足够大，以便按下（建议至少 44 x 44 像素）并且间隔足够宽。 * **错误状态**：及时、清晰地反映错误 — 表单验证错误、网络请求错误。 -* **处理不同尺寸的图像渲染**：使您的 UI 适用于渲染所有尺寸/尺寸的图像，同时保留原始纵横比。 - * 将 CSS `background-image` 与 `background-position: contain` 结合使用，使图像适合您定义的区域。 如果可以裁剪图像（例如用于渐变背景），请使用 `background-position: cover`。 +* **处理不同尺寸的图像渲染**：使您的 UI 能够处理各种尺寸/尺寸的图像渲染，同时保留原始的宽高比。 + * 使用 CSS `background-image` 以及 `background-size: contain`，使图像适合您定义的区域。如果可以裁剪图像（例如用于渐变背景），请使用 `background-size: cover`。 * `` 标签具有类似的 `object-fit` 属性，具有 `contain` 和 `cover` 值。 -* **乐观更新**：高级技术，即使网络请求仍在等待，也会反映成功状态。 如果请求失败，请恢复 UI 更改并显示错误消息。 +* **乐观更新**：高级技术，即使网络请求仍在等待，也会反映成功状态。如果请求失败，则恢复 UI 更改并显示错误消息。 ## 网络 @@ -132,8 +132,8 @@ Google 的 web.dev 有一个[关于可访问性的免费深入课程](https://we 在面试中，你可能没有足够的时间来处理代码中的所有边缘情况，但最好在面试中提及它们以获得加分。 * **处理长字符串**：UI 中的字符串（例如标题/按钮标签）可能导致 UI 行为异常，例如溢出并影响周围元素的位置。长字符串可能是用户输入或翻译的结果。 -* **空状态**：显示空状态消息/占位符以指示内容缺失，例如当列表为空时。什么都不显示可能会让用户认为有一个待处理的网络请求，并且数据仍在获取中。 -* **列表中项目过多**：在单个页面上显示太多项目会导致较差的 UX（用户必须滚动很多）以及响应能力和内存消耗方面的性能不佳。 +* **空状态**：显示空状态消息/占位符以指示内容缺失，例如当列表为空时。什么都不显示可能会使用户认为存在待处理的网络请求，并且数据仍在获取中。 +* **列表中项目过多**：在单个页面上显示太多项目可能导致较差的 UX（用户必须滚动很多）以及响应能力和内存消耗方面的性能不佳。 * **分页**：将长列表项分成多个页面。 * [**虚拟列表**](https://www.patterns.dev/posts/virtual-lists)：仅渲染动态列表中可见的行内容，而不是整个列表。 * 截断多余的内容并显示省略号。`word-break` CSS 属性将派上用场。 @@ -149,9 +149,9 @@ Google 的 web.dev 有一个[关于可访问性的免费深入课程](https://we ## 安全 -* **跨站点脚本 (XSS)**：如果内容来自用户，则在将内容呈现到 DOM 时，避免分配给 [`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) +* **跨站点脚本 (XSS)**：如果将内容呈现到 DOM 中时，内容来自用户，请避免分配给 [`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)。 +* **跨站点请求伪造**：请参阅 [OWASP 的 CSRF 预防备忘单](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html)。 ## 国际化 (i18n) diff --git a/packages/front-end-interview-guidebook/contents/user-interface/en-US.langnostic.json b/packages/front-end-interview-guidebook/contents/user-interface/en-US.langnostic.json index 5b522e7ef..c750d4a90 100644 --- a/packages/front-end-interview-guidebook/contents/user-interface/en-US.langnostic.json +++ b/packages/front-end-interview-guidebook/contents/user-interface/en-US.langnostic.json @@ -23,7 +23,7 @@ "1fc86ee7", "84991a73", "a00bd4c0", - "1c13dee3", + "87d6b386", "7e75ddb2", "e0d8bb38", "4c266b7c", @@ -55,7 +55,7 @@ "1fc86ee7", "84991a73", "a00bd4c0", - "1c13dee3", + "87d6b386", "7e75ddb2", "e0d8bb38", "4c266b7c", diff --git a/packages/front-end-interview-guidebook/contents/user-interface/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/user-interface/zh-CN.mdx index 1e32d44c0..3f9724343 100644 --- a/packages/front-end-interview-guidebook/contents/user-interface/zh-CN.mdx +++ b/packages/front-end-interview-guidebook/contents/user-interface/zh-CN.mdx @@ -53,18 +53,18 @@ social_title: 破解用户界面问题 | 前端面试手册 ## 如何准备用户界面编码面试 -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. **深入研究**：阅读我们的用户界面编码深入研究指南： +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 组件和构建应用程序/游戏。 两者同样重要。 + * [用户界面组件API设计原则](/front-end-interview-playbook/user-interface-components-api-design-principles) +5. **更多练习**：尝试[GFE 75](/interviews/gfe75)或选择一个[学习计划](/interviews/study-plans)，并练习为所选学习计划推荐的[用户界面编码问题](/questions/formats/ui-coding)。 + * 花费大致相等的时间来练习构建UI组件和构建应用程序/游戏。 两者都同样重要。 ## 重要概念 diff --git a/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/en-US.langnostic.json b/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/en-US.langnostic.json index 2ce0dfd9e..0299bbc2f 100644 --- a/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/en-US.langnostic.json +++ b/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/en-US.langnostic.json @@ -11,7 +11,7 @@ "4f0541a4", "3aa3e4a9", "210bb734", - "34629f90" + "86bbfb05" ] }, "targets": { @@ -21,7 +21,7 @@ "4f0541a4", "3aa3e4a9", "210bb734", - "34629f90" + "86bbfb05" ] } } diff --git a/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/zh-CN.mdx b/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/zh-CN.mdx index 5fcc5cb31..28f6f8f2d 100644 --- a/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/zh-CN.mdx +++ b/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/zh-CN.mdx @@ -15,4 +15,4 @@ BFC 是满足以下至少一个条件的 HTML 盒子： 在 BFC 中，每个盒子的左外边缘都与包含块的左边缘接触（对于从右到左的格式，右边缘接触）。 -BFC 中相邻块级盒子之间的垂直外边距会折叠。阅读更多关于[折叠外边距](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)。 +在同一个 BFC 内的相邻块级盒子之间的垂直外边距可以折叠，但是 BFC 阻止了它与外部元素的边距折叠。 进一步阅读 [外边距折叠](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)。 diff --git a/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/en-US.langnostic.json b/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/en-US.langnostic.json index 03ee5a247..78de2781c 100644 --- a/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/en-US.langnostic.json +++ b/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/en-US.langnostic.json @@ -14,7 +14,9 @@ "734d6fd2", "c551fdfe", "2376421f", - "483d14e7", + "4467442", + "dcc0b4a3", + "7dbcda", "62fd75b6", "e7cb61ab" ] @@ -29,7 +31,9 @@ "734d6fd2", "c551fdfe", "2376421f", - "483d14e7", + "4467442", + "dcc0b4a3", + "7dbcda", "62fd75b6", "e7cb61ab" ] diff --git a/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/zh-CN.mdx b/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/zh-CN.mdx index 81c3aa3fc..234a86516 100644 --- a/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/zh-CN.mdx +++ b/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/zh-CN.mdx @@ -27,8 +27,40 @@ CSS 盒子模型负责计算： 查找 `box-sizing` 属性，该属性会影响元素的总高度和宽度的计算方式。 -* `box-sizing: content-box`：这是 `box-sizing` 的默认值，并遵守上述规则。 -* `box-sizing: border-box`：`width` 和 `height` 将包括内容、填充和边框，但不包括边距。这是一种更直观的思考盒子模型的方式，因此许多 CSS 框架（例如 Bootstrap、Tailwind、Bulma）全局设置 `* { box-sizing: border-box; }`，以便所有元素默认使用这种盒子模型。有关更多信息，请参阅 [关于 `box-sizing: border-box` 的问题](/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages)。 +* `box-sizing: content-box`: 这是 `box-sizing` 的默认值，遵循上述规则。 + + 例如： + + ```css + .example { + box-sizing: content-box; + width: 100px; + padding: 10px; + border: 5px solid black; + } + ``` + + `.example` 元素实际占用的空间将是 130px 宽（100px 宽度 + 10px 左内边距 + 10px 右内边距 + 5px 左边框 + 5px 右边框）。 + +* `box-sizing: border-box`: `width` 和 `height` 将包括内容、内边距和边框（但不包括外边距）。这是一种更直观的思考盒子模型的方式，因此许多 CSS 框架（例如 Bootstrap、Tailwind、Bulma）全局设置 `* { box-sizing: border-box; }`，以便所有元素默认使用这种盒子模型。有关更多信息，请参阅[关于 `box-sizing: border-box` 的问题](/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages)。 + + 例如： + + ```css + .example { + box-sizing: border-box; + width: 100px; + padding: 10px; + border: 5px solid black; + } + ``` + + 该元素在页面上仍将占用 100px，但内容区域将为 70px 宽（100px - 10px 左内边距 - 10px 右内边距 - 5px 左边框 - 5px 右边框）。 + +### 边框和外边距行为 + +* **边框不会与相邻元素的边框折叠或重叠**。每个元素的边框单独渲染。 +* **外边距可以折叠**，但仅垂直方向，且仅在块级元素之间。水平外边距不会折叠。这意味着如果一个块级元素具有底部外边距，而下一个块级元素具有顶部外边距，则仅使用两者中较大的一个。此行为与 `box-sizing` 无关，并且是 CSS 中的默认行为。 ## 参考 diff --git a/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/en-US.langnostic.json b/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/en-US.langnostic.json index 9e7052ac8..a0cda8a03 100644 --- a/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/en-US.langnostic.json +++ b/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/en-US.langnostic.json @@ -7,15 +7,15 @@ "locale": "en-US", "hashes": [ "aa260efc", - "78aedf23", - "77398113" + "7f095032", + "b75121a7" ] }, "targets": { "zh-CN": [ "aa260efc", - "78aedf23", - "77398113" + "7f095032", + "b75121a7" ] } } diff --git a/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/zh-CN.mdx b/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/zh-CN.mdx index e64f6b5d6..d11bead5b 100644 --- a/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/zh-CN.mdx +++ b/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/zh-CN.mdx @@ -4,6 +4,6 @@ title: 你玩过新的 CSS Flexbox 或 Grid 规范吗？ Flexbox 主要用于一维布局，而 Grid 用于二维布局。 -Flexbox 解决了 CSS 中的许多常见问题，例如在容器内垂直居中元素、粘性页脚等。 著名的 CSS 框架，如 Bootstrap 和 Bulma 都基于 Flexbox，Flexbox 仍然是创建布局的经过测试和验证的方法。 +Flexbox 解决了 CSS 中的许多常见问题，例如在容器内垂直居中元素、粘性页脚等。著名的 CSS 框架，如 Bootstrap 和 Bulma，都基于 Flexbox，而 Flexbox 仍然是创建各种布局的经过测试和验证的方法。 -到目前为止，Grid 是创建基于网格的布局最直观的方法，但目前浏览器支持范围并不广泛。 许多布局问题已经可以用 Flexbox 解决，因此对 Grid 的需求并不大。 +Grid 适用于二维布局，让您可以完全控制行和列。它提供了一种直观而强大的方式，可以直接在 CSS 中创建复杂的基于网格的设计，通常比旧技术使用更少的代码和更大的灵活性。现在，所有主要的现代浏览器都对 Grid 提供了强大的支持，这使其成为大多数项目中布局设计的可靠选择。 diff --git a/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/en-US.langnostic.json b/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/en-US.langnostic.json index 97d313d25..549627e49 100644 --- a/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/en-US.langnostic.json +++ b/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/en-US.langnostic.json @@ -6,20 +6,32 @@ "source": { "locale": "en-US", "hashes": [ - "5db214c4", - "7e17674c", - "d30d76b2", - "cb872b3c", - "c9096de5" + "fdb40b5e", + "c6dfccde", + "c177f72d", + "62b48aec", + "4e19f600", + "a43d51f3", + "24fe32a8", + "901c4fe4", + "d7898ccb", + "62fd75b6", + "97be1c65" ] }, "targets": { "zh-CN": [ - "5db214c4", - "7e17674c", - "d30d76b2", - "cb872b3c", - "c9096de5" + "fdb40b5e", + "c6dfccde", + "c177f72d", + "62b48aec", + "4e19f600", + "a43d51f3", + "24fe32a8", + "901c4fe4", + "d7898ccb", + "62fd75b6", + "97be1c65" ] } } diff --git a/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/zh-CN.mdx b/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/zh-CN.mdx index 009bc6155..5beee49f1 100644 --- a/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/zh-CN.mdx +++ b/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/zh-CN.mdx @@ -2,15 +2,27 @@ title: 什么是 CSS 选择器特异性以及它是如何工作的？ --- -浏览器根据 CSS 规则的特异性来确定在元素上显示哪些样式。我们假设浏览器已经确定了与特定元素匹配的规则。在匹配的规则中，根据以下内容计算每个规则的特异性，四个逗号分隔的值 `a, b, c, d`： +当多个 CSS 规则可能应用于同一个 HTML 元素时，浏览器需要一种方法来决定哪个规则优先。这由 **CSS 级联** 决定，它考虑了重要性、内联样式、选择器特异性和源顺序。**选择器特异性** 是此过程的关键部分，它为每个选择器计算一个权重。 -1. `a` 是指是否使用了内联样式。如果属性声明是元素上的内联样式，则 `a` 为 1，否则为 0。 -2. `b` 是 ID 选择器的数量。 -3. `c` 是类、属性和伪类选择器的数量。 -4. `d` 是标签和伪元素选择器的数量。 +浏览器根据与元素匹配的 CSS 规则的 **特异性** 来确定要在元素上显示哪些样式。为每个规则计算特异性，以决定哪个规则优先。 -结果特异性不是单个数值分数，而是一个可以逐列比较的值数组。当比较选择器以确定哪个选择器的特异性最高时，从左到右查看，并比较每列中的最高值。因此，`b` 列中的值将覆盖 `c` 和 `d` 列中的值，无论它们可能是什么。因此，`0, 1, 0, 0` 的特异性将大于 `0, 0, 10, 10`。 +## 如何计算特异性？ -在特异性相等的情况下：最新的规则是有效的规则。如果您在样式表中编写了相同的规则（无论内部还是外部）两次，那么样式表中较低的规则更接近要设置样式的元素，它被认为是更具体的，因此将被应用。 +特异性算法基本上是一个由三个类别或权重组成的三个值 - ID、CLASS 和 TYPE - 对应于三种类型的选择器。该值表示每个权重类别中选择器组件的计数，并写为 `ID - CLASS - TYPE`。这三列是通过计算与元素匹配的选择器中每个选择器权重类别的选择器组件的数量来创建的。 -编写低特异性的 CSS 规则是一个更好的做法，这样如果需要，它们可以很容易地被覆盖。在编写 CSS UI 组件库代码时，重要的是它们具有较低的特异性，以便库的用户可以覆盖它们，而无需使用过于复杂的 CSS 规则，仅仅是为了增加特异性或求助于 `!important`。 +1. **ID**：这是 ID 选择器的计数（例如，`#example`）。 +2. **CLASS**：这是类选择器的计数（例如，`.my-class`）、属性选择器（例如，`[type="radio"]`）和伪类（例如，`:hover`）。 +3. **TYPE**：这是类型选择器（元素名称，例如，`h1`、`div`）和伪元素（例如，`::before`）的计数。 + +当比较选择器以确定哪个选择器具有最高的特异性时，从左到右（ID，然后是 CLASS，然后是 TYPE）查看，并比较每列中的最高值。ID 列中的值将覆盖 CLASS 和 TYPE 列中的值，无论它们有多大。类似地，CLASS 列中的值将覆盖 TYPE 列中的任何值。例如，`1,0,0`（一个 ID）的特异性大于 `0,10,10`（十个类和十个类型）。 + +重要的是要记住，特异性是更广泛的 **CSS 级联** 的一部分。标记为 `!important` 的声明具有最高的优先级，其次是内联样式（使用 `style` 属性）。选择器特异性紧随其后。 + +在竞争规则之间 **特异性相等** 的情况下（不是内联或 `!important`），CSS 源顺序中 **最后** 出现的规则是有效的规则，并将被应用。 + +最好编写具有低特异性的 CSS 规则，以便在必要时可以轻松覆盖它们。在为 UI 组件库编写 CSS 时，重要的是样式具有较低的特异性，以便库的用户可以自定义它们，而无需使用过于复杂的选择器或求助于 `!important`。 + +## 参考 + +* [特异性 | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Specificity) +* [特异性 | web.dev](https://web.dev/learn/css/specificity) diff --git a/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/en-US.langnostic.json b/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/en-US.langnostic.json index 7df547469..0a03bb6bc 100644 --- a/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/en-US.langnostic.json +++ b/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/en-US.langnostic.json @@ -10,7 +10,7 @@ "c47a94da", "6404ba72", "62fd75b6", - "66d09fe1" + "a128788" ] }, "targets": { @@ -19,7 +19,7 @@ "c47a94da", "6404ba72", "62fd75b6", - "66d09fe1" + "a128788" ] } } diff --git a/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/zh-CN.mdx b/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/zh-CN.mdx index dea381cf9..f4b8ef4ae 100644 --- a/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/zh-CN.mdx +++ b/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/zh-CN.mdx @@ -2,7 +2,7 @@ title: 什么是 CSS `display` 属性？你能举几个例子说明它的用法吗？ --- - `display` 属性的常见值：`none`、`block`、`inline`、`inline-block`、`flex`、`grid`、`table`、`table-row`、`table-cell`、`list-item`。 +`display` 属性的常见值：`none`、`block`、`inline`、`inline-block`、`flex`、`grid`、`table`、`table-row`、`table-cell`、`list-item`。 | `display` 值 | 描述 | | :-- | :-- | diff --git a/packages/react-interview-playbook/contents/react-design-patterns/en-US.langnostic.json b/packages/react-interview-playbook/contents/react-design-patterns/en-US.langnostic.json index eca278f5b..b09e167ca 100644 --- a/packages/react-interview-playbook/contents/react-design-patterns/en-US.langnostic.json +++ b/packages/react-interview-playbook/contents/react-design-patterns/en-US.langnostic.json @@ -14,14 +14,14 @@ "5d109e54", "c8b3e34b", "16b54b27", - "ab1a77c2", + "da32c809", "44bd2623", "746eeba3", "4247b503", "81632874", "acbaef8e", "3390cd5c", - "e60a4558", + "8e13a7ec", "dd751989", "c04c071b", "4420c4eb", @@ -52,14 +52,14 @@ "5d109e54", "c8b3e34b", "16b54b27", - "ab1a77c2", + "da32c809", "44bd2623", "746eeba3", "4247b503", "81632874", "acbaef8e", "3390cd5c", - "e60a4558", + "8e13a7ec", "dd751989", "c04c071b", "4420c4eb", diff --git a/packages/react-interview-playbook/contents/react-design-patterns/zh-CN.mdx b/packages/react-interview-playbook/contents/react-design-patterns/zh-CN.mdx index dd9b5af2a..c70c0e068 100644 --- a/packages/react-interview-playbook/contents/react-design-patterns/zh-CN.mdx +++ b/packages/react-interview-playbook/contents/react-design-patterns/zh-CN.mdx @@ -32,6 +32,8 @@ HOC 适用于： 高阶组件在 pre-hooks 时代对于向组件添加功能更有用。现在我们有了 React 钩子以及创建自定义钩子的能力，HOC 已经不再那么普遍。 +在 react.dev 上进一步阅读：[高阶组件 – React](https://www.patterns.dev/react/hoc-pattern/) + ## 渲染道具 渲染道具涉及将一个渲染元素的函数作为 prop 传递给一个组件。该组件使用某些参数（通常是其自身的状态）调用该 prop。 @@ -73,6 +75,8 @@ function App() { * 无法使用钩子的情况，例如类组件 * 提供逻辑和行为的无头组件，同时允许自定义外观 +在 react.dev 上进一步阅读：[Render Props - React](https://www.patterns.dev/react/render-props-pattern/) + ## 容器/展示模式 容器/展示模式是 React 中使用的一种设计模式，用于将状态管理（逻辑）与 UI 渲染（展示）分开。它通过确保关注点的明确分离，有助于使组件可重用、可维护和可测试。 diff --git a/packages/react-interview-playbook/contents/react-thinking-declaratively/en-US.langnostic.json b/packages/react-interview-playbook/contents/react-thinking-declaratively/en-US.langnostic.json index 35d9f8b69..ceb5c051e 100644 --- a/packages/react-interview-playbook/contents/react-thinking-declaratively/en-US.langnostic.json +++ b/packages/react-interview-playbook/contents/react-thinking-declaratively/en-US.langnostic.json @@ -57,7 +57,7 @@ "5687f321", "3ee158b5", "e47b328", - "f86f6023", + "e8737cc0", "746c881", "12c8167e", "d57a170", @@ -128,7 +128,7 @@ "5687f321", "3ee158b5", "e47b328", - "f86f6023", + "e8737cc0", "746c881", "12c8167e", "d57a170", diff --git a/packages/system-design/contents/introduction/en-US.langnostic.json b/packages/system-design/contents/introduction/en-US.langnostic.json index c15e0f246..51228df3c 100644 --- a/packages/system-design/contents/introduction/en-US.langnostic.json +++ b/packages/system-design/contents/introduction/en-US.langnostic.json @@ -23,7 +23,7 @@ "622e42c9", "f1bcf3f4", "db2e5ac6", - "d8d511cd", + "22969bc3", "ccd38694" ] }, @@ -42,7 +42,7 @@ "622e42c9", "f1bcf3f4", "db2e5ac6", - "d8d511cd", + "22969bc3", "ccd38694" ] } diff --git a/packages/system-design/contents/introduction/zh-CN.mdx b/packages/system-design/contents/introduction/zh-CN.mdx index 65a038382..5c3f28122 100644 --- a/packages/system-design/contents/introduction/zh-CN.mdx +++ b/packages/system-design/contents/introduction/zh-CN.mdx @@ -42,7 +42,7 @@ GreatFrontEnd 的前端系统设计资源可能是您能找到的最全面的资 ## 您将在此指南中学习的内容 -我们的前端系统设计指南分为两部分，您将首先更深入地了解系统设计面试的意义，然后深入研究一些使用 RADIO 框架的前端系统设计案例研究。 +我们的前端系统设计指南分为两部分，您将首先更深入地了解什么是系统设计面试，然后深入研究一些使用 RADIO 框架的前端系统设计案例研究。 * [问题类型](/system-design/types-of-questions)：前端系统设计面试问题的类型和示例 * [RADIO 框架](/system-design/framework)：用于回答前端系统设计面试问题的框架 diff --git a/packages/system-design/contents/types-of-questions/en-US.langnostic.json b/packages/system-design/contents/types-of-questions/en-US.langnostic.json index e90b15f3b..19f93d449 100644 --- a/packages/system-design/contents/types-of-questions/en-US.langnostic.json +++ b/packages/system-design/contents/types-of-questions/en-US.langnostic.json @@ -13,7 +13,7 @@ "4473509f", "a35b5e44", "49bc41c2", - "8266a389", + "cd112d59", "7df37cbe", "2d65d6fb", "70e92007", @@ -40,7 +40,7 @@ "4473509f", "a35b5e44", "49bc41c2", - "8266a389", + "cd112d59", "7df37cbe", "2d65d6fb", "70e92007", diff --git a/packages/system-design/contents/types-of-questions/zh-CN.mdx b/packages/system-design/contents/types-of-questions/zh-CN.mdx index cc4f7cde1..6a036be5e 100644 --- a/packages/system-design/contents/types-of-questions/zh-CN.mdx +++ b/packages/system-design/contents/types-of-questions/zh-CN.mdx @@ -12,7 +12,7 @@ seo_description: 了解可以提出的前端系统设计面试问题的主要类 如上所述，为前端系统设计面试设计应用程序将类似于一般的软件工程系统设计面试，事实上，这些问题非常相似。但是，您应该专注于客户端，讨论应用程序架构和客户端实现细节，而不是讨论分布式系统。 -当今时代，许多网站都是交互式和丰富的应用程序，几乎可以做许多桌面应用程序可以做的事情。 如果您在网络上使用过 Gmail、Facebook、YouTube、ChatGPT 或 Google 日历，那么您就使用过 Web 应用程序。 Web 应用程序往往具有交互性和动态性（页面上的内容经常变化），并且 Web 应用程序中的页面导航通常不需要完全刷新页面； 应用程序使用 JavaScript 获取下一页的远程数据，并动态更改内容和 URL。 +当今时代，许多网站都是交互式和丰富的应用程序，几乎可以完成许多桌面应用程序可以做的事情。 如果您在网络上使用过 Gmail、Facebook、YouTube、ChatGPT 或 Google 日历，那么您就使用过 Web 应用程序。 Web 应用程序往往具有交互性和动态性（页面上的内容经常变化），并且 Web 应用程序中的页面导航通常不需要完全刷新页面； 该应用程序使用 JavaScript 获取下一页的远程数据，并动态更改内容和 URL。 由于 Web 应用程序是涉及多个模块的复杂软件，因此在软件工程课程中学习的常见应用程序架构（如模型-视图-控制器 (MVC)、模型-视图-视图模型 (MVVM)）也适用于构建 Web 应用程序。 React 是 Facebook 用于构建交互式 Web 应用程序的最流行的 JavaScript 库之一，许多 React Web 应用程序都采用基于单向 Flux/Redux 的架构。