项目说明

项目概述

面向前端面试者：基于面向知识点的问题组织方式，"以练带学"，辅助建立完整的前端知识体系框架
面向面试官：基于问题的详细解析，提供完整的评估体系，帮助客观评价候选人能力

核心原则：

问题导向，面向体系 摒弃题海战术，确保每个问题具代表性可以映射到核心知识点，帮助面试者构建结构化知识体系
理论结合实践，注重应用 确保选题具有实际应用价值，基于场景问题，帮助面试者理解知识点的实际应用场景
标准化评估 提供明确的考察点与期望答案，帮助面试官客观评价候选人能力，同时帮助面试者明确学习方向

技术栈与项目架构

核心技术栈

技术分类	技术选型	版本	用途说明
前端框架	React	19.0.0	构建交互式用户界面
文档框架	Docusaurus	3.8.1	静态站点生成与文档管理
开发语言	TypeScript	~5.6.2	提供类型安全的开发体验
包管理器	pnpm	9.15.4	快速、节省磁盘空间的包管理
测试框架	Jest	29.7.0	代码答案的单元测试
核心框架	React	18.2.0	构建用户界面的基础库
构建工具	Webpack	5.88.2	模块打包与构建优化
代码沙箱	Sandpack	2.20.0	在线代码编辑与执行环境
交互式可视化	Custom Visualizers	自研 React	架构/时序/全链路动态演示组件库（详见实战指南）

架构设计原则

插件化扩展 - 基于 Docusaurus 插件系统，实现自定义功能模块化
内容与展示分离 - Markdown 内容存储与 React 组件展示分离
自动化数据提取 - 通过自定义插件自动解析文档结构生成数据
组件化开发 - 可复用的 React 组件库，支持主题定制
渐进式增强 - 基础文档阅读 + 高级交互功能

核心架构模块

核心数据流：

内容管理层 - Markdown 文档 → 插件解析 → 结构化数据
业务逻辑层 - 题库索引 → 知识图谱 → 交互组件
展示层 - React 组件 → Docusaurus 主题 → 静态页面

关键特性实现

智能题库索引 - 自动解析文档目录结构，生成可搜索的题库数据
实时代码执行 - 集成 TestCode 和 Sandpack，支持在线编程练习
学习进度跟踪 - KanbanBoard 组件实现个性化学习路径管理
AI 学习助手 - 集成 Ollama API 的智能问答功能
响应式设计 - 适配移动端和桌面端的阅读体验

整体项目结构

.
├── README.md // 项目说明
├── _draft // 存放草稿
├── company // 存放各公司前端面试信息
├── contributors // 存放项目和流程说明
├── docs // 存放题库文档
├── docusaurus.config.ts // docusaurus 配置
├── jest.config.js // 答案测试配置
├── package.json // npm 配置
├── scripts // 脚本文件
├── sidebars.ts // docs 边栏配置
├── sidebarsCompany.ts // company 边栏配置
├── sidebarsContributors.ts  // contributor 栏配置
├── src // 源码和 docusaurus 扩展组件
├── static // 静态资源
└── tsconfig.json // typescript 配置

docs

docs
├── 01.01.js // js 科目
│   ├── 01.type.md // 类型
│   ├── ...
│   ├── coding.md // 编程题
│   ├── other.md // 其他无法归类的主题，用于兜底
│   └──answers // 编程题，或者相关需要编码问题答案
├── 01.02.typescript // ts 科目
├── 02.html // html 科目
│   ├── 01-attributes.md // 属性
│   ├── ...
│   ├── answers
│   ├── coding.md
│   └── worker.md
├── subjectxx.md // 其他前端科目
│   ├── topic1xx.md // 该科目下主题
│   ├── ... // 其他主题
│   ├── coding.md // 科目中的编程题
│   ├── other.md // 其他无法归类的主题，用于兜底
│   └── answers // 编程题，或者相关需要编码问题答案
├── ... // 其他前端科目

基于上述目录结构整体， docs 下组织规范如下

知识科目 (Subject) 对应一级目录
- 与其他领域有明确的界限
- 可以独立学习和评估
- 科目按照 <序号>.<科目名>
  - 序号为从 00 到 99 的两位数字，比如 02.html
  - 科目名为全小写单词
  - 若存在关联科目可通过 <序号>.<子序号>.<科目名> 进行细分，比如 01.01.javascript，01.02.typescript
示例：JavaScript、HTML、CSS、Node、Vue、网络基础
知识主题 (Topic) 对应一级目录下文件, 主题模版详见 topic
- 关联某一科目下的相关子章节
- 主题按照 <序号>.<主题名>
  - 序号为从 00 到 99 的两位数字，比如 01.type.md 类型主题
  - 对于相互关联的主题，可以通过 <序号>.<子序号>.<主题名> 进行细分，比如 01.01.bundler-webpack.md、01.02.bundler-vite.md
  - 主题支持嵌套比如 02.html 学科下 04.webapi 主题为一个目录下面在细分 00.bom.md、01.dom.md 等
  - 主题嵌套支持任意深度

