THE KNOWLEDGE GARDEN
笔记不是归档，
而是正在生长的路径。
狐狸整理了 578 篇公开笔记。可以按主题筛选，也可以直接搜索。Agent Team&SubAgent
https://www.bilibili.com/video/BV1gwcAzkEhw/?spm_id_from=333.337.search-card.all.click&vd_source=47c9acd507be6
ClaudeCode
> Last Format Time：6/25/2026 19:48:41
React
一篇仍在生长的笔记。
Reflection
一篇仍在生长的笔记。
数据库实验
1 SELECT s.name AS student_name, c.course_name, g.score FROM students s JOIN grades g ON s.student_id = g.
Skills 架构分析
> 本文档系统性梳理 skills 目录结构、分类方式、核心模式与最佳实践约定。 > 最后更新：2026-06-30
效果
一篇仍在生长的笔记。
skill的定义与最佳实践
--- 一个skill就是包含了`SKILL.md`的文件夹📂
skills、mcp、tool之间的区别 ⌚️
这是一个很专业的问题，通常出现在大语言模型（LLM）应用开发（比如 LangChain、Semantic Kernel 或 Claude 等平台的开发）中。
UI还原
spec coding -> 构建出的静态页面与figma做diff -> 修改 -> 人工验证 -> 最后验收 -> 影响面测评
Harness engineering
**人类掌舵，智能体执行。** **要给 Codex 的是一张地图，而不是一本 1,000 页的说明书。**
CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
笔记目录
欢迎来到笔记目录页面。这里汇总了知识库中的主要内容，方便按主题浏览和查找不同方向的学习资料与技术笔记。
观星记录
--- 时间：7/5/26 晚十点 地点：南湖校区三运
TRAE
!Pasted image 20251204205632
常用操作
1. **启动** 在终端中输入 `vi 文件名`，打开或创建一个名为**文件名**的文件 `vi myfile.txt` 2. **退出** 在命令模式下： - `:q`：
基础
!Pasted image 20251007212503
一级标题
Markdown 是一种轻量级的标记语言，用于格式化文本。以下是 Markdown 语法的基本规则：
Pandas
sum（）和：mean（）均值 !Pasted image 20250808205216
命令行
---
退出当前虚拟环境
使用venv、poetry进行虚拟环境管理
ES2026
https://github.com/tc39/proposals/blob/main/finished-proposals.md
00 JavaScript学习地图
> Last Format Time：8/11/2026 21:45:35
01 JavaScript基础
> Last Format Time：8/11/2026 21:45:35
02 类型系统与类型转换
> Last Format Time：8/11/2026 21:45:36
03 Number与String
> Last Format Time：8/11/2026 21:45:36
04 Array数组
> Last Format Time：8/11/2026 21:45:37
05 Object对象
> Last Format Time：8/11/2026 21:45:37
06 集合与迭代
> Last Format Time：8/11/2026 21:45:38
07 函数、作用域与this
> Last Format Time：8/11/2026 21:45:38
08 原型、构造函数与类
> Last Format Time：8/11/2026 21:45:39
09 Generator与异步迭代
> Last Format Time：8/11/2026 21:45:39
10 异步编程
> Last Format Time：8/11/2026 21:45:39
11 浏览器与DOM
> Last Format Time：8/11/2026 21:45:40
12 二进制与文件
> Last Format Time：8/11/2026 21:45:40
13 标准内建对象
> Last Format Time：8/11/2026 21:45:40
14 模块化
> Last Format Time：8/11/2026 21:45:41
15 错误处理
> Last Format Time：8/11/2026 21:45:41
16 JSDoc
> Last Format Time：8/11/2026 21:45:41
90 JavaScript知识点总目录
> Last Format Time：8/11/2026 21:45:41
91 JavaScript修正与补充记录
> Last Format Time：8/11/2026 21:45:41
一刻短剧项目视频优化计划
> 文档版本：v1.0 > 创建日期：2026/04/18 > 适用范围：前端视频播放性能优化
节流和防抖
触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间
前端模块化
在`vite(rollup)`的打包配置里有一个`format`的选项，可以指定最终打包产物的格式，默认情况下是`ES module`，但是不同的场景可能会有所区别，本文就想通过这个来讲讲前端模块化。 自执行函数 &g
2.1 JS历史
在上个世纪的1995年，当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。
3.1 基本语法
JavaScript的语法和Java语言类似，每个语句以`;`结束，语句块用`{...}`。但是，JavaScript并不强制要求在每个语句的结尾加`;`，浏览器中负责执行JavaScript代码的引擎会自动在每个语句的
3.2 数据类型与变量
计算机顾名思义就是可以做数学计算的机器，因此，计算机程序理所当然地可以处理各种数值。但是，计算机能处理的远不止数值，还可以处理文本、图形、音频、视频、网页等各种各样的数据，不同的数据，需要定义不同的数据类型。在JavaS
3.3 字符串
JavaScript的字符串就是用`''`或`""`括起来的字符表示。
3.4 数组
JavaScript的`Array`可以包含任意数据类型，并通过索引来访问每个元素。 要取得`Array`的长度，直接访问`length`属性：
3.5 对象
JavaScript的对象是一种无序的集合数据类型，它由若干键值对组成。
3.6 条件判断
JavaScript使用`if () { ... } else { ... }`来进行条件判断。例如，根据年龄显示不同内容，可以用`if`语句实现如下：
3.7 循环
JavaScript的循环有两种，一种是`for`循环，通过初始条件、结束条件和递增条件来循环执行语句块：
3.8 Map与Set
JavaScript的默认对象表示方式`{}`可以视为其他语言中的`Map`或`Dictionary`的数据结构，即一组键值对。
3.9 iterable
遍历`Array`可以采用下标循环，遍历`Map`和`Set`就无法使用下标。为了统一集合类型，ES6标准引入了新的`iterable`类型，`Array`、`Map`和`Set`都属于`iterable`类型。
4.1 函数的定义与调用
在JavaScript中，定义函数的方式如下：
4.2 变量作用域与解构赋值
在JavaScript中，用`var`申明的变量实际上是有作用域的。
4.3 方法
在一个对象中绑定函数，称为这个对象的方法
4.4 高阶函数
高阶函数英文叫Higher-order function。那么什么是高阶函数？
4.5 闭包
高阶函数除了可以接受函数作为参数外，还可以把函数作为结果值返回。
4.6 箭头函数
ES6标准新增了一种新的函数：箭头函数（Arrow Function）。
4.7 标签函数
前面我们介绍了模板字符串，它可以非常方便地引用变量，并合并出最终的字符串： 对于模板字符串，除了方便引用变量构造字符串外，还有一种更强大的功能，即可以使用标签函数（Tag Function）。
4.8 生成器
生成器（generator）是ES6标准引入的新的数据类型。一个生成器看上去像一个函数，但可以返回多次。
5.1 简述
在JavaScript的世界里，一切都是对象。
5.2 RegExp
正则表达式是一种用来匹配字符串的强有力的武器。它的设计思想是用一种描述性的语言来给字符串定义一个规则，凡是符合规则的字符串，我们就认为它“匹配”了，否则，该字符串就是不合法的。
6.0 简述
JavaScript的所有数据都可以看成对象，那是不是我们已经在使用面向对象编程了呢？
6.1 创建对象
JavaScript对每个创建的对象都会设置一个原型，指向它的原型对象。
6.2 原型继承
在传统的基于Class的语言如Java、C++中，继承的本质是扩展一个已有的Class，并生成新的Subclass。
6.3 类的继承
在上面的章节中我们看到了JavaScript的对象模型是基于原型实现的，特点是简单，缺点是理解起来比传统的类－实例模型要困难，最大的缺点是继承的实现需要编写大量代码，并且需要正确实现原型链。
7.1.1 浏览器对象
JavaScript可以获取浏览器提供的很多对象，并进行操作。 `window`对象不但充当全局作用域，而且表示浏览器窗口。
7.1.2 操作DOM
由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。
7.1.3 插入DOM
有两个办法可以插入新的节点。一个是使用`appendChild`，把一个子节点添加到父节点的最后一个子节点。例如：
7.1.4 删除DOM
删除一个DOM节点就比插入要容易得多。
7.2 表单
用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树。
7.3 文件
在HTML表单中，可以上传文件的唯一控件就是`<input type="file">`。
7.4 AJAX
AJAX不是JavaScript的规范，它只是一个哥们“发明”的缩写：Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求。
7.5 Promise
在JavaScript的世界中，所有代码都是单线程执行的。
7.6 async
可以用关键字`async`配合`await`调用Promise，实现异步操作，但代码却和同步写法类似：
7.7 Canvas
Canvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。
8.0 简介
在执行JavaScript代码的时候，有些情况下会发生错误。
8.1 错误传播
如果代码发生了错误，又没有被try ... catch捕获，那么，程序执行流程会跳转到哪呢？
8.2 异步处理
编写JavaScript代码时，我们要时刻牢记，JavaScript引擎是一个事件驱动的执行引擎，代码总是以单线程执行，而回调函数的执行需要等到下一个满足条件的事件出现后，才会被执行。
JSDoc
JSDoc 是一种用于 JavaScript 代码的==文档注释规范==，通过特定格式的注释来描述代码的功能、参数、返回值等信息。
JS基础
`use strict`严格模式现代模式。使用类和模块会自动的进入严格模式。
Arrray
--- **一、创建与转换数组**
Number API
--- 在JavaScript中，`Number`类型提供了许多静态方法和实例方法，用于处理数字相关的操作。以下是常用的`Number` API及实例：
JS中 for...in 和 for...of 的核心区别（超清晰版）
这是 JavaScript 面试和日常开发**高频考点**，我用最简单、最实用的方式给你讲清楚，一看就懂。
可迭代对象
--- ==实现了 `[Symbol.iterator]` 属性==的对象即是 `Iterable` 对象，然后可以使用操作符 `for...of` 进行迭代
对象
--- **一、对象创建方法**
对象的属性配置
--- 对象属性（properties），除 **`value`** 外，还有三个特殊的特性（attributes），也就是所谓的“标志”： - **`writable`** — 如果为 `true`，则值可以被修改，否
对象的循环引用与深克隆 ⌚️
--- 在 JavaScript 中，检测对象是否存在循环引用（即对象直接或间接引用自身）可以通过**追踪已访问对象**的方式实现。核心思路是：遍历对象时记录已访问过的对象，若再次遇到同一对象则说明存在循环引用。
类数组
--- 在 JavaScript 中，**类数组（Array-like）** 或**类数组对象（Array-like Object）** 是指那些==外观和行为类似数组==，但本质上不是 `Array` 实例的对象。
String
--- **一、获取与查找**
var let const
--- 由其所声明的==变量的指针==所指向的==内存地址是固定的==，所以对于数值，布尔值，和字符串来说，就是其本身。但是对于复合的数据类型（引用类型的值），其只能保证指针是不变的，指针所指向的内容不能保证不变，所以可
数据类型与转换
> Last Format Time：6/18/2026 19:00:00
Generator函数
ES6的异步编程解决方案。 形式上，Generator 函数是一个普通函数，但是有两个特征。一是，`function`关键字与函数名之间有一个星号；二是，函数体内部使用`yield`表达式，定义不同的内部状态（`yiel
作用域、闭包和this
--- 如果在代码块 `{...}` 内声明了一个变量，那么这个变量只在该代码块内可见。对于 `if`，`for` 和 `while` 等，在 `{...}` 中声明的变量也仅在内部可见，如果一个函数是在另一个函数中创建
函数进阶
--- 它实际上是通过运行时通过参数传递过来的字符串创建的。 `new Function` 允许我们将任意字符串变为函数。例如，我们可以从服务器接收一个新的函数并执行它
扩展运算符
在 JavaScript 中，**扩展运算符（`...`）** 是 ES6 引入的语法，用于将**可迭代对象**（如数组、字符串、`Set`、`Map` 等）“展开”为独立的元素，或用于收集多个元素为一个数组。它的灵活性
构造函数与New
--- 构造函数在技术上是常规函数。不过有两个约定： 1. 它们的命名以==大写字母==开头。 2. 它们==只能由 `"new"`== 操作符来执行。
箭头函数
--- JavaScript 充满了我们需要编写在其他地方执行的小函数的情况。 - `arr.forEach(func)` —— `forEach` 对每个数组元素都执行 `func`。 - `setTimeout(fu
解构赋值与剩余模式（ES6）
---
错误处理
通常，如果发生错误，脚本就会“死亡”（立即停止），并在控制台将错误打印出来。
原型
直接看原型链吧
原型链
原型链的全貌图 !Pasted image 20260412184219
类
在面向对象的编程中，class是用于创建对象的**可扩展的程序代码模版**，它为对象提供了状态（成员变量）的初始值和行为（成员函数或方法）的实现。
Date
--- 调用 `new Date()` 来创建一个新的 `Date` 对象。在调用时可以带有一些参数，如下所示： 不带参数 —— 创建一个表示当前日期和时间的 `Date` 对象
JSON
Javascript Object Notation
JavaScript中Map的实现原理
--- 哈希表是实现 `Map` 理想的数据结构，因为它能提供非常高效的查找、插入和删除操作，平均时间复杂度接近 **O(1)**。
Proxy与Reflect
proxy代理器，用于拦截某些操作，修改原生的操作：
ArrayBuffer、TypedArray 与 DataView 详解
--- [补充说明]：ArrayBuffer 表示通用的、固定长度的原始二进制数据缓冲区。
最佳实践
一篇仍在生长的笔记。
Promise的静态方法（API）
--- 使用回调的方式来进行异步编程：
CJS和ESM
好的，ESM（ECMAScript Modules）和 CJS（CommonJS）是 JavaScript 中两种最主要的模块系统。它们在设计哲学、语法和运行方式上有根本性的区别。
Module（模块）语法
在ES6模块中，导入和导出的使用如果不规范，很容易产生错误。以下是一些常见错误及其解决方法： **错误表现**：如前面提到的，使用默认导出的模块却用具名导入方式，或者使用具名导出的模块却用默认导入方式，导致找不到对应导
Generator
https://zh.javascript.info/generators
异步迭代
https://zh.javascript.info/async-iterators-generators
什么是 CSS？
- 概述：CSS 构建 - 下一页
让我们开始 CSS 的学习之旅
- 上一页 - 概述：CSS 构建 - 下一页
挑战：为传记页面添加样式
- 上一页 - 概述：CSS 构建 - 下一页
CSS 选择器
- 上一页 - 概述：CSS 构建 - 下一页
属性选择器
- 上一页 - 概述：CSS 构建 - 下一页
伪类和伪元素
- 上一页 - 概述：CSS 构建 - 下一页
关系选择器
- 上一页 - 概述：CSS 构建 - 下一页
技能测试：选择器
这个技能测试的目的是帮助你理解 CSS 选择器。
盒模型
- 上一页 - 概述：CSS 构建 - 下一页
Test your skills: The box model
- Previous - Overview: CSS styling basics - Next
层叠、优先级与继承
- 上一页 - 概述：CSS 构建 - 下一页
Test your skills: The Cascade
- Previous - Overview: CSS styling basics - Next
Challenge: Fixing blog page styles
- Previous - Overview: CSS styling basics - Next
在 CSS 中调整大小
- 上一页 - 概述：CSS 构建 - 下一页
Test your skills: Sizing
- Previous - Overview: CSS styling basics - Next
背景与边框
- 上一页 - 概述：CSS 构建 - 下一页
技能测试：背景与边框
本技能测试的目的是评估你是否完全理解了 CSS 中的背景和边框教程的内容。
溢出的内容
- 上一页 - 概述：CSS 构建 - 下一页
Challenge: Sizing and decorating a content panel
- Previous - Overview: CSS styling basics - Next
Test your skills: Overflow
- Previous - Overview: CSS styling basics - Next
图像、媒体和表单元素
- 上一页 - 概述：CSS 构建 - 下一页
样式化表格
- 上一页 - 概述：CSS 构建 - 下一页
Challenge: Styling a home color scheme search app
- Previous - Overview: CSS styling basics - Next
挑战：图片和表格元素
该任务的目的是帮助你检查对我们在本课程Images, Media and Form elements(图像，媒体及表格元素）中了解的一些值和单位的理解。
调试 CSS
- 上一页 - 概述：CSS 构建 - 下一页
测试你的技能：CSS 样式基础
此页面列出了 CSS 样式基础测试，你可以尝试这些测试来验证是否理解了本模块的内容。
hover
在 CSS 中，要实现当鼠标悬浮在一个元素上时触发另一个元素的样式变化，可以通过以下几种方式实现
定位
在 CSS 中，元素的定位主要通过 `position` 属性来控制，它决定了元素在页面中的布局行为。理解定位的关键在于理解“文档流”——即元素在页面中默认的从上到下、从左到右的排列方式。
层叠上下文
HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，**层叠上下文**就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。
布局
---
权重specificty
`css specificity` 即 css 中关于选择器的权重，以下类型的选择器依次下降
水平垂直居中
- flex: - `justify-content: center` - `align-content: center` - grid - `place-items: center` - abs
盒模型
CSS 的盒模型主要包括以下两种，可通过 box-sizing 属性进行配置：
tailwindCSS
css原子化方案之一 引入这两个后就可以快速的开发样式
前端技术栈
掌握： - HTML 会用 - CS 会用 - JS、es6 会用 - Vue 会用，并且有一定的原理认识，有一个较为完善的小项目 - ElementPlus 会用 - tailwindcss 会用 - sass 会用
前端经典业务场景全集
--- - **典型场景**：用户注册/登录、多步骤表单、动态表单、数据提交 - 动态表单：根据用户的选择，动态的更改接下来选项的表单。在选项很多的情况下，非常复杂。 - 用户注册/登录：结合路由守卫实现功能 -
埋点与监控
是指在网页或者应用程序中插入特定的代码，用于收集用户的行为数据并发送给服务器进行分析。这些数据可以包括用户的点击、浏览、输入等操作，帮助开发者了解用户的在其网站中的行为，从而进行针对性的优化和改进。
大文件上传
- 前端上传大文件时使用 Blob.prototype.slice 将文件切片，并发上传多个切片，最后发送一个合并的请求通知服务端合并切片 - 服务端接收切片并存储，收到合并请求后使用流将切片合并到最终文件 - 前端使用
多包管理
如何解决项目依赖冲突的问题呢： - 去做依赖分析
基础
--- ---
发布
`npm publish` 即可发布包
MVVM与MVC
!image.png
Core Web Vitals（核心网页指标）
https://juejin.cn/post/7363830946908979239 在前端性能优化中，我们通常使用一系列指标来量化网页的加载速度和用户体验。目前行业内最权威的标准是 Google 提出的 **Core
图片预加载与懒加载
https://developer.mozilla.org/zh-CN/docs/Web/Performance/Guides/Lazy_loading
性能优化
https://juejin.cn/post/7363830946908979239 在当今数字时代，网站的性能对于吸引和保留用户至关重要。用户不愿意等待缓慢的加载时间，而快速响应的页面将帮助您留住访问者，提升转化率。前
摇树优化
引用 MDN 文档：
权限校验
https://www.bilibili.com/video/BV1GXV96CEAA/?spm_id_from=444.41.list.card_archive.click&vd_source=47c9acd507be
ESbuild
--- 使用go语言编写，需要使用命令行来使用
Rollup
--- !Pasted image 20250908225651 !Pasted image 20250908225714 仅仅打包我们用到的代码，提升应用的性能
Vite
--- 它主要由两部分组成： - 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热替换（HMR）。 - 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输
public与assets的区别 ⌚️
在 Vite 项目中，`public` 和 `src/assets`（或 `src` 下的其他静态资源目录）是存放静态资源的两个核心位置。它们在构建工具的处理方式、引用路径以及适用场景上有着本质的区别。
常见问题
- 打包指令：`npm run build` - 出现空白页的问题，路径问题 - 改为相对路径，在vite.config.js中配置路径：`base：'./'` - 没有报错但也没有页面，是router的原因，使用在ro
Vite与Webpack的区别
**一句话概括**： Webpack 是“先打包再启动”的传统打包器，而 Vite 利用浏览器原生 ES 模块，实现了“先启动再按需编译”的开发模式。
HMR
Webpack 的 热更新（Hot Module Replacement，简称 HMR）让你在开发时修改代码，浏览器能**立即看到效果，且不刷新页面、不丢失状态**（比如 React 组件的 state 或输入框的内容）
打包原理
https://juejin.cn/post/6844904146827476999?searchId=2026050921455564643296AEC6761CE681 如果不打包，直接在浏览器里写前端代码会遇到几
魔法注释Magic Comments
- 为动态导入的模块指定 chunk 名称 - 控制代码分割后生成的文件名 - 便于调试和长期缓存
打包优化
- 公共库通过CDN来引入，本地会有缓存，有对应的文件指纹：
测试
> Last Format Time：6/12/2026 21:13:41
GIT
!Pasted image 20251018191012
git flow
是一种 Git 分支管理工作流模型，通过定义 5 类核心分支（master、develop、feature、release、hotfix）来规范团队协作开发流程，适合需要定期发布版本的项目。
Git 提交规范详解
Git 提交规范（Commit Convention）是团队协作中保持代码历史清晰、可追溯的重要实践。以下是业界广泛采用的 **Conventional Commits** 规范的详细介绍。 一条标准的 Git Com
TS项目经验
规定请求方法的参数的类型 1. 将使用的接口统一的放置在一个文件中 !Pasted image 20251008154738 2. 在定义props时使用ts
环境配置
一篇仍在生长的笔记。
0Hello TypeScript
我们从一个简单的例子开始。
内置对象
JavaScript 中有很多[内置对象][]，它们可以直接在 TypeScript 中当做定义好了的类型。
原始数据类型（基本类型）
JavaScript 的类型分为两种：原始数据类型（[Primitive data types][]）和对象类型（Object types）。
任意值
任意值（Any）用来表示允许赋值为任意类型。
类型推论
如果没有明确的指定类型，那么 TypeScript 会依照类型推论（Type Inference）的规则推断出一个类型。
联合类型
联合类型（Union Types）表示取值可以为多种类型中的一种。
对象的类型——接口
在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型。
数组的类型
在 TypeScript 中，数组类型有多种定义方式，比较灵活。
函数的类型
> 函数是 JavaScript 中的一等公民
类型断言
类型断言（Type Assertion）可以用来手动指定一个值的类型。
声明文件
当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。
类型别名
类型别名用来给一个类型起个新名字，其与接口很像。那么其与接口之间的区别是什么呢？
字符串字面量类型
字符串字面量类型用来约束取值只能是某几个字符串中的一个。
元组
数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象。
枚举
枚举（Enum）类型用于取值被限定在一定范围内的场景，比如一周只能有七天，颜色限定为红绿蓝等。
类
传统方法中，JavaScript 通过构造函数实现类的概念，通过原型链实现继承。而在 ES6 中，我们终于迎来了 `class`。
类与接口
接口（Interfaces）可以用于对「对象的形状（Shape）」进行描述。
泛型
泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。
声明合并
如果定义了两个相同名字的函数、接口或类，那么它们会合并成一个类型：
装饰器
写在前面：本章只介绍 TypeScript 5.0+ 的装饰器用法，对于 5.0 以下的版本，请参考 TypeScript 官方文档
代码检查
2019 年 1 月，TypeScirpt 官方决定全面采用 ESLint 作为代码检查的工具，并创建了一个新项目 [typescript-eslint][]，提供了 TypeScript 文件的解析器 @typescr
编译选项
TypeScript 提供了非常多的编译选项，但是官方文档对每一项的解释很抽象，这一章会详细介绍每一个选项的作用，并给出对应的示例。
类型收缩
一篇仍在生长的笔记。
TypeScript 中 `is` 与 `as` 的区别
这两个关键字虽然都和类型相关，但用途完全不同。一句话概括：
cheat-sheets 小抄
!TypeScript Types
类型体操-中等
更加疯狂了。
类型体操-实习
在正式开始做类型体操前，请阅读这篇文章 https://juejin\.cn/post/7616265766073221130
类型体操-简单
项目地址)很疯狂
运行时 Schema 校验
运行时 Schema 校验（Runtime Schema Validation）是指**在程序运行阶段，对数据的结构、类型和约束进行动态检查**，以确保数据符合预定义的 Schema（模式/规范）。
Axios
!Pasted image 20250829233919 !Pasted image 20250829235448
基础概念
Babel 是一个 JavaScript 编译器。Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器
项目工程结构设计
Babel中可以通过命令行调用： - `npm i @babel/cli`
Bootstrap 框架核心组件与类名指南
---
Postcss
Vite中集成了Postcss。如果项目包含有效的 PostCSS 配置 (任何受 postcss-load-config 支持的格式，例如 `postcss.config.js`)，它将会自动应用于所有已导入的 CSS
Hello React
React是一个用于编写用户界面的JS库，也就是说，它并不限于Web应用。
XML (可扩展标记语言)
在{}中可以写表达式
组件
这里不会将React文档中的全部内容详细的展示出来，仅会记录一些我认为很有必要记录的概念 有函数式组件与类组件 `f(data) = UI` 函数式组件传入的props是只读的，这是为了保证函数的纯净： - 没有可观
条件渲染
- To pass props, add them to the JSX, just like you would with HTML attributes. - To read props, use the `func
列表渲染
在列表渲染的过程中我们常使用map与filter方法，需要注意的是： Arrow functions implicitly return the expression right after `=>`, so yo
纯函数
In computer science (and especially the world of functional programming), a pure function is a function with t
组件结构
!Pasted image 20251206150605
响应事件
- 你可以通过将函数作为 prop 传递给元素如 `<button>` 来处理事件。 - 必须传递事件处理函数，**而非函数调用！** `onClick={handleClick}` ，不是 `onClick
State
React普通的变量的变化是不会导致使用这个数据的视图也发生变化的：
渲染与提交
This process of requesting and serving UI has three steps:
渲染快照
“正在渲染” 就意味着 React 正在调用你的组件——一个函数。你从该函数返回的 JSX 就像是在某个时间点上 UI 的快照。它的 props、事件处理函数和内部变量都是 **根据当前渲染时的 state** 被计算出
State的批量更新
**React 会等到事件处理函数中的** 所有 **代码都运行完毕再处理你的 state 更新。** 这就是重新渲染只会发生在所有这些 `setNumber()` 调用 **之后** 的原因。
6更新State中的对象
state 中可以保存任意类型的 JavaScript 值，包括对象。但是，你不应该直接修改存放在 React state 中的对象。相反，当你想要更新一个对象时，你需要创建一个新的对象（或者将其拷贝一份），然后将 st
更新State中的数组
在 JavaScript 中，数组只是另一种对象。同对象一样，**你需要将 React state 中的数组视为只读的**。这意味着你不应该使用类似于 `arr[0] = 'bird'` 这样的方式来重新分配数组中的元素
用 State 响应输入
React 采用**声明式**方式构建 UI，而不是像传统 DOM 操作那样使用**命令式**方式。开发者只需描述组件在不同状态下的 UI 表现，React 会自动处理如何更新界面。
选择State的结构
当你编写一个存有 state 的组件时，你需要选择使用多少个 state 变量以及它们都是怎样的数据格式。尽管选择次优的 state 结构下也可以编写正确的程序，但有几个原则可以指导你做出更好的决策：
在组件间共享状态
Sometimes, you want the state of two components to always change together. To do it, remove state from both of
4对State进行保留和重置
React 会为 UI 中的组件结构构建 渲染树。
迁移转态到Reducer中
随着组件复杂度的增加，你将很难一眼看清所有的组件状态更新逻辑。
使用Context深层传递参数
这和Vue的`provide`与`inject`一样
使用Reducer与Context拓展应用
结合使用就能得到一个类似全局状态管理（Pinia）的效果
使用ref引用值
当你希望组件“记住”某些信息，但又不想让这些信息 触发新的渲染 时，你可以使用 **ref**
使用ref操作DOM
由于 React 会自动处理更新 DOM 以匹配你的渲染输出，因此你在组件中通常不需要操作 DOM。但是，有时你可能需要访问由 React 管理的 DOM 元素 —— 例如，让一个节点获得焦点、滚动到它或测量它的尺寸和位
使用Effect进行同步操作
在接触 Effect 之前，你需要熟悉 React 组件中的两种逻辑类型：
移除Effect
有两种不必使用 Effect 的常见情况：
响应式Effect的生命周期
这部分有点难，我应该再看一遍
将事件从Effect中分开
事件处理函数只有在你再次执行同样的交互时才会重新运行。Effect 和事件处理函数不一样，它只有在读取的 props 或 state 值和上一次渲染不一样时才会重新同步。有时你需要这两种行为的混合体：即一个 Effect
移除Effect依赖
移除 Effect 依赖 – React 中文文档
使用自定义Hook复用逻辑
看的比较快，闲的时候再看一遍 使用自定义 Hook 复用逻辑 – React 中文文档
Fiber
https://www.bilibili.com/video/BV1mCqEBxEBv/?spm_id_from=333.337.search-card.all.click&vd_source=47c9acd507be6
RouterLink
!Pasted image 20250830220554
params与query
!Pasted image 20250830211658
动态路由、路由嵌套
也指在路由中添加/:id/:episode等动态的部分，可以在$route.params.id获取到url中的值。
核心原理
!Pasted image 20250901153901
路由元信息
一篇仍在生长的笔记。
路由（导航）守卫
!Pasted image 20250830171056
fontawesome
一篇仍在生长的笔记。
Vue 2 与 Vue 3 的核心区别
--- Vue 3 使用 Proxy 替代 Object.defineProperty
`<script setup>`语法糖
--- 如果不使用语法糖，需要进行导出，否则无法使用组件
Vue常见错误与总结
!Pasted image 20250821203327 !Pasted image 20250821203350 !Pasted image 20250821203404
Vue的双向绑定的原理
- vue是采用**数据劫持**+**发布者-订阅者模式**的方式 - 通过`Object.defineProperty()`来劫持各个属性的getter和setter； - 在数据变动时，触发set，在
Vue 内置组件 keep-alive 和 transition 的实现原理
一篇仍在生长的笔记。
Vue.js 响应式原理
---
开发日志
- 将组件拆开的时候，要在 script 后加==setup== - 使用==provide 和 inject==来传递数据，推荐“谁的数据谁负责”，这里不考虑。其传递的数据为响应式。也可以传递函数，以完成谁的数
生命周期
在 Vue.js 中，接口请求通常放在 `created` 或 `mounted` 生命周期钩子中。选择哪个钩子取决于你的需求和具体情况。
脚手架
--- 使用vue-cil做脚手架，但是现在已经官方推荐使用vue create
render与defineComponent
`defineComponent` 提供了更好的开发体验和类型推导，尤其是在 TypeScript 中，而不使用 `defineComponent` 的写法则是一种更简洁的传统方式，两者在功能上并没有本质差异，只是后者缺
组件开发
没有组件时，一般以一个html作为一个开发单元，随着现代前端的需求，这样的开发单元过大，不便管理，当有重复使用的功能时，开发会更加的低效。使用组件能够： - 开发粒度、难度降低 - 减少重复代码，避免重轮子 - 利于团队
虚拟DOM(基于Vue)
--- DOM操作的速度介于JS原生的API和基于DOM的库(Vue) 优点： - 减少操作次数：虚拟DOM可以将多个DOM操作合并成一个，减少了操作DOM的次数，以此来增速。 - 减少更新的范围：借助DOM diff来
Chrome DevTools
在 https://developers.google.cn/web/tools/chrome-devtools 上有关于 Chrome 开发者工具的详细文档说明（国内可直连）
SEO 搜索引擎优化
Search Engine Optimization 一种负责将用户的搜索信息展示的工具
Web Worker
Web Worker 使用教程 - 阮一峰的网络日志 Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Work
事件循环eventloop
> Last Format Time：6/12/2026 19:55:22
垃圾回收机制v8
> Last Format Time：6/12/2026 20:05:55
日志
一篇仍在生长的笔记。
Cookie
用于在前端对后端发送请求时会带上cookie中的内容，但其存储在本地且可以直接访问查看的特性，使其不能存储用户的私密信息与账密 **单个 Cookie 的大小不能超过 4KB（即 4096 字节）**。
本地存储与会话存储
https://www.bilibili.com/video/BV1Yb421B7Vg?buvid=YA42DFA5A2C477DE4765996C4F2779201672&from_spmid=search.searc
浏览器缓存实现
HTTP缓存（强缓存&协商缓存）
身份认证
由于http是无状态的，使用Session ID来保存用户的信息。通过将用户的信息存储在服务器中，再生成一个session用来代表用户的登录状态： !Pasted image 20251125123233
浏览器安全策略
这是浏览器最基础也是最核心的安全机制。它要求“协议、域名、端口”三者完全相同才算作同源。同源策略严格限制了不同源之间的交互，防止恶意站点窃取敏感数据，具体限制包括：
跨域&跨站
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Guides/CORS 更详细的内容 AJAX 顶级域名和二级域名不同 !Pasted image 202509031
浏览器工作原理
> Last Format Time：6/15/2026 22:32:48
AbortController ⌚️
> Last Format Time：6/12/2026 19:46:43
Clipboard API
剪贴板 **Clipboard** **API** 提供了响应剪贴板命令（剪切、复制和粘贴）与异步读写系统剪贴板的能力。从权限 Permissions API 获取权限之后，才能访问剪贴板内容；如果用户没有授予权限，则不
DOM文档对象模型
> Last Format Time：6/21/2026 17:22:15
DOM节点与其属性
> Last Format Time：6/21/2026 17:22:15
Window大小与滚动
> Last Format Time：6/21/2026 17:22:15
修改文档（document）
> Last Format Time：6/21/2026 17:22:15
元素大小与滚动
> Last Format Time：6/21/2026 17:22:15
坐标
> Last Format Time：6/21/2026 17:22:15
样式与类
> Last Format Time：6/21/2026 17:22:15
特性和属性（Attributes and properties）
> Last Format Time：6/21/2026 17:22:15
通过导航获取DOM对象
> Last Format Time：6/21/2026 17:22:15
通过搜索获取DOM元素
> Last Format Time：6/21/2026 17:22:15
Fetch API
> Last Format Time：6/12/2026 19:46:43
Intersection Observer API
交叉观察器 API 允许你配置一个回调函数，当以下情况发生时会被调用： - **目标**元素与设备视口或指定元素相交。在交叉观察器 API 中，指定元素被称为**根元素**或**根**。 - 观察器（Observer）第
XHR
（应该不会有人类要我手写吧...）
matchMedia
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/matchMedia
指针事件
指针事件（Pointer Events）是一种用于处理来自各种输入设备（例如鼠标、触控笔和触摸屏等）的输入信息的现代化解决方案。
滚动
`scroll` 事件允许对页面或元素滚动作出反应。我们可以在这里做一些有用的事情。 例如： - 根据用户在文档中的位置显示/隐藏其他控件或信息。 - 当用户向下滚动到页面末端时加载更多数据。
移动鼠标
--- 当鼠标指针移到某个元素上时，`mouseover` 事件就会发生，而当鼠标离开该元素时，`mouseout` 事件就会发生。
键盘
一篇仍在生长的笔记。
鼠标事件
请注意：此类事件不仅可能来自于“鼠标设备”，还可能来自于对此类操作进行了模拟以实现兼容性的其他设备，例如手机和平板电脑。
鼠标拖放事件
*这部分暂时先不看了*
event.target.closest()
假设代码是这样：
事件冒泡、捕获与委托
> Last Format Time：6/25/2026 19:48:41
事件：change，input，cut，copy，paste
> Last Format Time：6/25/2026 19:48:41
浏览器事件简介
> Last Format Time：6/25/2026 19:48:41
浏览器默认行为
> Last Format Time：6/25/2026 19:48:41
自定义事件
> Last Format Time：6/25/2026 19:48:41
onload、onerror
图片 `<img>`，外部样式，脚本和其他资源都提供了 `load` 和 `error` 事件以跟踪它们的加载： - `load` 在成功加载时被触发。 - `error` 在加载失败时被触发。
脚本：async，defer
现代的网站中，脚本往往比 HTML 更“重”：它们的大小通常更大，处理时间也更长。
页面生命周期
HTML 页面的生命周期包含三个重要事件： - `DOMContentLoaded` —— 浏览器已完全加载 HTML，并构建了 DOM 树，但像 `<img>` 和样式表之类的外部资源可能尚未加载完成。 -
浏览器环境 BOM&DOM
JavaScript 语言最初是为 Web 浏览器创建的。此后，它已经演变成了一种具有多种用途和平台的语言。
CDN
CDN边缘节点（分布在全球的服务器）将源站内容临时存储在本地。用户请求时，若内容有效且存在，直接返回（“缓存命中”），实现毫秒级响应。
HTTP
- HTTP是无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种式可以节省传输时间。 - HTTP是媒体独立的：这意味着，只要客户端和服务器知道如何处理的数
HTTP缓存（强缓存&协商缓存）
B站视频详解 HTTP缓存主要分为强缓存和协商缓存两种机制
RestfulAPI
RESTful API（Representational State Transfer，表述性状态转移）是一种基于HTTP协议设计接口的规范，旨在通过统一的规则实现客户端与服务器之间的高效通信。它并非严格的标准，而是一组
Webhook
Webhook 是一种**由事件驱动的 HTTP 回调机制**——当某个事件在第三方系统中发生时，该系统会主动向你预先注册的 URL 发送一个 HTTP 请求（通常是 POST），将事件数据实时推送给你。
竞态问题
在多个异步操作中，我们只关心最新一次操作的结果，而之前操作的结果可能会覆盖新的结果。实际的例子是在连续发送请求时，由于网络问题，先发送的请求较晚返回，覆盖了较新的请求。
获取浏览器的唯一标识
在前端开发中，尽管浏览器的安全沙箱限制了直接获取硬件信息，但通过“设备指纹”或本地存储生成的唯一标识符（客户端唯一ID）在实际业务中依然具有极高的应用价值。我们之所以需要获取并维护这个唯一的标记，主要是为了满足以下几个核
视频媒体相关
https://agent.qianwen.com/mos/507415222d484563bfdabddd31fb4993/8b4439b6cb0ba78813beae5fbbacb1c1
Promise经典题目
这道题考察同步代码、微任务（Promise）和宏任务（setTimeout）的执行优先级。
promisify
#promise 题目，实现一个
Agent中的正则
我们需要实现一个 `parseOutput` 函数，用来提取大模型返回的结构化字符串
解析模板字符串
没问题，正则表达式一开始看确实像“天书”，但如果把它拆开来看，其实逻辑非常清晰。
5 最长回文子串 ⌚️
> Last Format Time：7/9/2026 23:46:20
CodeTop Top55
> Last Format Time：7/9/2026 23:46:20
LeetCode Hot100
> Last Format Time：7/9/2026 23:46:20
数组&字符串技巧
> Last Format Time：7/9/2026 23:46:20
牛客 101
> Last Format Time：7/9/2026 23:46:20
算法题
> Last Format Time：7/9/2026 23:46:20
面试-常考经典1
> Last Format Time：6/12/2026 20:34:58
面试-常考经典2
> Last Format Time：6/12/2026 20:34:58
面试-数组专项
> Last Format Time：6/12/2026 20:34:58
CSS
**已知宽高**：
Flex与Grid布局
> Last Format Time：6/12/2026 20:14:29
Position
> Last Format Time：6/12/2026 20:14:29
响应式布局&移动端优先
实现“移动端优先（Mobile-First）”和“响应式布局”是现代前端开发的核心能力。简单来说，移动端优先是一种设计策略，即先设计和开发最小屏幕（手机）的样式，再逐步扩展到平板和桌面端；而响应式布局则是实现这一策略的技
层叠上下文
> Last Format Time：6/25/2026 19:48:41
风格开关实现
主要是体现语义化
DOM&浏览器 API
1. **loading="lazy"（原生方案）**：`<img src="img.jpg" loading="lazy">`，浏览器自动懒加载，兼容性已广泛支持。 2. **Intersection Ob
HTML
**不共享**。Cookie 的同源判断中，**端口不同即为不同源**。localhost:3000 和 localhost:5000 端口不同，cookie 无法共享。即使 Domain 相同（localhost），端
perload和prefetch
好的，我们来详细梳理一下前端中的 `preload` 和 `prefetch`。它们是两种非常重要的资源提示（Resource Hints），用于优化页面加载性能和用户体验，但目的和应用场景有显著区别。
form和input
form元素，定义 HTML 表单，HTML 表单用于收集用户输入。 HTML 表单包含表单元素，指的是不同类型的**input 元素、复选框、单选按钮、提交按钮**等等。
聚焦：focus blur
当用户点击某个元素或使用键盘上的 Tab 键选中时，该元素将会获得聚焦（focus）。还有一个 HTML 特性（attribute）`autofocus` 可以让焦点在网页加载时默认落在一个元素上，此外还有其它途径可以获
表单属性和方法
规范：https://html.spec.whatwg.org/multipage/forms.html.
表单：事件和方法提交
提交表单时，会触发 `submit` 事件，它通常用于在将表单发送到服务器之前对表单进行校验，或者中止提交，并使用 JavaScript 来处理表单。
HTTP&网络
废了，全忘了 - **1xx 信息**：100 Continue（继续发送）、101 Switching Protocols（协议切换） - **2xx 成功**：200 OK、201 Created、204 No Co
Call、Apply与Bind的区别 ⌚️
`call`、`apply`、`bind` 都是 JavaScript 中用来**显式改变函数运行时 this 指向**的方法，它们都定义在 `Function.prototype` 上。三者的核心区别在于**调用方式*
Iterable&Enumerable
在 JavaScript 中，**可迭代（Iterable）** 和 **可枚举（Enumerable）** 是两个完全不同维度的概念。
JS
- **防抖（Debounce）**：在事件触发 n 秒后才执行，如果在 n 秒内再次触发，重新计时。 - 场景：搜索框输入（等用户停止输入再请求）、窗口 resize 完成后再计算、表单验证 - **节流（Thro
代码运行过程
源代码- >解析器（parser）->AST->解释器（interperter）->字节码->编译器（TurboFan）->汇编 !Pasted image 2025090315312
Realm
在 JavaScript 中，使用 `instanceof Error` 进行跨环境（如跨 iframe、跨 Web Worker 或 Node.js 的 vm 模块）判断时失效，根本原因在于 **JavaScript
label
> Last Format Time：7/14/2026 20:25:30
var、let、const的区别 ⌚️
在 JavaScript 中，`var`、`let` 和 `const` 都是用来声明变量的关键字。自 ES6 引入 `let` 和 `const` 后，它们解决了 `var` 存在的许多历史遗留问题。
暂时性死区 ⌚️
“暂时性死区”（Temporal Dead Zone，简称 TDZ）是一个专门针对 `let` 和 `const` 的概念。
深拷贝使用json化的问题 ⌚️
在 JavaScript 中，使用 `JSON.parse(JSON.stringify(obj))` 来实现深拷贝虽然看似简洁，但它仅适用于纯 JSON 兼容的简单数据结构。在实际开发中，这种方式存在多个严重的局限性，
React Hooks 面试金句与原理
> Last Format Time：6/15/2026 10:50:12
useContext
真实项目中的useContext： !Pasted image 20260727114513
useDebounce
> Last Format Time：6/15/2026 10:50:12
useForm
详见useForm https://react-hook-form.com/docs/useform
useHandler
> Last Format Time：6/15/2026 10:50:12
一、ref 本身是什么
这两个 API 都和 `ref` 有关：
useList
Refine 在这里本质上是一个 "规范化的数据访问门面"——它不强耦合于任何 UI 组件库，只是提供了一套统一的 hook 接口来约束前端如何获取和变更数据，确保所有数据流都经过同一个通道，便于维护和测试。
useLocalStorage
> Last Format Time：6/15/2026 11:46:35
useMemo的安全数组
你可以先把这段代码拆成两个问题来看：
useQuery
> Last Format Time：7/14/2026 20:22:22
useTheme
当然。你只要真正理解一句话，`useContext` 就掌握一半了：
自定义Hooks
> Last Format Time：6/15/2026 10:50:12
React 组件卸载与 this引用
> Last Format Time：6/15/2026 11:46:35
React
> Last Format Time：7/30/2026 10:45:21
定时器组件 &ref与state⌚️
> Last Format Time：6/15/2026 11:46:35
生命周期 ⌚️
> Last Format Time：7/30/2026 16:21:17
First
实现一个函数first()，其返回值类型是其输入的数组或元组的第一个类型
any、unknown 和 never
在 TypeScript 中，`any`、`unknown` 和 `never` 是三个非常特殊且核心的类型。它们在类型系统中的定位截然不同：`any` 和 `unknown` 属于**顶层类型（Top Type）**，
as const
我需要先查看这个文件的上下文，了解 `as const` 具体应用在什么地方。
TS
- **协变（Covariance）**：子类型可以赋值给父类型。如 `Array<Cat>` 是 `Array<Animal>` 的子类型（TS 默认给数组协变） - **逆变（Contrava
Vue
- **Vue2（Object.defineProperty）**： - 需要递归遍历所有属性添加 getter/setter - 无法监听新增/删除属性（需要 Vue.set/Vue.delete） - 不
1基础篇
* **Q1: 前端需要注意哪些SEO** A: SEO optimization helps search engines understand page content and improve rankings.
2进阶篇
* **Q: 如何理解HTML语义化** A: HTML语义化是指使用恰当标签表达内容含义而非仅控制样式。核心价值：1）提升可访问性，屏幕阅读器可准确解析内容结构；2）改善SEO，搜索引擎抓取时能识别标题层级、导航、
888
* **Q: 盒模型** A: CSS盒模型是布局的基础概念，每个元素被表示为一个矩形盒子，由content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。标准盒模型（box-s
4手写篇
防抖（debounce）是指触发事件后，在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则重新计算函数执行时间。
5AI面试
* **Q: 什么是大语言模型（LLM）？它和过去的 NLP 模型本质区别是什么？** A: 大语言模型是基于 Transformer 架构、在大规模文本语料上预训练的深度学习模型，通过自回归方式预测下一个 toke
cache.manifest 文件内容
参考答案：前端在SEO优化中需要注意以下关键点： 1. **语义化HTML**：使用正确的HTML标签（如h1-h6, article, section, nav等）构建页面结构，帮助搜索引擎理解内容层次。 2. **M
进阶篇题目列表
JavaScript 是一种动态弱类型语言，共有七种基本数据类型和一种引用类型。理解类型及其检测方式对于编写健壮的程序至关重要。
进阶篇题目列表
一篇仍在生长的笔记。
可投递企业
--- https://apply.careers.dji.com/campus-recruitment/dji/143359?locale=zh-CN#/?keyword=%E5%89%8D%E7%AB%AF&pag
吴明翔-前端开发
**联系方式**： Danoday@Foxmail.com 17845577339 19703319137 **个人主页**： GitHub https://github.com/DanoAndHolidays
0 面试技巧&HR面⬇️
> Last Format Time：6/12/2026 21:03:57
10 美团-一面
> Last Format Time：6/12/2026 21:03:57
11 B站-一面
> Last Format Time：6/12/2026 21:03:57
12 腾讯-一面-企业微信团队
> Last Format Time：6/12/2026 21:03:57
13 腾讯-一面-腾讯金融科技
> Last Format Time：6/12/2026 21:03:57
14 腾讯-二面-腾讯金融科技
> Last Format Time：6/12/2026 21:03:57
15 美团-一面-核心本地商业
> Last Format Time：6/12/2026 21:03:57
16 斑马智行-全部
> Last Format Time：6/12/2026 21:03:57
17 字节-一面-飞书
> Last Format Time：6/12/2026 21:03:57
18 美团-二面-核心本地商业
> Last Format Time：6/12/2026 21:03:57
19 心影随形-全部
> Last Format Time：6/12/2026 21:03:57
1磐松资产-前端实习-一面
> Last Format Time：6/12/2026 21:03:57
20 thunderbit-全部
> Last Format Time：6/12/2026 21:03:57
21 converge ai-全部
> Last Format Time：6/12/2026 21:03:57
22 字节-国际化广告创意与品牌
> Last Format Time：6/12/2026 21:03:57
2字节跳动-豆包前端实习-全部
> Last Format Time：6/12/2026 21:03:57
3百度-前端实习面试-一面
> Last Format Time：6/12/2026 21:03:57
5光庭-前端实习-一面
> Last Format Time：6/12/2026 21:03:57
6懂车帝-前端实习-一面
> Last Format Time：6/12/2026 21:03:57
7字节-抖音团购-全部
> Last Format Time：6/12/2026 21:03:57
8腾讯-前端-全部
> Last Format Time：6/12/2026 21:03:57
9字节&美团-笔试
> Last Format Time：6/12/2026 21:03:57
面试题目汇总1-16
汇总所有面经中的提问和手写代码题目，标注来源面试场次。
新简历实习（2025-1 - 2026-03）
在2025年12月至2026年3月的实习期间，Dano作为前端研发实习生，深度参与了火山账号管理与Quota管理两大业务模块的迭代与维护工作。他将学习重心放在了业务逻辑的理解与前端工程化实践上，通过 **17个已合并 M
虚拟滚动
假设你有 **10 万个树节点**。如果全部渲染成 DOM，浏览器会直接卡死。虚拟滚动的思路是：
0旧简历实习
**标黑**的部分为重点考察：
1组件重构&权限面板
1. 重构时有没有抽离自定义Hook？举例说明抽离了哪些？ - `useState`：管理列表筛选条件、权限面板的临时状态 - `useEffect`：监听筛选条件变化，自动重新拉取列表数据；组件挂载时获取权限树
2线上稳定&分页导出
这几个bug，有两个是我自己实现的时候没有这方面的知识导致的，另一个是后端数据
3监控埋点&错误
你参与前端稳定性治理，给核心链路做监控埋点，请讲讲你的埋点设计思路、埋点类型，以及如何评估可用性提升效果？ **满分答案：** 前端稳定性是大厂前端重点工作，我负责的是**审批流、配额申请、账号操作**这三条核心用户链路
4工程化&代码精简
**回答**：团队遵循标准Git-Flow：`main`为线上稳定分支，`develop`为开发分支，新需求从`develop`拉出`feature/*`分支，线上紧急Bug从`main`拉出`hotfix/*`分支，禁
5职业素养&压力
**回答**： 1. **0-2分钟 紧急止损**：临时下线导出按钮，展示维护提示，同步财务负责人，暂停结算工作； 2. **2-5分钟 定位问题**：查看监控、控制台与网络请求，定位根因为分页参数计算异常，引发死循环请
分页导出 Excel
1. 系统中涉及的两类 API 2. API 一：树节点懒加载 3. API 二：分页导出 4. 完整用户操作流程 5. 架构：Web Worker 生成 Excel 6. 架构：受控并行请求 7. 架构：进度节流 8.
权限预览面板
> 读完之后，你会理解: 为什么要用 Set 管理权限、为什么要分离 origin/temp、如何做增量 diff、互斥规则怎么设计、 > 以及每一行代码背后的设计考量。目标是让你看完之后自己能从头写一个。
视频播放器交互设计与性能优化 - 面试准备文档
好，作为这个项目的开发者，我来以面试回答的方式，把 video.js 的集成设计讲清楚。
下落代码背景
一篇仍在生长的笔记。
Anatomy包
https://linear.app/code-forge-official/issue/COD-292/anatomyfeaturecli%E4%BD%9C%E4%B8%BA%E9%A1%B9%E7%9B%AE%E7%
Extract
`Extract` 是 TypeScript 内置的**工具类型**，作用是：
IIFE写法的工厂函数
当然可以直接写 `function`。这里写成这种形式，主要是为了利用 **立即执行函数（IIFE）+ 闭包**，把 `counter` 私有化。
TS类型 extends
这里的：
自定义错误类型与构造函数参数属性语法
这里的 `path` 和 `cause` 都是在给错误对象补充更多上下文信息。
二、`anatomy-tree.ts`：树的构造、查询和修改
这三个核心文件构成了一条完整链路：
交叉类型 & 与联合类型
这里的 `&` 是 TypeScript 的**交叉类型（Intersection Type）**，表示：
定义
https://chatgpt.com/share/6a55fbe9-a63c-83ec-a345-f748d3ef6cd0
数组转联合
是的，`AnatomyQuantityValues` 是一个**运行时真实存在的值**，具体来说是一个数组：
hook 调用顺序不一致
这是 React 的一条硬性规则：每次渲染时，hooks 的调用数量、调用顺序必须完全一致。
表单数据获取&提交需要loading
> Last Format Time：7/14/2026 20:56:57
Monorepo 设计分析
本文档剖析本项目的 Monorepo 架构设计，并沉淀可复用的设计方法论。
将本地的包直接使用
--- !Pasted image 20260624232939
useList
前端/面试/八股/React/Hooks/useList
useOne
useQuery
UI设计
---
Zod 使用实践指南
> Last Format Time：7/14/2026 20:56:57
zod
> Last Format Time：7/14/2026 20:56:57
tRPC简述
是一个 TypeScript 优先的 RPC（Remote Procedure Call） 框架，核心卖点是 端到端类型安全
性能优化
> Last Format Time：7/14/2026 20:56:57
Anatomy 的 DAO
❯ createWithTx 与普通的create的区别是什么呢，为什么要这样去写呢
Archetype的DAO层
1. 这是一个 DAO（Data Access Object）层文件 2. 使用了 Drizzle ORM 3. 提供了对 `archetypesTable` 的数据库操作 4. 包含 CRUD 操作：list、getB
Archetype的服务层
引入Archetype 用neverthrow进行错误处理
DAO&DTO
用户问的是 DAO 与 DTO 的区别。这是一个概念性的问题，不需要查看代码，我可以直接解释这两个概念的区别。
Zod Schema 模式
> Last Format Time：7/14/2026 20:56:57
数据库迁移 Drizzle 迁移文件说明
--- 每次运行 `bun run db:generate` 后，Drizzle Kit 会在 `apps/app/drizzle/` 下生成三个文件：
Anatomy
针对这个需求，最合适的方案不是直接保存一个递归 JSON，而是：
LoadingState&useList的组合
fix: 为 Crate/Archetype 列表页添加加载状态，修复 CrateDetailPage 的 hooks 顺序错误
组件的content
这里的 `=` 表示：**给泛型参数设置默认类型**。
TailwindCSS
---
TanStack Router 路由模式
> Last Format Time：7/14/2026 20:56:57
ToastStoreProvider
useContext
Zustand 5.x API
下面用一套完整的 Todo 项目，把 Zustand 从基础讲到实际项目用法。示例基于当前 Zustand 5.x API；截至 2026 年 7 月，npm 上的最新版本是 5.0.14。([NPM][1])
createToastStore
---
cn
将classname中存在的表达式转换为字符串，而不是使用：
procedure中的service位置
有区别，但当前业务行为基本一致，主要差别是生命周期。
scrollbar-gutter
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scrollbar-gutter
useDebounce
> Last Format Time：7/14/2026 20:56:57
useForm
https://react-hook-form.com/docs/useform
void
--- ##
以schema为中心的
> Last Format Time：7/14/2026 20:22:22
双层级导航结构
这种导航栏与侧边栏对齐的布局形式，在UI设计和前端开发中通常被称为**“顶部-侧边混合导航布局”**，也常被称作**“双层级导航结构”**或**“T型布局”**。
异步三态切换
其实完全不需要写`? : `
用neverthrow进行错误处理
这个模式来自 Rust 的 Result 枚举。核心思路是：用返回值代替 throw。
表单最佳实践指南
本文基于项目 Skill `form-best-practice` 提炼，覆盖 TypeScript + React + shadcn/ui + react-hook-form + Zod 架构下的表单编写规范。
Badge[bædʒ]
--- !Pasted image 20260625173740
Button
> Last Format Time：7/9/2026 23:46:20
CrateCodeSnippetDialog
---
CrateCodeSnippetsPanel
---
Dialog
> Last Format Time：7/14/2026 20:56:57
Lable
> Last Format Time：7/14/2026 20:56:57
LoadingState
> Last Format Time：7/14/2026 20:56:57
ProjectFileTree
> Last Format Time：7/15/2026 16:05:36
ProjectFileTree题目
---
不使用解构赋值
> Last Format Time：7/14/2026 20:56:57
EXAM-20260730-02 交付说明
- 起点： - 找到的依赖链： - 最终修改文件及原因：
EXAM-20260730-02 答辩与现场接管记录
- 实现阶段可以正常使用 Agent。 - 考生明确提交实现后，考官才冻结 diff 并生成 4–6 个代码答辩问题。 - 答辩应由考生独立完成：可以查看最终源码和类型定义，不查看此前 Agent 对话，不让 Agent
CrateDialog
一篇仍在生长的笔记。
深色模式
核心就是靠 <html> 上的 dark class 来驱动全局主题切换。机制分三层，都在 apps/app/src/styles.css 里： 1. Tailwind 的 dark 变体绑定
阅卷报告：CrateDetailPageContent
> Last Format Time：7/9/2026 23:46:20
阅卷报告：ThemeProvider.tsx（第二次）
**考生**: Dano Day **试卷**: apps/app/src/components/ThemeProvider.tsx **总分**: 73 / 80 **评级**: 🌕🌕🌕🌕🌑（良好）
DataBase
> Last Format Time：7/14/2026 20:22:22
Schema化
> Last Format Time：7/14/2026 20:56:57
drizzle的版本冲突
> Last Format Time：7/14/2026 20:22:22
双周复盘：2026-07-03 至 2026-07-17
> 记录人：Dano Day > 项目：Daedalus > 时间范围：2026-07-03 至 2026-07-17
空字符串与filter
> Last Format Time：7/14/2026 20:25:30
踩坑
> Last Format Time：7/14/2026 20:56:57
Barrel Export
--- 桶导出（Barrel Export）是一种模块组织模式：每个目录下的 `index.ts` 文件**仅**负责将该目录中所有公共模块通过 `export *` 统一 re-export，对外暴露单一入口。
Button 与 Button Group
相关文档：Button Button Group
Form
--- 在 Daedalus 项目中，form是一套**完整的前端表单架构规范**：
总结
我现在用**最直白、最直接、最不绕弯子**的的话告诉你——调研的方案里没有一个能 npm install 直接用的。Daedalus 要解决的问题（AI 代码审查平台的代码结构元数据描述）本身就没人做过一模一样的
用于稳定描述代码结构的数据结构方案
--- 本报告调研了 10 类市场上用于描述代码结构与软件架构的现有方案，从**结构单元建模、关系建模、约束/契约建模、边界表达、可组合性、可扩展性、查询友好度、采用成本**八个维度逐一分析，并结合 Daedalus
COD-225 Anatomy 管理与版本绑定实现计划
> **执行指引：** 推荐使用 `subagent-driven-development` 技能逐任务执行此计划；每个 Task 完成规格审查和代码质量审查后再进入下一个 Task。 > 步骤使用 chec
「Feature」Introduce Crate as an independent metadata entity[ˈentəti] | 引入 Crate 作为独立元数据实体
--- Daedalus 目前已有 Repository 作为一等实体，但缺少一个更高层的抽象来描述代码如何组织、每个部分承担什么职责。在讨论架构或规划代码结构图时，团队目前只能回退到 Package、Module、F
实施计划：Archetype 管理 (COD-86)
Daedalus 正在引入 Archetype 作为设计层契约，与 Crate（物理代码组织）区分开。Archetype 通过一组 Condition 来定义，描述某个实体必须满足什么条件才能被归类为该 Archetyp
引入Archetype
> Last Format Time：7/9/2026 23:46:20
Linear
--- 每一个issue，都可以指派(assign)对象处理，当你完成一个issue的时候要将assign的对象改为下一个阶段去处理的角色，并修改issue的状态，例如：将`In Progress` -> `In
国际化
项目基于 **react-i18next**（i18next 的 React 绑定）实现国际化，支持英文（en）和中文（zh）两种语言。
需求整体流程
---
项目待做
- [x] 设计Archetype的页面 - [ ] 全局的z-index token管理 - [ ] 可以试试将服务转发出去用来填表 - [x] 补充一些实用的skill
小兔鲜二级分类页
使用RouterLink自带的active-class：来实现功能。 官方文档)
小兔鲜详情页
---
登录页
整体的功能就是表单校验和登入登出 !Pasted image 20250803102358 使用Element+中的form组件
结算页
!Pasted image 20250816214948 使用dayjs来实现时间的格式化 !Pasted image 20250816220033 在解除渲染的时候清除定时器
购物车
!Pasted image 20250816163618
uniapp
优点： - 一套代码，多端编译 - 开发时间短，花钱少 缺点： - 相比原生性能差 - 上架问题 - 多端项目调试繁琐 集中于中小型公司
项目介绍
--- 基于之前原生开发网站的二次开发。 由于短剧的竖屏播放，并不适合h5，所以全面模仿抖音 --- 仅有短剧相关、分类的部分 使用Apifox悦享好剧
一刻短剧项目文档
--- 【整理自原内容】本项目是基于原生开发网站的二次开发，专注于短剧的竖屏播放体验。由于短剧的形态特性不适合传统H5布局，前端界面将全面模仿抖音的交互与视觉风格。
Express
封装了Node.js的API，简化了搭建后端的操作流程
Graphical User Interface
现在常用的开发模式是Web开发，这种使用Swing与AWT的开发方式已经过时，这次学习主要是为了学校的课程考核要求 !Pasted image 20251115164053 !Pasted image 202511151
Java IO 流考试速成指南
- **流**：数据在输入/输出设备与程序之间的流动通道 - **特点**：单向流动、顺序访问、先进先出
Java可能考察的代码
**GUI** 电话薄
Lambda表达式
首先在命名空间实现两个类，Email和Sms，和一个接口Message： !Pasted image 20251115184546 !Pasted image 20251115183723 !Pasted image 2
大题
求素数：
模拟试题（第四套）
---
第一章 绪论
- **数据**：是信息的载体，描述客观事物属性的数、字符等能被计算机识别和处理的符号集合 - **数据元素**：数据的基本单位，通常作为整体考虑，由若干数据项组成（是不可分割的最小单位） - **数据对象**：具有相同
7.1 查找的基本概念
!Pasted image 20251030214257 查找表并不是指某一种特定的数据结构，而是被查找的数据的一个称呼 - 静态查找表：仅查找 - 动态查找表：查找、插入与删除
3.1 栈
!Pasted image 20251108164901
第二章 线性表
**定义**：大于等于零个具有相同数据类型的数据元素的有限序列，表示为L=（a1，a2，a3...an），数据元素的个数n为零的时候表示空表，a1表示表头元素，除其外的其他元素有且仅有一个（直接）前驱，an表示最后一个元
5.1 树
!Pasted image 20251109182350 路径是有向边 !Pasted image 20251109182755
8.1 排序基本概念
!Pasted image 20251102185141 !Pasted image 20251102185109 !Pasted image 20251103143724 每次将大于待插入元素的前面的元素后移一
6.1 图的基本概念
!Pasted image 20251029180546 主要掌握==深度优先==搜索与==广度优先==搜索。掌握图的基本概念及基本性质、图的存储结构（邻接矩阵、邻接表、邻接多重表和十字链表）及其特性、存储结构之间的转化
4.1 串定义与基本操作
这章在大纲中是查找的一部分，考察的内容也比较少 !Pasted image 20251109161119 !Pasted image 20251109162052 !Pasted image 2025110916
1.1 计算机发展
!Pasted image 20251111195855 !Pasted image 20251111200219 !Pasted image 20251111200901 !Pasted image 2025
3.1 存储系统概念
!Pasted image 20251130143511 主存与Cache使用半导体作为存储介质，磁盘磁带通过磁性材料存储 !Pasted image 20251130144643 !Pasted image 20
2.1 数据的表示
!Pasted image 20251112172818 基数：内个数码位所用到的符号的数量，r进制的基数为r !Pasted image 20251112172942
PPT内容页初稿
---
单片机PPT习题集
一篇仍在生长的笔记。
单片机学习通习题
---
基于标签的推荐系统（MovieLens）— 张量分解与LDA对比实验
基于 MovieLens 数据集，实现并对比了两类标签推荐算法：
嵌入式系统与应用 2024
芯片级嵌入、模块级嵌入区别 嵌入式系统任意三个特性 如何提高移植性 体系结构演变任写三个变种 分析指令，sub stmfd mrs 大小端 给一个D3~D0在一个地址大小端分别怎么存放 mmu和mmu三个功能 thumb
tag-based-graph-recommender
==在制作 PPT 的时候，类似在 clean_tag 方法、某某函数，太过于具体的字样就不要写了，直接阐述函数的功能就行==
游戏设计与开发报告
作为经典的2D沙盒游戏，地图设计是泰拉瑞亚的灵魂所在。其地图采用有限的二维网格结构，通过高度分层、水平跨度以及独特的生态群落，构建了一个充满探索深度的世界。以下将从地图规格、垂直分层、水平布局、生态群落、种子系统以及地图
跨专业税法课堂习题
- 单选：18 * 1.5’ 27’ - 多选：15 * 3‘ 45‘ - 大题：03 * 6‘ 18’ 消费稅、增值税、企业所得税 - 计算：01 * 10’ 10‘ 居民个人所得税的预扣除与
会议
会议纪要： - 选题： - 题目：要在前面加“：” - !Pasted image 20250617220004
平台前端相关
主要内容： - 定义接口： - 接口说明：
题目与分工
题目：深部开采煤岩损伤演化全过程及其多维信息时空响应特征分析平台 作品名： - 前缀： - “岩析”—— - ~~“煤忧”——~~ - **“煤岩损伤时空眼”——深部煤岩损伤演化全过程及其多维信息时空响应特征智能分
题目相关
二、题目名称 **深部开采煤岩损伤演化全过程及其多维信息时空响应特征分析平台** 三、题目介绍 随着浅部资源逐渐枯竭，煤炭开采向==深部==发展。深部开采面临的高地应力、高瓦斯压力、高温等复杂条件，煤岩结构畸
学习路线
好的，一份全面的数学建模所需学习的模型和算法清单需要覆盖多个领域，因为建模的本质就是用数学工具解决实际问题，而问题本身是多样化的。以下是一个结构化的分类清单，涵盖了从基础到进阶的核心内容：
AI工具使用详情
==AI工具名称：ChatGPT== ==版本：ChatGPT 4.1== ==使用目的：获取关于斯皮尔曼的p值在统计学和医学领域的精度区别==
Gamma回归
!Pasted image 20250907095615 !Pasted image 20250907095815 !Pasted image 20250907095833 !Pasted image 202509071
第二题
--- - **公式内容**：以阈值 \( \tau \) 定义孕妇 \( j \) 的最早达标孕周，\( \text{EW}_j = \min\{ g: Y_j^{\max}(g) \geq \tau \} \)；若
决策树回归
在本研究中，为了刻画孕妇 BMI 对胎儿 Y 染色体浓度最早达标孕周的影响规律，我们采用 **CART（Classification and Regression Tree）回归树模型**。该模型能够将复杂的非线性关系转
参考文献共4篇（真实论文）
==Ke G, Meng Q, Finley T, et al. LightGBM: A highly efficient gradient boosting decision tree[ C ]// _Advances
图论与最短路径
数据结构：邻接矩阵
层次分析法
!Pasted image 20250801172255 !Pasted image 20250801171819 一致性检验： !Pasted image 20250801172425 !Pasted image 20
数学规划
!Pasted image 20250805203712 **决策变量**：x、y **目标函数**：红色 **约束条件**：绿色
研究目的与数据对象
下面把你这份“**第一题：变量分布→相关性→Gamma 回归**”脚本改写成论文/报告可用的**方法描述**，并逐段解释“**为什么要这么做**”。
==第四题==
--- 下面把你这份“Q4：QC-Selective LightGBM + Conformal（改进版）”代码拆成可直接写进论文/报告的方法描述，并逐段解释为什么这样做。为便于对照，我保留了关键变量名（如 `z13`、`
代码
---
第一次
- 格式需要统一 - 项目研究背景少4000（由赵婉和浩瀚查找资料并） - 参考文献部分（针于对项目研究背景） - 硬件图片展示（向机械组要） - 保证前后逻辑的一致性 - 成员信息、指导教师 必须有发票 尽可能的
ppt制作
- 项目背景 - 行业痛点 - 市场需求 - 现有产品不足 - 产品介绍 - 核心技术 - 优势 - 技术支持 - 市场分析 - 未来展望 - 预期成果
分工
==吴明翔==：终端平台开发及整体负责项目的进度、资源分配和沟通协调。 - 制定项目计划和时间表，监督项目进度，确保按时交付。 - 组建项目团队，明确团队成员的角色和职责。 - 协调团队内外的沟通与合作，负责项目的预算和
申报书
- 国家级 - YOLOv8 - 分工 - 经费 - 学校提供条件 - 项目所属一级二级学科 一级**计算机科学与技术** 二级
路演文稿
各位评委老师好，我是这次的答辩人，我们的项目名是基于建筑外墙吸附检测智能车的实时目标检测分析平台。主要分为五个部分。
智能车
- 机械臂 - ==电机== - 云台 - 红外测距模块 - ==电动导管风扇== - 探头 - 摄像头 - 目前有数据展示和硬件部分（实现的部分已高亮） - 云台、红外、探头、摄像头部分可以开发 - 机械臂开发的可
YOLOv8
- 使用Miniconda来管理Python虚拟环境 --- - 查看环境：`conda env list` - 新建： - 检查Python版本：`python --version` - 新建环境：`conda
版本
- 一个窗口对应一个特征点，逐一窗口遍历 - 一个特征点对应多个窗口 - 使用不同的卷积层来识别不同大小的物体 - 随机杀死区域，减小特征区域 - 减少过拟合 - 引入窗口间的关系，计算窗口间的关系 - 注意力机制
全栈学习路线
太好了！从前端转向全栈是非常自然且明智的进阶方向。这份学习路线将帮助你系统地学习后端开发，并最终实现前后端交互，成为一名真正的全栈开发者。路线设计遵循**循序渐进、学以致用**的原则，优先选择与前端技术栈（JavaScr
常见的比赛
Hackathons 在有限的时间内完成一个前端项目
素描
一篇仍在生长的笔记。
六级单词
1. discourse：n. 语段，话语；论文，演讲 2. manuscript：n. 原稿，手稿 3. marvels：n. 令人惊异的人（或事）；奇迹（复数） 4. remnants：n. 残余部分，剩余部分；（织
六级单词汇总1
XXXX-6.10.25
第一章 简单句
**结构**：一句话中只能有一个动词，其余的为非谓语形式，构成独立主格。在没有动词的时候要使用be动词来充当。 **分类**： - 主语+谓语 - 主语+谓语+宾语 - 主语+谓语+表语 - 主语+谓语+宾语+宾补 -
第二章 并列句
**定义**：使用连词链接两个句子或两个从句，使用连词的时候其前有无逗号无所谓
论文
以下是关于 **“自然语言处理中的情感分析技术综述”** 的论文大纲。这个大纲按照 IEEE 期刊论文的格式设计，结构清晰、层次分明，可以帮助你有条理地组织文献综述内容。
PR常用快捷键
1. 功能：隐藏/显示顶部项目信息
尝试自己的风格
我想做一个和`ただの晩酌`、类似的剪辑风格，不过不是自己去做饭，而是去便利店购物，然后回来吃的，类似于`大阪流浪社长`一类的，不过我是做国内的。
前端能力画像
> 目标：React + TypeScript 前端开发（校招）；主栈：React, TypeScript；公司档位：互联网中大厂。 > 分数只描述已有证据。`—` 表示尚未形成足够的独立验证，不等于能力为零
能力画像更新记录
- 将目标锁定为 React + TypeScript 前端岗位、互联网中大厂校招。 - 扫描 474 篇前端 Markdown，建立知识覆盖地图；文件数和标题不计为独立掌握。 - 导入代达罗斯已阅卷考试作为高置信实践来
秋招学习计划
> 面向 互联网中大厂的 React + TypeScript 前端开发（校招），主栈为 React, TypeScript。
EXAM-20260729-01 阅卷报告：Anatomy 列表状态流
- 考生：Dano Day - 得分：63 / 90（70%） - 评级：🌕🌕🌕🌑🌑 — 及格，有需改进之处 - 致命问题：3 个 - Git 标准答案基准：`0e800f1d0b7ced0a105b0a8ae
EXAM-20260730-01 阅卷报告：Finding 反馈交互链路
- 考生：Dano Day - 得分：60 / 80（75%） - 评级：🌕🌕🌕🌑🌑 — 及格，有需改进之处 - 致命问题：2 个 - Git 标准答案基准：`4e03802a81989b0ae6da6ca77
EXAM-20260730-01：Finding 反馈交互链路
- 薄弱程度（主要依据）：能力画像中“事件冒泡与复合交互边界”为 40%、“JSX 信息完整性与异步分支”为 60%，均低于 70%。 - 重复错误：最近一次答卷中行内按钮冒泡导致“归档并导航”同时发生；mutation
EXAM-20260730-02：仓库导入的分支与异步一致性
最近练习已经能写出基本异步三态和提交边界，但仍需要证明以下能力可以迁移到新场景：
代达罗斯前端考试索引
| 考试编号 | 日期 | 主题 | 状态 | 题数 | 得分 | 主要知识点 | 题目 | 阅卷报告 | |---|---|---|---|---:|---:|---|---|---| | EXAM-20260730-
前端能力画像
| 知识点 | 尝试次数 | 最近得分 | 平均得分 | 掌握度 | 趋势 | 重复错误 | 最近考试 | 下次复习 | |---|---:|---:|---:|---|---|---|---|---| | React
Vue 组件与 Render 函数
从组件边界、选项对象到 Render 函数，建立 Vue 组件的完整心智模型。
EXAM-20260729-01：Anatomy 列表状态流
这是一场基于历史能力画像的针对性复测，不是首次基线考试。
EXAM-20260728-01 阅卷报告：代码片段管理
- 考生：Dano Day - 得分：76 / 100（76%） - 评级：🌕🌕🌕🌑🌑 — 及格，有需改进之处 - 致命问题：2 个 - 试卷文件： - `moveCrateCodeSnippet.ts`
EXAM-20260728-01：代码片段管理
- 历史报告显示 Refine Hook 返回值与 mutation 解构掌握度为薄弱，本卷用 `useList`、`useCreate`、`useUpdate`、`useDelete` 和 `useCustomMuta