question

整体结构

模版的 BNF 范式描述如下

<InterviewQuestion> ::= <HeadingBlock> <DescriptionBlock>? <AnswerBlock>

# ------------------------------
# 题目头部区域（唯一标识 + ID）
# ------------------------------
<HeadingBlock> ::= <ATXHeading> <Title> <Anchor>
<ATXHeading> ::= "#" | "##" | "###" | "####" | "#####" | "######"
<Title> ::= <String>
<Anchor> ::= "{" "#" <Priority> "-" <QuestionID> "}"
<Priority> ::= "P0" | "P1" | "P2" | "P3" | "P4" | "P5"
<QuestionID> ::= <Slug>
<Slug> ::= <Word> ("-" <Word>)*

# ------------------------------
# 可选的题目说明代码区域（如命题代码、HTML结构等）
# 支持普通代码块与 jsx/tsx live 交互式代码块
# ------------------------------
<DescriptionBlock> ::= <CodeBlock> | <LiveCodeBlock>

# ------------------------------
# 答案区域，允许多区块组合
# ------------------------------
<AnswerBlock> ::= "<Answer>" <AnswerContent> "</Answer>"

<AnswerContent> ::= (<BlockSeparator>? <BlockContent>)+

# ------------------------------
# 区块分隔标题，建议以冒号结尾避免与粗体文本冲突
# 例如：**示例说明:**、**答案解析:** 等
# ------------------------------
<BlockSeparator> ::= "**" <BlockTitle> ":" "**"
<BlockTitle> ::= <String>

# ------------------------------
# 支持的内容类型
# 可混合任意顺序出现
# ------------------------------
<BlockContent> ::= <Paragraph>
                 | <MarkdownTable>
                 | <TipBlock>
                 | <CodeBlock>
                 | <LiveCodeBlock>
                 | <ComponentImport>
                 | <ComponentUsage>
                 | <TabsBlock>
                 | <ReadingList>
                 | <BulletList>

# ------------------------------
# Markdown 表格
# ------------------------------
<MarkdownTable> ::= "|" <TableHeader> "|" <TableSeparator> "|" <TableBody>+
<TableHeader> ::= <String> ("|" <String>)*
<TableSeparator> ::= "---" ("|" "---")*
<TableBody> ::= <TableRow>
<TableRow> ::= "|" <String> ("|" <String>)* "|"

# ------------------------------
# 提示块（:::tip ... :::）
# ------------------------------
<TipBlock> ::= ":::tip" <MultilineString> ":::"

# ------------------------------
# 代码块（普通代码展示）
# ------------------------------
<CodeBlock> ::= "```" <Language> <Code> "```"

# ------------------------------
# 交互式代码块（Docusaurus live editor）
# 形如：```jsx live / ```tsx live
# ------------------------------
<LiveCodeBlock> ::= "```" <LanguageJSX> " live" <Code> "```"

# ------------------------------
# 段落文本（多行 markdown 格式文本）
# ------------------------------
<Paragraph> ::= <MultilineString>

# ------------------------------
# Bullet 列表（如：面试官视角、关联问题）
# ------------------------------
<BulletList> ::= ("- " <ListItem> "\n")+
<ListItem> ::= <String> ("→" <String>)?

# ------------------------------
# 自定义组件 - 引用代码文件（Raw-loader）
# ------------------------------
<ComponentImport> ::= "import" <Identifier> "from" "'!!raw-loader!" <Path> "';"

# ------------------------------
# 自定义组件 - 代码执行组件：TestCode / Sandpack 等
# ------------------------------
<ComponentUsage> ::=  <SandpackComponent> | <TestCodeComponent> 

<SandpackComponent> ::= "<Sandpack template=" <StringLiteral>
                         " options=" <OptionsObject>? " files=" <FilesObject> " />"

<TestCodeComponent> ::= "<TestCode" (" options=" <OptionsObject>)?
                         " files=" <FilesObject> " />"

