DrillLab
开始StartNode.js, npm, node_modules and the lockfile
学课程 · 路线图Learn · roadmap

你在这儿，下一步往这走You are here. This is what comes next.

5 门课、27 个部分、80 节。已读完的打勾变灰，当前那一段高亮，后面的先弱化 —— 但都能点，想跳着学随你。5 courses, 27 parts, 80 lessons. Finished parts are ticked and dimmed, the current one is highlighted, later ones are muted — but all of them are clickable.

  1. 01地基 · 项目与语言Foundations · project and language

    1. 第 1 部分Part 1你在这You are here0 / 4

      一个 JavaScript 项目是怎么运行的How a JavaScript project runs

      从 Node.js 是什么开始，一路讲到「我怎么知道这个项目支持哪些命令」。全部用两个真实 assessment 的文件当例子。Starts at what Node.js is and ends at how to find out which commands a project supports. Every example is a real file from one of the two exam projects.

      Node.js、npm、node_modules 和 lockfileNode.js, npm, node_modules and the lockfilepackage.json 逐字段读一遍package.json, field by fieldnpm scripts：命令到底跑了什么npm scripts: what the command actually runs两个考试项目的目录，逐个说明The directory layout of both exam projects
    2. 第 2 部分Part 20 / 3

      JavaScript：只补考试真正会用的那几样JavaScript: only the parts the exams use

      不做完整 JS 教程。只讲 CRUD 三件事（增删改）背后的数组与对象操作，以及 Q2 和 resolver 都离不开的异步。Not a full JavaScript course. It covers the array and object work behind adding, deleting and updating, plus the async parts that both Q2 and the resolvers depend on.

      数组与对象：不可变更新三件套Arrays and objects: three ways to update without changing the original异步：Promise、await、all 和 allSettledAsync: Promise, await, all and allSettledESM:import / export 与那些莫名其妙的报错ESM: import / export, and the errors that look strange at first
    3. 第 3 部分Part 30 / 2

      TypeScript：够用就好TypeScript: just enough

      只讲两个考试里真实出现的：基本类型、type 与 interface、组件 props 类型、泛型参数，以及怎么读 tsc 的报错。Only what actually appears in the two exams: basic types, type versus interface, typing component props, generic parameters, and how to read a tsc error.

      类型、type 与 interfaceTypes, type and interface泛型参数，以及怎么读 tsc 的报错Generic parameters, and how to read a tsc error

  2. 02React 考试React exam

    1. 第 1 部分Part 10 / 3

      React 心智模型The React mental model

      组件、props、state、事件、渲染。每一条都用 react-notes-app 里真实的组件当例子，不用虚构的 Counter。Components, props, state, events, rendering. Every example is a real component from react-notes-app, never an invented Counter.

      组件就是一个返回界面的函数A component is a function that returns what you see on screenprops：数据往下流，事件往上报props: data flows down, events go back upuseState：让界面跟着数据变useState: making the screen follow the data
    2. 第 2 部分Part 20 / 4

      受控输入、列表渲染与 useEffectControlled inputs, rendering lists, and useEffect

      把 NoteForm 从头到尾读懂 —— 它一个文件里就用到了受控输入、useEffect 同步、派生数据和表单提交四件事。Read NoteForm from top to bottom. That one file already does four things: controlled inputs, syncing with useEffect, derived data, and form submission.

      受控输入：value + onChange 的闭环Controlled inputs: the loop between value and onChange列表渲染与 keyRendering a list, and the key propuseEffect：把 props 的变化同步进 stateuseEffect: copying a change in props into state派生数据与状态提升：什么不该做成 stateValues you can compute, and lifting state up: what should not be state
    3. 第 3 部分Part 30 / 5

      Q1 Notes Manager · 逐题拆解Q1 Notes Manager · one task at a time

      严格对应 react-notes-app README 的三个 Task。每一题都走同一套流程：读懂题 → 考什么 → 先想再写 → 分步实现 → 完整答案 → 为什么成立 → 常见错法 → 迁移。Follows the three tasks in the react-notes-app README exactly. Every task takes the same route: read the wording → see what is being tested → think before you type → build it step by step → read the full answer → understand why it works → look at the common mistakes → apply the same shape elsewhere.

      先读题：三个任务、一条硬约束、四个测试Read the question first: three tasks, one rule you must not break, four testsTask 1 · Add：提交表单，新笔记进入表格Task 1 · Add: submit the form and the new note appears in the tableTask 2 · Delete：点 Delete，该行按 id 被移除Task 2 · Delete: click Delete and that one row is removed by idTask 3 · Edit：回填、改文字、就地更新、退出编辑Task 3 · Edit: refill the form, change the button text, update the row where it is, leave edit mode四个测试逐条读，以及它们的盲区The four tests read line by line, and what they fail to catch
    4. 第 4 部分Part 40 / 2

      Q2 · 带并发上限的异步任务调度器Q2 · an async task runner that limits how many tasks run at the same time

      react-notes-app 的第二道题，和 React 完全无关。纯 TypeScript + 异步。考的是「你能不能自己实现一个 Promise.allSettled 加节流」。The second question in react-notes-app, with no React in it at all. Pure TypeScript and async work. It asks whether you can write your own Promise.allSettled that also caps how many tasks are running at the same time.

      读题：三条要求，每一条都在指定一种写法Reading the question: three requirements, and each one decides how you write it实现：worker pool（工人池）Building it: a worker pool, meaning a fixed number of workers sharing one queue
    5. 第 5 部分Part 50 / 5

      五道高频变式题Five variations that come up often

      TodoList、计时器、fetch 取数、递归评论树、主题切换（Context）。第一道是 Q1 的变式，后四道补的是源项目里没有但同类考试常考的东西：useEffect 清理函数、异步三态与竞态、递归组件与树形不可变更新、Context 与 value 记忆化。五道题的参考答案与测试都在本机跑过（36 / 36）。A TodoList, a timer, fetching data, a recursive comment tree, and theme switching with Context. The first is a variation on Q1. The other four cover what the source project does not have but exams like this often ask for: the useEffect cleanup function, the three states of an async request and the race between two of them, components that render themselves and updating tree data without changing the original, and Context with its value wrapped in useMemo. Every reference answer and test here was run on a real machine (36 / 36).

      变式一 · Todo ListVariation 1 · Todo List变式二 · 计时器：useEffect 的清理函数Variation 2 · a timer: the useEffect cleanup function变式三 · fetch 取数：loading、error 与竞态Variation 3 · fetching data: loading, error, and the race between two requests变式四 · 递归读取评论的评论Variation 4 · reading replies to replies with recursion变式五 · 主题切换：Context 怎么用Variation 5 · theme switching: how to use Context
    6. 第 6 部分Part 60 / 2

      综合 Debug、从零重写与题型迁移Mixed debugging, a full rebuild, and the same skills on a new question

      把前面的错误集中练一遍，然后在没有答案的情况下从空文件重建整个 Q1 和 Q2。这一模块是「会看」和「会做」的分界线。Practise all the earlier mistakes in one place, then rebuild the whole of Q1 and Q2 from empty files with no answer to look at. This module is the line between being able to follow along and being able to do it yourself.

      Debug Lab · React 十种典型故障Debug Lab · ten typical React failures从零重写：空文件夹到 4 个测试全过Write it again yourself: from an empty folder to 4 passing tests

  3. 03Federation 考试Federation exam

    1. 第 1 部分Part 10 / 3

      GraphQL 基础GraphQL basics

      schema、type、field、query、resolver、非空与列表。全部用 node-subgraph 的真实 schema.graphql 当例子 —— 这份 schema 的每个细节后面都会变成考点。schema, type, field, query, resolver, non-null and lists. Every example is the real schema.graphql from node-subgraph, and every detail in that schema turns into an exam point later.

      GraphQL 是什么：一份 schema 加一堆 resolverWhat GraphQL is: one schema plus a set of resolversresolver 的四个参数The four arguments of a resolver非空、列表，和那个没有 price 的 inputNon-null, lists, and the input that has no price
    2. 第 2 部分Part 20 / 4

      Federation 心智模型A mental model for Federation

      为什么要拆、subgraph 是什么、entity 和 @key 在解决什么问题、Router 怎么把碎片缝起来、DataLoader 为什么必须出现。Why one schema gets split up, what a subgraph is, what problem entity and @key solve, how the Router joins the pieces back into a single schema, and why DataLoader is needed.

      为什么会有 FederationWhy Federation existssubgraph 是怎么跑起来的How a subgraph starts upentity、@key 与 __resolveReferenceentity, @key and __resolveReferenceN+1 问题与 DataLoaderThe N+1 problem and DataLoader
    3. 第 3 部分Part 30 / 5

      Task 1 · subgraph resolver 逐项拆解Task 1 · the subgraph resolvers, one at a time

      四个 TODO 加三处埋雷。每个 TODO 都走同一套流程：读题 → 考什么 → 先想再写 → 分步实现 → 完整答案 → 为什么成立 → 常见错法 → 迁移。Four TODOs plus three planted bugs. Every TODO follows the same steps: read the task, see what it tests, think before writing, build it step by step, read the full answer, understand why it works, look at the common mistakes, then reuse the pattern elsewhere.

      先读题：四个 TODO、三处埋雷、十个测试Read the task first: four TODOs, three planted bugs, ten testsTODO 1 · User.ordersTODO 1 · User.ordersTODO 2 · Order.shippingInfoTODO 2 · Order.shippingInfoTODO 3 & 4 · Query.order 与 Query.ordersTODO 3 & 4 · Query.order and Query.orders三处埋雷：怎么系统地找出来The three planted bugs: how to find them systematically
    4. 第 4 部分Part 40 / 2

      Task 2 · Spring Boot REST 控制器Task 2 · the Spring Boot REST controller

      六个端点，业务逻辑全都给好了。真正考的是「HTTP 状态码选对了吗」和「异常该谁处理」—— 而这两点恰好是那五个测试只抓住一半的地方。Six endpoints, with all the business logic already written for you. What is really tested is whether you picked the right HTTP status code and who should handle the exceptions — and those are exactly the two things the five tests only check partly.

      先看懂给你的东西：Spring 的几个注解和一条请求链路Understand what you are given: a few Spring annotations and the path one request takes六个端点：状态码就是这道题的全部Six endpoints: the status codes are the whole task
    5. 第 5 部分Part 50 / 1

      书面题The written questions

      QUESTIONS.md 里的两道题。它们不考代码，考的是「你有没有在真实系统里想过这些问题」。这一节给出思考框架和一份可以照着写的参考答案。The two questions in QUESTIONS.md. They do not test code. They test whether you have thought about these problems in a real system. This module gives a structure for thinking them through, plus one reference answer you can follow.

      两道书面题：延迟传播与生产配置The two written questions: how delay spreads, and production configuration
    6. 第 6 部分Part 60 / 2

      综合 Debug 与从零重写Mixed debugging, and rewriting from an empty directory

      把 GraphQL 和 Spring 两边的典型故障集中练一遍，然后在没有答案的情况下从空目录重建整个 subgraph 和整个控制器。Practice the common failures on both the GraphQL side and the Spring side in one place, then rebuild the whole subgraph and the whole controller from an empty directory, with no answer to look at.

      Debug Lab · Federation 十种典型故障Debug Lab · ten common Federation failures从零重写：空目录到 10 个测试全过Rewrite it: from an empty directory to all 10 tests passing

  4. 04Cab BookingCab Booking

    1. 第 1 部分Part 10 / 2

      Context 这一层：放在哪、存什么、怎么改The Context layer: where to put it, what to store, how to update it

      先把四个测试读清楚，再搭 Context。这一部分的核心是一个位置问题：Provider 到底该包在哪一层 —— 答错这个，App 自己就用不了 Context。Read the four tests carefully first, then build the Context. The main point of this part is a question of position: which level of the tree the Provider should wrap. Get that wrong and App itself cannot read the Context.

      先读四个测试：它们到底要什么Read the four tests first: what exactly they ask forContext 放在哪一层 —— 这道题最容易死的地方Which level the Context goes on — the most common way to fail this task
    2. 第 2 部分Part 20 / 4

      四个页面串起来：状态机、分组、一秒延迟Connecting the four pages: the state machine, grouping, and the one-second delay

      没有路由，一个 currentPage state 管四个页面。这一部分把页面写出来，顺便撞上两个老考点：effect 的清理函数、和「取最新三条」的数组操作。No router: a single currentPage state controls four pages. This part builds the pages, and it also covers two points that come up again and again: the cleanup function of an effect, and the array operation that takes the three newest items.

      用一个 state 管四个页面Controlling four pages with one piece of state按类型分组渲染六张卡Rendering the six cards grouped by typeLoading：一秒之后自己跳走Loading: it moves to the next page by itself after one second历史与确认页：两个小而致命的细节The history and confirmation pages: two small details that decide pass or fail
    3. 第 3 部分Part 30 / 2

      验收：脚手架的坑、面试追问、从零重写Checking your work: the defect in the provided project, interview follow-up questions, and rewriting in an empty folder

      三件事：修掉那个让「完整答案」原样跑不起来的缺陷；把源项目两处「测试能过但面试会被问」的写法说清楚；然后在空文件夹里重写一遍。Three things: fix the defect that stops the complete answer from running as given; explain two places in the source project where the code passes the tests but an interviewer would still ask about it; then write the whole app again in an empty folder.

      完整答案跑不起来 —— 一个扩展名的事The complete answer does not run — the cause is one file extension从零重写：空文件夹里做出来Rewrite it: build the whole app in an empty folder
