项目说明

项目概述

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

核心原则：

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

整体项目结构

.
├── 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 下组织规范如下

1. 知识科目 (Subject) 对应一级目录
   • 与其他领域有明确的界限
   • 可以独立学习和评估
   • 科目按照 <序号>.<科目名>
     • 序号为从 00 到 99 的两位数字，比如 02.html
     • 科目名为全小写单词
     • 若存在关联科目可通过 <序号>.<子序号>.<科目名> 进行细分，比如 01.01.javascript，01.02.typescript

   示例：JavaScript、HTML、CSS、Node、Vue、网络基础

2. 知识主题 (Topic) 对应一级目录下文件, 主题模版详见 topic
   • 关联某一科目下的相关子章节
   • 主题按照 <序号>.<主题名>
     • 序号为从 00 到 99 的两位数字，比如 01.type.md 类型主题
     • 对于相互关联的主题，可以通过 <序号>.<子序号>.<主题名> 进行细分，比如 01.01.bundler-webpack.md、01.02.bundler-vite.md

   示例：作用域、事件循环、类型系统

3. 问题 (Knowledge) 对应主题文件中的二级标题内容， 问题模版详见 question
   • 必须是该主题下一个明确的问题
   • 有具体的考察点

   示例：闭包、原型链、变量提升

信息

最顶层还存在 domain 领域，用来区分不同岗位对应的知识域，例如后端、产品、设计、运维、测试等，目前只聚焦于前端领域，但是对于其他领域的知识科目也可以进行类似的组织。比如数据库等

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

├── <subject>  # 知识科目目录
│  ├── README.md # 科目概述和知识点索引
│  ├── <00-topic0>.md // 知识主题关联的考题
│  ├── <01-topic1>.md // 知识主题关联的考题
│  ├── ... // 其他知识点
│  ├── 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 // 待办事项

日常操作

常用命令

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


# 部署文档
pnpm deploy

日常工作流

详见 workflow