# ------------------------------
# 多标签代码演示
# 支持可选 defaultValue；每个 TabItem 内允许混合说明文字、导入、Sandpack 或 TestCode
# ------------------------------
<TabsBlock> ::= "<Tabs" (<DefaultValueAttr>)? ">" <TabItems> "</Tabs>"
<DefaultValueAttr> ::= " defaultValue=" <TabValue>
<TabItems> ::= (<TabItemBlock>)+
<TabItemBlock> ::= "<TabItem value=" <TabValue> ">" (<BlockContent>)+ "</TabItem>"

# ------------------------------
# 阅读推荐项（标题 + 链接）
# ------------------------------
<ReadingList> ::= ("- [" <Title> "](" <URL> ")")+

# ------------------------------
# 代码文件结构定义（用于组件 files 属性）
# 约定：files 的键（文件路径）应以 "/" 开头；值可以是变量（如 raw-loader 导入）或字符串字面量
# ------------------------------
<FilesObject> ::= "{" <FileEntry> ("," <FileEntry>)* "}"
<FileEntry> ::= '"' <Path> '"' ":" (<Identifier> | <StringLiteral>)

<OptionsObject> ::= "{" <OptionKVPair> ("," <OptionKVPair>)* "}"
<OptionKVPair> ::= <Key> ":" <Value>