平行支线Parallel track不依赖主线，任何时候都能开始 —— 下面的「你在这」是这条线自己的进度No prerequisites, start any time — the marker below follows this line on its own

  1. 面试八股Interview questions

    1. 第 1 部分Part 1你在这You are here0 / 2

      HTML 与 CSSHTML and CSS

      13 道题。这两块最容易被轻视 —— 前端面试第一轮几乎必问，而且问的都是「你平时到底有没有想过为什么」。盒模型、Flex 与 Grid 的分工、事件冒泡与捕获、语义化标签、无障碍。13 questions. These two areas are the easiest to underestimate. The first round of a frontend interview almost always covers them, and the questions all check whether you have ever asked why. The box model, the division of work between Flex and Grid, event bubbling and capturing, semantic tags, and accessibility.

      HTML 五问5 questions on HTMLCSS 八问8 questions on CSS
    2. 第 2 部分Part 20 / 2

      JavaScript · 引擎、类型与函数JavaScript · the engine, types and functions

      22 道题。这一组是 JS 面试的地基：值怎么存、类型怎么转、变量怎么提升、闭包到底是什么。闭包、hoisting、== vs === 这三道几乎每场都问。22 questions. This group is the base of every JavaScript interview: how values are stored, how types convert, how variables are hoisted, and what a closure actually is. The questions on closure, hoisting, and == vs === come up in almost every interview.

      引擎与类型十问10 questions on the engine and types函数与作用域十二问12 questions on functions and scope
    3. 第 3 部分Part 30 / 3

      JavaScript · this、异步与工具链JavaScript · this, async and tooling

      16 道题。事件循环那道是 JS 面试最能分层次的题 —— 说得出宏任务微任务的执行顺序就上一个档。this 与 call/apply/bind 是老题但仍必问，DOM 事件委托会连到 React 的合成事件。16 questions. The event loop question separates candidates more than any other JavaScript question: if you can state the order in which macrotasks and microtasks run, you move up a level. this with call/apply/bind is an old question that is still always asked, and DOM event delegation connects to React synthetic events.

      this 与面向对象三问3 questions on this and object-oriented programming异步与事件循环六问6 questions on async and the event loopDOM、模块与工具链七问7 questions on the DOM, modules and tooling
    4. 第 4 部分Part 40 / 2

      React · 基础与组件React · basics and components

      18 道题。虚拟 DOM 与 diff、reconciliation 这几道是「你到底懂不懂 React 在干什么」的分水岭；props vs state、受控 vs 非受控、状态提升三道直接对应 Q1 那道真题里写过的代码。18 questions. The questions on the virtual DOM, diffing and reconciliation are the dividing line for whether you understand what React is doing; props vs state, controlled vs uncontrolled, and lifting state up map directly onto the code written for the real Q1 task.

      React 是什么 · 七问7 questions on what React is组件与通信 · 十一问11 questions on components and how they communicate
    5. 第 5 部分Part 50 / 3

      React · Hooks、性能与生态React · Hooks, performance and the ecosystem

      18 道题。useMemo / useCallback / React.memo 三兄弟的区别几乎每场必问，而且要答得出「什么时候不该用」；Redux 那四道是问 Redux 项目经验的固定套路。18 questions. The difference between useMemo, useCallback and React.memo is asked in almost every interview, and a full answer has to include when not to use them; the four Redux questions are the standard set asked of anyone who lists Redux experience.

      Hooks 四问4 questions on Hooks性能与新特性 · 八问8 questions on performance and new featuresRedux 与 TypeScript · 六问6 questions on Redux and TypeScript
    6. 第 6 部分Part 60 / 3

      Node、数据库与网络Node, databases and networking

      12 道题。全栈岗和前端岗都会问到这一层：Node 的事件循环、请求响应流程、REST 的 CRUD 映射、关系型 vs 文档型、以及 HTTPS / JWT / CORS / session 这四道安全常客。CORS 那道几乎人人都遇到过，但很多人说不清它到底是谁在拦。12 questions. Both full-stack and frontend roles ask about this layer: the Node event loop, the request and response flow, how CRUD maps onto REST, relational vs document databases, and the four regular security questions on HTTPS / JWT / CORS / session. Almost everyone has run into the CORS one, but many cannot say clearly which side is doing the blocking.

      Node 与 Express 四问4 questions on Node and Express数据库两问2 questions on databases网络、安全与测试 · 六问6 questions on networking, security and testing
    7. 第 7 部分Part 70 / 5

      Coding 题：对照与补缺Coding problems: what is covered and what is missing

      16 道 coding 题逐题对照本站已有的练习：9 道已经被 Q1、Q2、五道变式题和两套模拟考覆盖，7 道是真缺口。缺口题的参考解法都在本机跑过测试（24 / 24 加 8 / 8）。The 16 coding problems compared one by one against the exercises already on this site: 9 are already covered by Q1, Q2, the five variant tasks and the two mock exams, and 7 are real gaps. The reference solutions for the gap problems were all run against tests on a local machine (24 / 24 plus 8 / 8).

      16 道题逐题对照The 16 problems, compared one by one缺口一 · Dropdown、Tabs、星级评分Gap 1 · dropdown, tabs and star rating缺口二 · useRef 操作 DOM，与写一个自定义 hookGap 2 · using useRef on the DOM, and writing a custom hook缺口三 · 同一个 Todo 换成 Redux ToolkitGap 3 · the same Todo app, moved to Redux Toolkit缺口四 · Kanban 看板：一次改两个数组Gap 4 · a Kanban board: changing two arrays in one update
    8. 第 8 部分Part 80 / 3

      手写题Implement it yourself

      Phone screen 的主菜：现场手写 debounce、Promise.all、EventEmitter 这类工具函数。8 道题全部带浏览器沙箱，参考解法 40 / 40 实测。DrillLab 自出，不在原题库里。The main item in a phone screen: writing utility functions such as debounce, Promise.all and EventEmitter on the spot. All 8 problems come with a browser sandbox, and the reference solutions passed 40 / 40 in a real run. Written by DrillLab; these are not in the original question bank.

      计时两兄弟：debounce 与 throttleTwo timing helpers: debounce and throttle数据与函数：deepClone、flatten、curryData and functions: deepClone, flatten, curry异步与结构：Promise.all、EventEmitter、LRUAsync and structure: Promise.all, EventEmitter, LRU
    9. 第 9 部分Part 90 / 2

      TypeScript 深度TypeScript in depth

      6 道题。senior 面试的 TS 深水区：utility types 不止会用还要会手写，再加泛型约束、判别联合与 unknown / any / never。这 6 道全部是 DrillLab 自出，不在原题库里。6 questions. The harder TypeScript topics that senior interviews go into: you have to write utility types yourself, not only use them, plus generic constraints, discriminated unions, and unknown / any / never. All 6 were written by DrillLab and are not in the original question bank.

      Utility Types：会用，还要会手写Utility types: use them, and write them yourself泛型与收窄：把 any 赶出代码Generics and narrowing: getting any out of the code

路线走完之后After the roadmap

课文只是「题目背后的讲解」。真正的验收在考场：空文件夹、计时、没有提示按钮。 想先热手就去练习。The lessons are only the explanation behind the problems. The real check is the arena. Warm up in practice first if you like.