Search Docs
K
旧版博客
标签
分类
归档
旧版博客
标签
分类
归档
Menu
Overview
Filter
Life
Blog Features
Git持续集成:自动服务器推送/站点更新
首页 自定义Hero主题
主页 自定义Overview List
自动 Overview 组生成
自动 meta 组生成
自动 文章连续行末位空格生成
自动 文章中文字符替换为英文
文章 可选 hide功能
减肥计划
饮食控制
力量训练(每日每次)
有氧训练(每日30-60分钟)
2025年终总结
领证
婚纱照
离职
休息
投简历
关于面试
入职
Nextjs
NextJS基础
路由
Streaming
Cache
Action
水合问题
水合(Hydration)
水合问题(Hydration Mismatch)
水合问题解决方案
useEffect + mountedState 控制
Data Down
suppressHydrationWarning
next/dynamic关闭 SSR(Client Only)
props 序列化问题
SuperJSON 解决序列化问题
Tailwind CSS
tailwindcss.config.js
动态类名丢失问题
类名优先级问题
Next.js 登录态无闪烁渲染(Hydration Flicker Free)
TL;DR
这个问题为什么会出现
Demo 目标
Demo 目录
Step 1: 水合前写入
data-user-status
Step 2: Tailwind 增加用户态变体
Step 3: 用 CSS 分流登录入口和头像
Step 4: 登录/登出后实时更新
效果验证
方案二:组件始终渲染 + CSS 类名控制显隐
这个方案的代价
工程化建议
结论
page-router
SSR RSC Streaming Flight
SSR
RSC
Streaming
Flight
Pages Router 一无所有
Workflow
静态博客搭建(1)Rspress
0.为什么要重构博客
博客搭建
文档解读
路由是自动生成的
站点SEO
服务器和域名
主题改造
重构博客的一些想法
静态博客搭建(2)CI/CD
1. 服务器 配置 公钥
2. 仓库 配置 Action Secret
3. 仓库 配置 GitHub Action
4. 其他推荐配置(不影响功能)
5. 步骤解析
静态博客搭建(3)HTTPS
0. 前置条件
1. 阿里云配置
2. 服务器 安装证书
3. nginx配置修改
4. 一些解释
GitHub Actions 与 CI/CD 自动部署实战
1. CI:持续集成(Continuous Integration)
2. CD:持续交付 / 持续部署(Continuous Delivery / Deployment)
1. GitHub Actions 是什么?
2. 与 Git 和 GitHub 的关系
3. GitHub Actions 的优势
1. 架构组件职责分工
2. 自动部署流程(示例:Node 项目构建部署)
3. 常用工具部署说明
4. 可选替代方案
博客写作涉及的技术栈指南
Markdown语法 和 markdown-it
Front Matter 和 gray-matter
最后,一个配置项拉满的文章示例
GitHub远程仓库连接配置
0. 检查是否已有 SSH Key
1.生成 SSH Key
2.复制公钥内容
3.添加 SSH Key 到 Git 平台
4. 测试是否成功连接
下面是可能碰见的问题
git pull
报错(连接github 22端口报错),修改端口
git pull
报错(连接github 443端口也报错),修改hosts
git commit
报错
npm install
下载时速度慢
后续遇见其他问题待更新
pnpm、yarn、npm
本质区别
npm yarn 的两大问题
pnpm 的两步解法
pnpm 其他优势
pnpm 使用碰见的问题
参考链接
Git的使用
本地相关----------------------------
远程仓库相关------------------------------
git clone
git fetch
git push 远程仓库唯一修改入口
git pull
分支相关------------------------------
git merge / git rebase
git switch
git branch
重置相关------------------------------
git reset 回退,head指针修改
git revert 回退,新建commit
git log / git reflog
git checkout 切换版本
git switch 拉取远程新分支
git 冲突
git reset --hard 丢弃本地所有修改
git commit -m ‘提交信息’ 写错了
碰到一个问题写一个
Git 分支原理
一、commit 是什么
二、分支的本质
三、HEAD 指针
四、Git 历史是 DAG,不是树
五、标准分支操作
六、删除分支不丢数据
七、三种合并策略
八、常用查看命令
macOS / Cursor / Terminal 快捷键速查
macOS 系统级
Cursor 编辑器
Terminal 终端
Git Stash 注释工作流:本地保存、导出与跨电脑恢复
完整操作流程
优点
Typescript
TS基础
1. 环境准备
2. 基本数据类型
3. 联合类型
4. 字面量类型和类型字面量
5. 类型推导
6. 包装对象
7. 类型断言
8. 函数类型
8. 函数重载三种写法
9. typeof keyof 函数this类型约束
10. interface 和 type
其它
TS类型技巧(一):提取
1. 数组 提取类型
2. 字符串 提取类型
infer extends 和 & string
3. 函数 提取类型
4. 索引类型 提取类型
5. 一句话用法总结
TS类型技巧(二):构造
1. 构造数组
2. 构造字符串
3. 构造函数
4. 构造索引类型(重点)
其他
TS类型技巧(三):递归
1. 提取Promise value类型
2. 反转数组
3. 查找数组元素
4. 删除数组元素
5. 扁平化数组
6. 构造数组
技巧! 积累参数(accumulator)
7. 字符串递归
8. 对象类型的递归
技巧!强制计算/归一化
TS类型技巧(四):计数
1. 加法
2. 减法
3. 乘法
4. 除法
5. 字符串长度
6. 数值比较
7. Fibonacci
TS类型技巧(五):联合类型
1. 条件类型
2. 如何判断联合类型
3. 模板字符串类型
4. 索引类型
5. 利用分发机制
7. boolean any never 的分发
8. 联合类型的最后一个类型
9. 其他
TS类型技巧(六):特殊类型
1. IsAny
2. IsEqual
3. NotEqual
4. IsUnion
5. IsNever
6. IsTuple
7. UnionToIntersection
8. GetOptional
9. GetRequired
10. RemoveIndexSignature
11. ClassPublicProps
12. as const
TS类型技巧(七):函数
函数重载
逆变与协变
技巧!对最终结果进行最后处理
调用签名
泛型函数类型
TS类型体操
0. 内置工具类速查
1. a=1&a=2&b=2&c=3
2. 大小驼峰转中分线
3. 数组分组
4. 路径变对象
5. 指定Key变可选
6. 柯里化
7. 索引类型所有Key的路径
8. 合并两个索引类型
9. 日期
10. TupleToObject
MyReadOnly2
Promise.all
逆变与协变
前言
什么是兼容性
入参数量上的兼容
TypeScript函数检查的逆变与协变原理
什么是逆变与协变?
为什么满足 逆变 会安全
结束语
.tsconfig.ts
TS类型来源
tsconfig是否影响编译
待填坑
Javascript
JS基础
一共有哪些数据类型
最大安全整数 2^53-1
如何判断数据类型
垃圾回收机制
事件委托
CommonJS AMD CMD UMD ES6Module
事件循环/宏任务和微任务
闭包
关于重绘和重排
history路由模式需后端配合
WeakMap弱引用 与 {}强引用
导致js里this指向混乱的原因是什么?
0.1 + 0.2 !== 0.3,如何解决
写一个发布订阅模型
如何定位哪行js代码导致了页面刷新?
0.1 + 0.2 是否等于 0.3,如何解决?
数组的 sort 默认是按什么排序的?使用的什么算法?
如何终止JS程序的执行
如何优化一个网站的性能
如何在前一个页面对下一个页面进行优化
JS常见手写
原型-作用域-this
Promise题
call-apply-bind-new
JS执行过程
1. 原型链
2. 执行上下文(ES3时代)
3. 变量对象(ES3时代)
4. 作用域链(ES3时代)
5. This
6. JS执行(ES3时代)
7. 执行上下文(ES5时代)
8. 词法环境 和 变量环境(ES5时代)
9. JS执行(ES5时代)
10. 闭包
感谢
原型-作用域-this
原型和原型链(对象属性的查找)
执行上下文(变量的查找)
This
call-apply-bind-new
ES6写法
ES3写法
手写bind解析
手写new解析
手写Promise
myPromise 1.0 解决同步
myPromise 1.5 解决异步
myPromise 2.0 解决链式调用
感谢
Promise困难题
Promise.all()
Promise.race()
实现mergePromise函数
JS异步并发调度器
封装一个异步加载图片的方法
Promise 和 async/await 有什么联系
使用Promise实现每隔1秒输出1,2,3
使用Promise实现红绿灯交替重复亮
ajax请求相同资源时,实际只发出一次请求
例题收集
感谢
JS手写合集
浅比较
手写深拷贝
手写防抖节流
合并含相同项的数组
对象数据构造Html标签树含缩进
LRU算法
待实现
BigInt
BigInt
最大安全整数
为什么 0.1 + 0.2 与 0.3
为什么 1Byte 是 8bit
宽带和下载速度
JS异步并发调度器
Angular
1.ng-组件
概览
生命周期钩子
视图封装
组件交互
组件样式
在父子指令及组件之间共享数据
动态组件
自定义元素
组件完结
2.ng-模板
简介
插值
模板语句
模板变量
管道
DOM属性的绑定语法
NgModule 模块
3.ng-指令
内置指令
自定义一个属性型指令
自定义一个结构型指令
Functional Programming
1.什么样的语言可以使用 Functional Programming 思想
2.Functional Programming 的特点
3.Functional Programming 有什么优势
4.总结
认识Rxjs
1.异步编程增多
2.异步带来新的问题
3.RxJS 是什么
4.Functional Reactive Programming 是什么
5.总结
Rxjs基础知识
RxJS 是什么
RxJS 几个基本概念
RxJS的纯净性使得一个应用状态被隔离出来
Observable 填补了多值主动推送的空白
拉取(Pull)和推送(Push)
Observables 作为函数的泛化
Observable 生命周期
Observer(观察者) ubscription(订阅) Subject(主体)
BehaviorSubject、ReplaySubject 和 AsyncSubject
Operators (操作符)
操作符订阅链
实例操作符 vs. 静态操作符
查找你想要的操作符
操作符分类
Scheduler(调度器)
调度器类型
使用调度器
总结
Rxjs:Observerble是什么
Observer Pattern 观察者模式
Iterator Pattern 迭代器模式
Lazy evaluation 延迟执行
Observable 总结
Rxjs:Observerble简单使用
创建 Observerble 实例
参数 Observer 观察者
addEventListener 与 Observable 的区别
总结
Rxjs:Observerble创建方式
Rx.Observable.of
Rx.Observable.from
Rx.Observable.fromEvent
Rx.Observable.never empty throw
Rx.Observable.interval timer
unsubscribe 停止订阅
总结
Rxjs:Operators操作符
Marble diagrams 描绘observable行为的图
Operator 简单举例
总结
常见操作符
take
first
takeUntil
concatAll
用上述四个函数完成简易拖拉
skip
takeLast
last
concat
startWith
merge
repeatWhen操作符实现轮询
Chrome
Chrome基础
浏览器
从地址栏输入 URL 到首屏渲染
浏览器渲染流程(已拆分)
HTTP 缓存 协商缓存 强缓存 弱缓存 CDN
cookie sessionStorage localStorage
同源
跨域
HTTP 协议
其他
CSS 树
JS 引擎
从输入网址到首屏渲染
0. 用户输入
1. HTTP请求流程
2. 首屏渲染
浏览器进程版URL请求流程
HTTP 请求的过程
IP UDP TCP
浏览器渲染流程
HTML/CSS/JS
构建DOM树
样式计算
布局阶段
分层
光栅化
合成
总结
重排 重绘 合成
CSS文件的下载阻塞DOM树的合成
事件循环
chrome浏览器进程
待填坑
Algorithm
时间复杂度
为什么需要 时间复杂度分析
大O复杂度表示法
时间复杂度分析规则
常见复杂度量级
数据结构与算法之美笔记
时间复杂度与空间复杂度
数组与链表
栈与队列
排序基础
排序
散列表
散列函数
散列冲突
一个工业化散列表
散列表将LRU缓存淘汰算法时间复杂度降为O(1)
散列表 和 链表结合使用
其他
哈希算法
优秀的哈希算法要求
哈希算法的应用
哈希算法在分布式系统中的应用
二叉树
树
二叉树
如何储存一个二叉树
平衡二叉树
红黑树
堆
插入一个元素
删除堆顶元素
堆排序
数组
数组的特点
数组的访问越界问题(C语言)
为何数组从0开始编号
链表
什么是链表
数组 和 链表
LRU缓存淘汰策略
38.分治算法
解题步骤
分治算法实战
MapReduce的分治思想应用
栈
支持动态扩容的顺序栈
栈的应用
队列
队列的代码实现
排序(冒泡,插入,选择)
如何评价一个排序算法的优劣
冒泡排序(Bubble Sort)
插入排序(Insertion Sort)
选择排序
Array.prototype.sort
总结
额外:当数据结构为链表
排序(归并,快排)
归并排序(mergeSort)
快速排序(quickSort)
找到第K大的数
排序(计数,基数,桶)
桶排序(BucketSort)
计数排序(CountingSort)
基数排序(RadixSort)
C语言的qsort函数策略
二分查找
查找第一个等于给定值
查找最后一个相等的数
查找第一个大于等于给定值的元素
查找最后一个小于等于给定值的元素
Leetcode
回溯算法
回溯算法
一些总结
N皇后问题
77. 组合
216. 组合总和 III
17. 电话号码的字母组合
39. 组合总和
40. 组合总和 II
131. 分割回文串
93. 复原 IP 地址
78. 子集
90. 子集 II
491.递增子序列
46. 全排列
47. 全排列 II
332. 重新安排行程
51. N 皇后
37. 解数独
贪心算法
一些总结
455. 分发饼干
376. 摆动序列
53. 最大子数组和
122. 买卖股票的最佳时机 II
55. 跳跃游戏
45. 跳跃游戏II
1005. K次取反后最大化的数组和
134. 加油站
135. 分发糖果
860. 柠檬水找零
406. 根据身高重建队列
452. 用最少数量的箭引爆气球
435. 无重叠区间
763. 划分字母区间
56. 合并区间
738. 单调递增的数字
动态规划
技巧
基础问题
背包问题
完全背包
多重背包
买卖股票
子序列问题
qiankun
Webpack模块打包分析
CommonJS规范
ESModule规范
总结
后记
SystemJS与微前端
微前端
模块规范
systemJS
systemJS原理简述
systemJS在微前端中的职责
systemJS与webpack懒加载
iframe(待更新)
跨域(待更新)
systemJS使用
systemJS原理
systemJS简单实现
SingleSpa原理
微前端
SingleSpa
publicPath
使用方法
实现原理
qiankun 学习笔记
微前端
Why Not Iframe
微应用通信
import-html-entry
CSS 隔离方案
JS 隔离方案
为什么JS沙箱只需要隔离window
qiankun 使用
qiankun 接入过程中遇到的问题
子应用如何接入
url问题
静态资源必须支持跨域
样式隔离
微应用互相跳转
微应用文件更新之后,访问的还是旧版文件
qiankun window.onXxx = fn不生效
Http
CORS 跨域
跨区请求流程
涉及配置
预检请求
Cookie携带控制
Credentials: true不能与*一起用
跨域方案
CORS
反向代理
JSONP
window.postMessage
WebSocket
网络安全
----网络安全----
XSS
CSRF
CORS
sso-oauth2-jwt
传统登录 Session + Cookie
无状态登录 JWT
单点登录
SSO
HTTP 缓存
最佳实践
http缓存
CDN缓存
如果做到回滚
webpack如何配置hash
gzip配置
Webpack
构建打包中静态资源URL处理
publicPath静态资源地址
URL处理配置
注意:动态上下文打包 问题
注意: publicPath 默认为 'auto'
从Webpack到Rspack
从Webpack到Rspack
Rspack
待更新
Practices
React个人最佳实践-弹窗
业务组件代码范式
弹窗代码范式Demo
弹窗Demo使用
核心实现
优势对比
封装建议
基于业务思考
总结
Vue
Vue3响应式原理
Vue三要素
Vue3变化
Reactive
Effect
Watch
Proxy Handler全部实现代码
Computed
Ref
总结
AI
大模型到AI项目
大模型
分词
常见 AI 项目
大模型常见参数
一个例子
提示词(一):提示词工程
1.明确需求
2.选择合适的模型
3.拆分提示词
待填坑
提示词(二):如何生成提示词
步骤
提示词技巧
LangGPT 结构
提示词模块(以 LangGPT 为例)
模块内容(以 LangGPT 为例)
CO-STAR 结构
提示词(二):五个小提示词技巧让AI精准输出
0. 定角色
1. 举例子
2. 拆步骤
3. 做对比
4. 做回溯
Claude Code 配置全解析:CLAUDE.md、config.json、Skills、Memory 的区别与最佳实践
为什么要搞清楚这四个东西
四者总览
CLAUDE.md:你写给 Claude 的规则书
config.json:工具本身的设置项
Skills:可复用的工作流模板
Memory:Claude 自动积累的项目经验
综合对比
真实配置示例
权衡与局限
总结
延伸阅读
Agent 管理方法论:用经典管理学驯服 AI Agent
核心观点
TRM 任务分级管理
对抗锚定效应
抑制过度设计
瓶颈理论优化
完整框架
延伸阅读
React
React基础汇总
React版本区别
JSX是什么
虚拟DOM
Diff算法(React15)
Diff算法(React16-17)
Fiber是什么
Hooks(React 16.8)
ref原理
context原理
事件机制
Lane优先级
并发渲染
类组件 和 函数组件 对比
生命周期
React 涉及的算法
React面试题
React笔记
1. 代码中所有JSX其实都是函数
2. 函数组件的调用原理
3. React.createElement 和 ReactDOM.render 原理
4. 批量更新(类组件为例)
5. React的事件都绑定在容器上代理,而Handler在当前真实dom的store属性上
7. react与Vue的不同
6. ref
7. DOM-Diff
8. context穿透传值原理
9. 生命周期
10. Hooks
11. router原理
pureComponent原理
12. redux原理
React16架构演变
React15架构导致卡顿
React16如何解决卡顿
React16架构是什么
卡顿即掉帧
模拟 StackReconciler 与 FiberReconciler
代数效应(未完成,待加深理解)
感谢
Lanes模型
React16 Fiber
Fiber是什么
Fiber的工作原理(Fiber树篇)
Fiber的工作原理(Fiber节点篇)
JSX是什么
其他
为什么Vue不需要Fiber
Diff算法
ReactHooks
useState
useCallback + useMemo
useReducer
useContext
useEffect
useLayoutEffect + useRef
forwardRef + useImperativeHandle
延迟场景产生的闭包问题
React Router
路由基本原理
6.0以前版本的 react-router原理
6.0版本 react-router
继承window.history对象,监听操作路由
路径参数的原理
Link NavLink Navigate的原理
Zustand
使用
Zustand优势
待填坑
History路由 VS Hash路由
路由原理
API 具体实现
一些思考
优缺点
Redux VS Recoil VS Zustand
待填坑
断言库Jasmine
三个基础API
匹配器(Matcher)
beforeEach系列函数(全局API)
fail函数(全局API)
嵌套调用describe
禁用describe 和spec (全局API)
spy的创建
模糊期望值
Clock
异步
spy监控策略设置
其他笔记
React.lazy / Suspense
Demo加载Echarts
Zustand
Zustand Scoped Store:Zustand + ReactContext
1. 核心思想
2. Demo代码
3. 优点与对比
4. 适用场景
Ai-coding
两个 skills 提高 AI 编码一次性成功率
直接先上结论
一、Vibe Coding 的核心瓶颈
解决路径:四阶段门控(GitHub Spec Kit)
提高 AI 编码率的两个核心 Custom Skill
五、总结