# ------------------------------
# 基本类型定义
# ------------------------------
<StringLiteral> ::= '"' <String> '"'
<TabValue> ::= <StringLiteral>
<Language> ::= "js" | "ts" | "html" | "css" | "bash" | "json" | "md" | ...
<LanguageJSX> ::= "jsx" | "tsx"
<MultilineString> ::= <String> ("\n" <String>)*
<String> ::= [^"\n]+
<Word> ::= [a-zA-Z0-9_\-]+
<Identifier> ::= <Word>
<URL> ::= <String>
<Path> ::= <String>
<Code> ::= <MultilineString>
<Key> ::= <Word>
<Value> ::= <String> | <Number> | "true" | "false"

问题说明

先阅读好问题的标准理解问题是否值得被收录。

元信息

优先级

按照面试准备的重要性和时间投入比例，将考察点分为以下优先级：

优先级	说明	关键性
P0	必考知识点，面试必问，涉及核心基础概念	必须深入理解并熟练应用
P1	高频知识点，经常考察，涉及重要应用场景	需要系统掌握并能举例说明
P2	常规知识点，偶尔考察，体现知识广度	理解基本原理和使用场景
P3	进阶知识点，较少考察，体现技术深度	了解核心概念和应用价值
P4	前沿知识点，极少考察，体现持续学习	知道基本概念和发展趋势

对于不同经验层级的优先级关注点

校招生/实习生：
- 优先级：重点准备 P0-P1，P2 选择性准备
- 时间分配：P0(50%) > P1(30%) > P2(20%)
- 重点：基础知识扎实度和编程能力
社招(1-3年经验)：
- 优先级：P0-P2 必备，P3 要有了解
- 时间分配：P0(30%) > P1(30%) > P2(25%) > P3(15%)
- 重点：项目经验 + 技术深度
社招(3年以上)：
- 优先级：P0-P3 全面准备
- 时间分配：P0-P3 平均分配
- 重点：技术广度 + 架构设计 + 技术决策

其他附属信息

级别	名称	含义	示例
domain	领域	指广义的技术范畴，如前端、后端、运维、测试、产品、设计等。目前只涉及前端	前端（Frontend）
subject	学科专题	该领域内的核心技术模块，用于归类不同的技术方向。	例如前端工程化（Frontend Engineering）
topic	知识点主题	具体的知识单元，可以是某个技术、工具或概念。	Webpack 构建（Webpack Bundling）
related	关联主题	该知识点与哪些其他知识点存在关联，适用于学习路径和面试问答关联。	Webpack ↔️ ES Module、Vite
prerequisites	前置主题	该知识点学习前需要掌握的内容，确保知识循序渐进。	React 状态管理（需要 React 组件基础）
difficulty	难度	问题的难易程度，通常分为初级、中级、高级	闭包 → 中级
duration	预计回答时间	回答该问题预计需要的时间，有助于面试官时间安排	5分钟
job_type	适用岗位	问题适用的具体岗位类型	前端通用/可视化/工程化等
tags	标签	该问题的标签，面试官能快速筛选匹配岗位的题目，候选人能按岗位特征刷题	JavaScript、CSS、性能优化等

答案说明

答案规范

答案文字长度
1. 概念/对比：200–300 5 分钟内能够阅读完毕
2. 编程：代码为主 + 100–200 注释 20分钟内可完成
3. 设计：400–700（允许结构图/要点表格） 30分钟内可完成
答案遵循金字塔结构，一句话结论（面试官要的点）、原理解释（为什么）、示例/代码（怎么做）、扩展思考（更高级场景）确保候选人学习高效
示例代码尽量简洁，确保编写成本 < 20 分钟，不要过于复杂
答案解析用来说明问题的解决思路，不要过于深入，避免过多细节，通过延伸阅读引导学习者深入学习

不同类型问题的回答策略

基于对现有学科答案的分析，以下是优化的答案模版结构：

概念类问题

<Answer>

**核心概念**
- 要点1
- 要点2
- 要点3

**示例说明**

import exampleCode from '!!raw-loader!./answers/example.js';

<TestCode
   options={{
      showConsole: true,
      editorHeight: 400
   }}
   files={{
      "/example.js": exampleCode,
   }}
/>

**面试官视角**

该题一般作为面试热身题，帮助面试者快速进入状态，通过此题又可以引出很多知识点，来对面试者能力作进一步下探。

**延伸阅读**

- [相关文档链接](https://example.com)
- [相关书籍推荐](https://book.douban.com/subject/xxx)

</Answer>

编程类问题模版

<Answer>

import solutionCode from '!!raw-loader!./answers/solution.js';
import solutionTest from '!!raw-loader!./answers/solution.test.js';

<TestCode
   files={{
      "/solution.js": solutionCode,
      "/solution.test.js": solutionTest,
   }}
/>

</Answer>

对比类问题模版

<Answer>

| 方案 | 优点 | 缺点 | 适用场景 |
|:---- |:---- |:--- |:--- |
| 方案A | 优点1 | 缺点1 | 场景1 |
| 方案B | 优点2 | 缺点2 | 场景2 |

**实际应用场景**

结合具体项目经验，说明在什么情况下选择哪种方案。

**延伸阅读**

- [相关技术文档](https://example.com)

</Answer>

设计类问题模版

<Answer>

**设计思路**

1. 需求分析：明确问题的核心需求
2. 技术选型：选择合适的技术栈
3. 架构设计：设计整体架构
4. 实现细节：关键实现步骤

**示例实现**

import designCode from '!!raw-loader!./answers/design.js';

<TestCode
   options={{
      showConsole: true,
      editorHeight: 600
   }}
   files={{
      "/design.js": designCode,
   }}
/>

**优化考虑**

- 性能优化点
- 扩展性考虑
- 维护性考虑

**延伸阅读**

- [相关设计模式](https://example.com)

</Answer>

示例编写

现有示例模式支持如下几种

内嵌代码片段

适用场景

简单说明场景，给出核心代码片段进行解释或示例说明

格式

markdown code block 语法，需标注对应语言

示例

function add (a, b) {
  return a + b
}

live code

适用场景

只针对 React 单组件场景，没有任何其他函数依赖的逻辑,

格式

参考 docusaurus 交互式代码

示例

实时编辑器

function counter() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

结果

sandpack

适用场景

提供最小 demo 对概念和场景进行说明。

格式

参考 sandpack 使用

示例

static
node
testcode

用在使用 html 说明功能的场景，或者使用 ESM 说明指定版本 Vue、React 等框架或工具场景

<style>
   #hello {
      font-size: 2rem;
      color: #2d8cf0;
      margin-bottom: 1rem;
      font-weight: bold;
   }
   #timer {
      font-size: 1.2rem;
      color: #555;
      background: #fff;
      padding: 0.5rem 1.2rem;
      border-radius: 6px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
   }
</style>
<div id="app">
   <div id="hello">{{ message }}</div>
   <div id="timer">定时器: {{ count }} 秒</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
   const { createApp } = Vue;
   createApp({
      data() {
         return {
            message: "hello world",
            count: 0
         };
      },
      mounted() {
         setInterval(() => {
            this.count++;
         }, 1000);
      }
   }).mount("#app");
</script>

Open Sandbox

用在说明 node 的场景

import EventEmitter from 'node:events'

/**
 * 使用 Node.js 内置 EventEmitter 模块和 nextTick API
 * 运行：node app.js
 */
const emitter = new EventEmitter()

emitter.on('greet', (msg) => {
  process.nextTick(() => {
    console.log('收到消息:', msg)
  })
})

emitter.emit('greet', '你好，Node.js!')

Terminal

用在测试验证的场景，通常在代码编写提或者

import add from './add'

describe('add', () => {
  it('should add two numbers', () => {
    expect(add(1, 2)).toBe(3)
  })
})

示例存放与命名规则

位置：示例文件放在与问题文档同级的 answers/ 目录。
单文件：使用问题 ID 作为文件名，扩展名按类型选择（js/ts/mjs/ html/css/json 等）。例如问题头为 ## ... {#P0-tab-communicate}，则示例为 answers/tab-communicate.js。
多文件：以问题 ID 作为文件夹名，内部放置最小必需文件集。例如 answers/tab-communicate/index.js、 answers/tab-communicate/worker.js。
MVP 原则：仅保留支撑核心概念的最小代码；在核心逻辑处添加简要注释；可运行优先（便于 TestCode/Sandpack）；避免与核心无关的样板代码。
files 用法：在组件 files 中引用时，键需以 / 开头并与导入内容对应。例如 { "/index.js": demo }。

面试官视角

每道题附带评分 Rubric（要点清单 + 加分项）。保证信度，减少面试官主观性。候选人也能知道什么是标准答案，自我检测更精准。

差无法准确回答或有明显错误，不了解基本应用，一般不会对问题做差的描述
良理解核心概念和基本原理，能说明常见应用，但缺乏深度
优全面掌握技术原理，能分析实现机制，结合实际场景讨论优化策略

其他规则

必须包含的区块

核心概念/解决方案：直接回答问题的核心要点
示例说明：提供可运行的代码示例（适用于概念类问题）
面试官视角：说明该问题在面试中的作用和考察点
延伸阅读：提供深入学习的方向

可选区块

实际应用场景：结合项目经验的具体应用
性能分析：时间/空间复杂度分析（算法题）
优化策略：进一步的优化思路
常见陷阱：容易出错的地方和注意事项

提示

一个好的面试答案需要逻辑清晰、内容全面、结合实际。通过上述模版，候选人可以根据问题类型组织答案，展示自己的技术深度和实际经验，同时满足面试官对背景、使用方法、原理和实际应用的考察需求。

整体结构​

问题说明​

元信息​

优先级​

其他附属信息​

答案说明​

答案规范​

不同类型问题的回答策略​

概念类问题​

编程类问题模版​

对比类问题模版​

设计类问题模版​

示例编写​

内嵌代码片段​

live code​

sandpack​

示例存放与命名规则​

面试官视角​

其他规则​

必须包含的区块​

可选区块​

整体结构

问题说明

元信息

优先级

其他附属信息

答案说明

答案规范

不同类型问题的回答策略

概念类问题

编程类问题模版

对比类问题模版

设计类问题模版

示例编写

内嵌代码片段

live code

sandpack

示例存放与命名规则

面试官视角

其他规则

必须包含的区块

可选区块