学科与主题拆分的科学分类学与能力测评理论 (Cognitive Taxonomy & Assessment Science)

一个高质量的工程师技术知识库与能力测评体系，绝不是零散知识点的无序堆砌，也不是照本宣科的技术手册摘要。如何科学地反映和测评一个知识领域的能力？ 本项目深度结合现代教育心理学与认知科学三大经典理论体系，构建了一套严密的正交分类学与信息架构（IA）法则：

1. 测评科学理论支撑

布鲁姆修订版教育目标分类学（Bloom's Revised Taxonomy）：
- 区分“知识维度”（事实性、概念性、程序性、元认知知识）与“认知过程维度”（记忆、理解、应用、分析、评价、创造）；
- 初级岗位测评：主要覆盖概念性与程序性知识的理解 (Understand) 与 应用 (Apply)；
- 资深/专家岗位测评：必须深入元认知层面的分析 (Analyze)（如多技术方案权衡）、评价 (Evaluate)（如架构边界与坏味道识别）以及创造 (Create)（如设计自愈容灾系统与高阶抽象）。
米勒能力金字塔（Miller's Pyramid）：
- Knows（知晓知识）：通过核心概念题检验是否掌握术语与基本事实；
- Knows How（知其所以然）：通过原理机制题检验能否解释系统行为与推导因果；
- Shows How（现场演示）：通过现场白板手写核心代码与状态机（coding.md），证明其具备真实的工程实现力；
- Does（日常实战）：通过复杂业务场景与质量门禁题，评估在生产真实环境中的交付与治理能力。
韦伯知识深度（Webb's Depth of Knowledge, DOK）与认知负荷理论（CLT）：
- 避免无意义的细枝末节记忆（DOK 1 事实背诵，如强行记忆私有 API 字符串），重点考核 DOK 3（策略性思维与因果链追问）与 DOK 4（跨领域综合与长周期演进）；
- 每一主题单一维度聚焦，遵循外部认知负荷最小化原则，确保阅读者与应试者思维链清晰连贯。

2. 学科拆分原则：正交性与内聚性 (Taxonomic Orthogonality)

学科（Subject）级别：
- 具有独立的专业知识体系（Body of Knowledge），可独立设立评估标准与考察路径；
- 学科之间必须保持正交隔离（Orthogonality），严禁概念交叉混淆。例如：
  - 06.01.engineering（前端工程化）：聚焦通用研发效能工具链（构建、CI/CD、Lint、测试体系）；
  - 06.03.ai（AI 智能工程）：聚焦大模型与 Agent 应用本身的软件架构（流式、Generative UI、端侧推理、MCP 协议、Agent Harness）；
  - 两者边界明晰：前者是“AI for Engineering（研发辅助）”，后者是“Engineering for AI（AI 架构本身）”。

3. 主题拆分黄金五阶元模型 (The Five-Tier Architecture)

任何独立知识科目（Subject）在组织其下属主题（Topic）时，必须统一遵循自底向上、由浅入深的五阶认知演进体系：

层级 (Tier)	规范文件命名	认知层级定位	考察核心与回答重点	经典映射范例
Tier 1: 概念基石	`00.concept.md`	Bloom: 理解 / 米勒: Knows	底层心智模型、本质特征与核心哲学；回答“它是什么、为什么诞生、与旧范式的根本冲突是什么”。	• Vue: MVVM 与响应式心智模型 • AI: Token 本质、自回归 Next-Token 机制与 Prompt 体系
Tier 2: 核心原语	`01.core-modules.md` / `01.llm-basics.md`	Bloom: 应用 / 米勒: Knows How	领域内不可分割的核心技术构建块与基础设施原语。	• Vue: Reactivity 响应式系统 (Ref/Reactive/Dep) • AI: Transformer 架构、Self-Attention、结构化输出、Embedding
Tier 3: 业务场景	`02.business-scenarios.md` / `02.ui-interaction.md`	Bloom: 分析 / 米勒: Shows How	开发者在日常复杂生产中最常面对的高频 API、设计模式与系统设计场景。	• Vue: 组件化通信、指令系统、表单与路由管理 • AI: 流式打字响应、Markdown 防闪烁、Generative UI 沙箱、会话树
Tier 4: 领域工程与智能体	`03.agent-engineering.md`	Bloom: 分析/综合 / 米勒: Does	复合技术实体（如 Agent）从要素定义、选型对比到工程载体落地的完整闭环。	• AI: Agent 四要素、主流框架选型、MCP/Skills 扩展手段、Harness 宿主、HITL 授权门禁、DAG 画布
Tier 5: 协议生态与质量	`03.ecosystem-tooling.md` / `04.protocols-ecosystem.md`	Bloom: 评价 / 米勒: Does	周边标准协议、第三方生态框架、工程工具链与质量测试门禁。	• Vue: Pinia / Vue Router / Vite / Nuxt SSR • AI: MCP 协议规范、代码质量防幻觉门禁、SDD 体系、Eval 评测体系
Tier 6: 底层原理与端侧	`04.theory-internals.md` / `05.runtime-internals.md`	Bloom: 评价/创造 / DOK 4	运行时底层引擎、硬件加速、数学算法推导与极限性能优化。	• Vue: Vapor Mode 无 VDOM 编译、双向链表调度、Diff 算法 • AI: WebGPU 硬件算力、端侧本地 RAG、KV-Cache 复用、滑动窗口记忆压缩
Practical Capstone	`coding.md`	米勒: Shows How	高频手写实战题、核心算法与沙箱闭环测试。	• Vue: 手写极简响应式 Proxy、手写 diff • AI: 手写 Agent Loop、手写 RAF 打字机队列、手写轻量向量检索器

架构设计法则：双轴信息架构（Dual-Axis Information Architecture）

标准模式（单技术栈/中小型学科）：严格采用单维度五阶元模型（00.concept -> 01.core-modules -> 02.business-scenarios -> 03.ecosystem-tooling -> 04.theory-internals -> coding.md）；

复合模式（大型跨领域交叉学科，如 AI 智能工程）：采用**“横轴技术问题域高内聚（Domain Entities） × 纵轴认知深度递进（Cognitive Depth）”**。将核心技术实体（如 LLM 原理、UI 流式交互、Agent 智能体工程、协议治理、端侧推理）独立划分为专门主题，避免同一实体被割裂拆散到不同文件；而在每个主题内部，严格按金字塔结构递进，实现知识高内聚与认知深度的和谐统一。

基于上面的规则，docs 下题库目录可以抽象如下

├── <subject>  # 知识科目目录
│  ├── README.md # 科目概述和知识点索引
│  ├── <00.topic0>.md // 知识主题关联的考题
│  ├── <01.01.topic1>.md // 知识主题关联的考题
│  ├── <01.02.relative-topic1>.md // 知识主题关联的考题
│  ├── <02.topic2> // 嵌套主题
│  │   ├── <01-nest-topic>.md // 嵌套主题 1
│  │   ├── <02-nest-topic2>.md // 嵌套主题 2
│  ├── ... // 其他知识点
│  ├── answers // 对于编程类问题的或者需要详细说明的问题答案
│  │   ├── <question id> // 问题 id
│  │   │   ├── README.md // 答案解析
│  │   │   ├── ...
│  │   ├── <question id>.js // 直接对应问题的 id 的答案
│  │   ├── <question id>.test.js // 直接对应问题的 id 的答案的测试用例，如果有的话
├── ... // 其他知识域

company

company
├── 公司1.md
├── 公司2.md
├── ...

具体公司中内容组织模版详见 company

contributors

存放贡献指南，文件目录说明

contributors
├── 01-summary.md // 项目概述
├── 02-question.md // 问题模版详细说明
└── index.md // 待办事项

src

存放源码和 Docusaurus 扩展组件，目录结构如下

src
├── components // React 组件库
│   ├── chat // AI 聊天悬浮窗组件，基于 chatui 和 ollama API
│   ├── KanbanBoard // 看板管理组件，用于题目进度跟踪
│   ├── HomepageFeatures // 主页特性展示组件
│   ├── HomeQuestionsSummary // 题库概览组件，动态展示各科目题目数量
│   ├── QuestionList // 题目列表组件，支持筛选和搜索
│   ├── Progress // 学习进度跟踪组件
│   ├── templates // 模板组件
│   │   ├── Answer.mdx // 答案模板组件
│   │   ├── TestCode.tsx // 实时代码执行组件
│   │   └── CustomSandPack.tsx // 自定义代码沙箱组件
│   ├── Layout // 布局组件
│   └── ... // 其他功能组件
├── plugins // Docusaurus 自定义插件
│   ├── extractQuestions // 题目提取插件，自动解析 markdown 文件生成题库索引
│   ├── devProxy // 开发环境代理插件
│   └── imageViewer // 图片查看插件
├── theme // 主题定制
│   ├── MDXComponents.tsx // MDX 组件映射，注册自定义组件
│   └── DocRoot // 文档根组件定制
├── pages // 页面组件
│   ├── index.tsx // 主页
│   └── ... // 其他页面
└── css // 全局样式
    └── custom.css // 自定义样式

日常操作

常用命令

# 本地启动服务
pnpm i # 初始化项目
pnpm start # 启动本地调试


# 部署文档
pnpm deploy

日常工作流

详见 workflow

项目概述​

技术栈与项目架构​

核心技术栈​

架构设计原则​

核心架构模块​

关键特性实现​

整体项目结构​

docs​

学科与主题拆分的科学分类学与能力测评理论 (Cognitive Taxonomy & Assessment Science)​

1. 测评科学理论支撑​

2. 学科拆分原则：正交性与内聚性 (Taxonomic Orthogonality)​

3. 主题拆分黄金五阶元模型 (The Five-Tier Architecture)​

company​

contributors​

src​

日常操作​

常用命令​

日常工作流​