- 博客(177)
- 收藏
- 关注
RSS订阅
原创 【手写React源码】用 TypeScript 实现一个简化版 React
迷你React实现：本文介绍了一个教学型迷你React实现的核心架构，包含JSX解析、Virtual DOM、Fiber协调和Hooks系统。项目采用分层设计： JSX解析层（jsx.ts）将JSX转换为虚拟DOM 虚拟DOM层管理组件结构 Fiber架构实现增量渲染 协调器处理DOM差异 Hooks系统管理状态 JSX解析采用递归处理，通过createElement创建虚拟DOM节点，对文本节点特殊处理为TEXT_ELEMENT类型。
2025-06-05 19:19:23
1306
1
原创 【全栈宇宙】这是一份置顶的博客知识清单
老曹的博客知识清单，我将持续维护本清单，方便大家随时查阅 如果发现有链接访问错误，以及其他问题，可在本知识清单评论区中指出，我将及时回复并反馈修正，谢谢！
2025-05-23 21:08:38
1031
原创 HTML5 教程第3节：HTML 文本内容与排版
本文介绍了HTML文本内容与排版的核心标签及其在Vue/React框架中的实践应用。主要内容包括： 基础标签详解：标题标签（h1-h6）、段落（p）、三种列表（ul/ol/dl）、引用（blockquote/q）、代码展示（code/pre）等核心HTML标签的规范使用。 框架组件封装： Vue示例：基于Element UI的el-card封装可复用内容卡片组件，支持标题、段落、列表等结构化内容 React示例：使用Ant Design的Card组件构建文本内容容器，保持语义化结构
2025-06-13 16:05:42
412
原创 HTML5 教程第2节：HTML 基础语法
本文介绍了HTML5基础语法要点，包括HTML元素结构（标签、内容）、元素分类（块级、行内、自闭合元素）、属性写法（name="value"格式）和布尔属性。重点讲解了文档语义化结构、注释语法、字符编码设置方法，并推荐使用W3C验证工具检查代码规范。文中提供了完整示例代码和10个高频面试题解答，涵盖元素分类、属性写法、编码设置等核心知识点，适合HTML初学者系统学习基础语法。
2025-06-13 15:53:02
286
原创 HTML5 教程第1节：HTML5 简介与环境搭建
本节介绍了 HTML5 的发展背景、核心新特性及开发环境搭建。HTML5 是 W3C 推出的最新标准，相比 HTML4 增强了语义化标签、原生多媒体支持、本地存储等功能。学习了使用 VSCode 编写第一个 HTML 页面，并了解了 HTML5 的基本文档结构：包括 <!DOCTYPE html>、<html>、<head>和<body> 标签的作用。同时掌握了字符编码设置、移动端适配、页面运行与调试方法，为后续深入学习 HTML 打下坚实基础。
2025-06-12 18:59:21
457
原创 HTML5 教程教案（完整版）
本课程旨在帮助开发者系统掌握 HTML5的核心知识体系，涵盖从基础语法、语义化标签、表单控件、多媒体支持，到 2025 年即将标准化的 HTML 新特性与 Web 组件技术。我将通过理论 + 实战结合的方式，详细讲解覆盖所有现代 Web 开发所需 HTML 技术栈。
2025-06-12 08:42:05
791
原创 【高级前端进阶】RFC文档上手阅读教程指南
本 RFC 上手教程全面讲解了 RFC 的起源、结构、分类及阅读方法，涵盖 RFC 在不同工程师角色中的应用与落地实践。内容包括如何高效阅读、引用、分析 RFC，结合工具如 Wireshark、curl 进行协议验证，并提供学习路径图与笔记模板，帮助开发者系统性掌握互联网核心技术标准，提升协议理解与工程落地能力。
2025-06-11 17:15:56
795
原创 【前端方案】设计一个全站请求耗时统计工具
摘要：全站请求耗时统计工具设计方案 该方案旨在构建一个覆盖全站请求的性能监控系统，包含前端、网络层和后端的多维度监控。系统架构采用分布式链路追踪技术，核心功能包括：1)前端埋点采集页面加载和API耗时；2)网络层通过Nginx日志记录传输延迟和CDN指标；3)后端服务通过OpenTelemetry等框架追踪接口处理时间。实现方案涵盖数据采集、统一上报、存储分析及可视化展示全流程，可有效识别性能瓶颈、优化用户体验并保障服务SLA。系统支持从用户浏览器到数据库的全链路追踪，并提供实时监控与报警能力。
2025-06-11 15:34:53
851
原创 【前后端交互】权限接口设计规范（完整版）
权限接口设计规范摘要：本文档详细阐述了中后台系统权限接口的设计标准，包含六大核心部分：1）明确权限系统的安全、灵活、可扩展等设计目标；2）划分8类权限接口，包括用户权限、角色管理等；3）制定通用规范，统一请求方式、请求头格式和响应结构；4）提供7类具体接口设计示例；5）提出8项安全设计建议，强调认证机制和权限校验等；6）给出6条测试建议。文档通过表格、JSON示例等形式，系统性地规范了权限接口开发流程，确保系统安全性和可维护性。
2025-06-11 14:43:44
764
原创 【权限架构】2025年权限业务与技术清单
2025前端权限业务系统技术解析 本文全面剖析前端权限系统技术实现，涵盖三大核心维度： 技术体系：包括RBAC/ABAC模型、动态路由、指令权限、接口拦截等20项关键技术点 业务场景：从产品视角梳理用户认证、角色管理、数据隔离等9大功能模块 解决方案：针对权限粒度、动态路由性能、数据边界模糊等10大典型难点提供解决路径 特别强调前端实现中的关键环节：Vue路由守卫处理页面权限、自定义指令控制按钮粒度、JWT解析实现状态管理，以及如何通过缓存策略优化权限变更同步。
2025-06-11 14:39:55
794
原创 【HTTP】深入详解 HTTP 缓存策略：从历史来源发展到最佳实践
HTTP缓存策略概述与最佳实践 本文系统介绍了HTTP缓存机制的发展历程、核心原理及现代应用。从HTTP/1.0的Expires和Last-Modified头部，到HTTP/1.1引入的Cache-Control和ETag等更精细的控制方式，详细解析了强缓存与协商缓存的运作机制。文章深入剖析了常见缓存头部功能、CDN缓存优化策略，并提供了针对静态资源、HTML页面和API接口的缓存配置建议。最后总结了缓存调试工具和面试常见问题，为开发者实现高效缓存策略提供全面指导。
2025-06-11 13:57:24
626
原创 【文件业务】2025年文件业务与技术清单
本清单系统梳理了2025年前端文件相关业务方向与产品能力，涵盖上传、存储、管理、预览、下载、处理、同步、协作等全生命周期管理。结合AI、Web3、多模态技术趋势，提出智能文档解析、去中心化存储、语音转写等创新方向，并列出20+核心功能模块及对应技术实现。适用于SaaS、云盘、办公协作等产品设计，强调安全性、性能优化与用户体验提升，助力构建高效、智能、安全的文件管理系统。
2025-06-10 22:07:33
841
原创 【前端】文件指纹全链路解析与实践指南
文件指纹技术通过哈希算法生成唯一标识，适用于构建优化、缓存管理和资源检测等场景。本文深入探讨了文件指纹的核心原理、常见哈希算法对比（MD5/SHA系列）及实现方案，包含Node.js和浏览器端的代码示例。实际应用涵盖Webpack构建命名、文件秒传和Service Worker缓存控制。针对大文件处理提出分块读取和增量哈希策略，并给出性能优化建议和安全防护措施（如防碰撞攻击）。最后还介绍了自动化测试和监控体系构建方法，为大型项目和高并发场景提供完整解决方案。
2025-06-10 21:43:34
1024
原创 【HTTP】深入详解 Content-Type：从历史发展到最佳实践
HTTP协议中Content-Type用于指定请求或响应体的媒体类型。常见类型如application/json用于JSON数据，text/html用于HTML文档，multipart/form-data用于表单文件上传等。它帮助客户端和服务器正确解析数据格式。正确设置Content-Type对数据传输至关重要，能避免解析错误，确保数据按预期处理，是HTTP通信中不可或缺的头部信息。
2025-06-10 14:41:46
955
1
原创 企业级脚手架工具开发实践指南
本文全面讲解了企业级脚手架工具的开发实践，涵盖历史发展、主流工具对比、核心架构设计、技术实现细节、最佳实践及高频面试题。通过TypeScript构建支持多技术栈（Vue/React/Node.js）的CLI工具，实现项目模板生成、插件系统、权限控制与模板管理。提供完整代码示例与开发流程指导，适用于前端工程化体系建设，提升团队开发效率与代码规范统一性。
2025-06-10 14:07:44
770
原创 【前端】如何解决页面请求接口大规模并发问题
本文深入讲解了前端处理大规模接口并发请求的八大核心策略，包括请求合并、节流防抖、缓存策略、懒加载、优先级管理、错误重试机制及性能监控等，并提供了详细的代码实现和封装建议。同时涵盖了 10 个高频面试题，帮助开发者优化页面性能、提升用户体验。适用于 Vue、React 等现代前端框架，适用于电商、管理系统、数据平台等多种业务场景。通过合理运用这些技术，可有效降低接口压力、加快首屏加载速度并增强系统稳定性。
2025-06-10 12:34:46
1115
原创 【前端】Js超过Number最大值的数怎么处理？
JavaScript 中 Number 类型最大安全整数为 2^53 - 1，超限会导致精度丢失。可通过以下方法处理： 1. 使用 BigInt`类型（加 n 后缀或 BigInt()构造函数）表示任意大整数，但需注意不能与 Number混合运算； 2. 字符串存储大整数（如 ID）； 3. 借助 bignumber.js 等库进行复杂运算； 4. 自定义 JSON.stringify处理 BigInt序列化。根据场景选择合适方案即可。
2025-06-10 11:57:00
765
原创 big.js 上手教程（最全最详细）
Big.js 上手教程摘要：Big.js 是用于任意精度十进制算术的小型 JavaScript 库，可避免浮点数精度问题。安装可通过 npm/yarn 或 CDN 引入。使用前需创建 Big 对象，支持加、减、乘、除等基本运算，还提供比较、绝对值、四舍五入等方法。通过字符串初始化可确保高精度，适用于金融、科学计算等场景。
2025-06-09 10:36:25
991
原创 TypeScript 教程 第10章：类型断言与非空断言
类型断言用于显式告诉编译器某个值的具体类型，语法包括 as Type 和 <Type>，适用于处理 DOM、接口数据解析等场景。非空断言 `!` 则用于确保值不为 `null` 或 `undefined`，常见于延迟初始化或组件引用。两者都绕过类型检查，使用需谨慎，推荐优先使用类型守卫和可选链等更安全方式。结合 Vue 项目，常用于路由组件定义和异步导入增强类型提示。
2025-06-09 08:20:53
1318
原创 2025年 GitHub 与 Stack Overflow 中 20 大经典前端 Bug 总结
《2025年github与stackoverflow》中20大经典前端bug与解决方案大总结，详细列举bug分类，区分初中高级前端的应对时间与troubleshooting能力清单。
2025-06-09 07:50:41
908
原创 TypeScript 教程 第9章：null 与 undefined 处理
本文系统讲解了 TypeScript 中 null 与 undefined 的语义差异、--strictNullChecks 编译选项的作用及空值处理方法（联合类型、非空断言、可选属性、可选链、空值合并）与安全实践（类型守卫、避免滥用非空断言、与 JavaScript 假值处理的区别），并通过 API 响应类型示例展示实际应用，还包含 10 道高频面试题解析以帮助开发者掌握空值安全机制。
2025-06-08 18:28:52
532
原创 TypeScript 教程 第8章：枚举类型（enum）
TypeScript枚举(enum)类型总结： 枚举是TypeScript中定义命名常量集合的特殊类型，主要分为数字枚举、字符串枚举和异构枚举三种形式。数字枚举默认从0开始递增，支持反向映射；字符串枚举需要显式赋值，更适合语义化场景；异构枚举混合使用但不推荐。常量枚举(const enum)是编译时优化版本，不会生成实际JavaScript对象。枚举常用于状态管理(如订单状态)、角色权限控制等场景，能有效替代魔法数值，提高代码可读性和类型安全性。
2025-06-08 17:36:45
1133
原创 TypeScript 教程 第7章：类型别名与联合类型
本文介绍了TypeScript中的类型别名与联合类型。类型别名通过type关键字创建，可简化复杂类型定义，适用于对象、函数等多种类型场景。联合类型使用|表示变量可属于多种类型之一，常用于函数参数或API返回值。文章还对比了类型别名与接口的区别，并通过综合示例演示了这些特性的实际应用，展示了如何构建类型安全的API响应结构和用户信息处理逻辑。
2025-06-08 17:01:35
804
原创 TypeScript 教程 第6章：对象类型与接口（Interface）
📝 TypeScript 对象类型与接口指南 本文介绍了 TypeScript 的核心类型系统特性： 1️⃣ 对象类型 - 严格定义对象属性名称和类型 2️⃣ 接口(Interface) - 强大的类型定义工具，支持继承、合并等高级特性 3️⃣ 函数类型 - 参数与返回值的类型标注，包括可选/默认参数 4️⃣ 函数重载 - 多个签名对应不同参数类型 5️⃣ 接口高级用法 - 可选属性、只读属性、索引签名和多重继承 6️⃣ 类型别名与接口对比 - 关键差异和使用场景建议
2025-06-08 16:37:35
847
原创 TypeScript 教程第5章：数组与元组类型
TS教程第五章聚焦数组与元组类型。数组用于存储相同类型元素，可通过`类型[]`或`Array<类型>`定义，支持数组操作方法。元组是固定长度与类型的数组，各元素类型不必相同，定义时需明确元素类型和顺序，访问时严格类型检查。元组支持解构赋值，但修改需符合类型定义。二者均能提升代码可维护性，元组更适用于固定格式数据场景。
2025-06-07 20:23:08
942
原创 TypeScript 教程第4章：类型注解与类型推断
文章摘要 TypeScript第4章讲解类型系统核心机制：类型注解和类型推断。类型注解需手动指定变量/函数类型（如let age:number），适用于未初始化变量或复杂场景。类型推断能自动推导类型（如let count = 10推断为number），简化代码但不够精确。避免使用危险的any类型，推荐用联合类型或泛型替代。最佳实践包括：函数参数必须注解，简单赋值可依赖推断，复杂结构建议显式注解。本章还提供类型练习和面试题，帮助掌握如何平衡类型安全与开发效率。
2025-06-07 13:33:09
1064
原创 【Typescript教程03】TS基本类型与变量声明
本文摘要： 《TypeScript教程-第3章》详细讲解了TS的基本类型和变量声明。重点介绍了number、string、boolean和symbol四种原始类型的特性和用法，对比let、const、var三种变量声明方式的作用域与特性差异。通过典型类型错误示例说明TS的类型检查机制，并提供10道高频面试题及解析，涵盖类型推断、联合类型等核心概念。本章为TS类型系统的基础内容，强调静态类型检查的优势，帮助开发者构建更安全可靠的代码。
2025-06-07 12:58:24
991
原创 【Typescript教程02】tsconfig.json 实战配置清单（最全版）：涵盖所有配置项 + 性能优化建议
本文提供了一份全面的TypeScript tsconfig.json配置清单，适用于各类项目(Vue/React/Node/小程序等)。配置逐行详细注释，涵盖基础设置、类型检查、模块支持、构建输出等关键选项。重点推荐：strict:true增强类型安全、esModuleInterop:true解决模块兼容性、target:es2020支持现代JS特性。同时提供include/exclude文件筛选说明，以及针对不同项目类型的配置建议。该配置可作为TypeScript项目的最佳实践参考，帮助开发者优化编译过程
2025-06-06 17:02:31
1024
原创 【Typescript教程01】TypeScript 入门简介与环境搭建
《TypeScript 入门指南：从安装到开发环境搭建》 摘要： 本文详细介绍了TypeScript的核心概念和开发环境配置流程。TypeScript作为JavaScript的超集，提供了静态类型检查、类型推断和现代化语法支持。通过5个关键步骤（安装TypeScript编译器、ts-node工具、Node类型定义等），开发者可以快速搭建完整的开发环境。文章还对比了不同工具的使用场景，并提供了tsconfig.json的优化配置方案，包括编译目标版本设置、严格模式启用等建议。
2025-06-06 16:51:24
791
原创 【手写前端面试题02】深浅拷贝
《手写深拷贝和浅拷贝》摘要： 本文通过"影分身"和"克隆人"的类比，生动阐释了浅拷贝与深拷贝的本质区别。浅拷贝仅复制对象的一层属性，嵌套对象仍共享引用；而深拷贝则递归复制所有层级，创建完全独立的新对象。文章提供了浅拷贝和深拷贝的代码实现，包含简洁版和详细注释版，并对比了两者的特性差异（如递归性、循环引用处理等）。同时介绍了如何优化深拷贝性能，处理特殊数据类型，以及应对面试常见问题。最后给出支持函数、Symbol等类型的拓展版本，为开发者提供全面的拷贝方案参考。
2025-06-06 10:34:15
704
原创 【手写前端面试题01】防抖和节流
《手写防抖和节流：高效时间管理的核心技巧》 防抖和节流是优化高频操作的核心技术。防抖（debounce）在事件触发后等待一段时间，若无新触发才执行，适合搜索框输入等场景；节流（throttle）则限制执行频率，确保固定时间只执行一次，适用于滚动监听等高频事件。两者区别在于：防抖重置计时器，节流保持固定间隔。实现时需注意定时器管理、this绑定和参数传递，可通过immediate/leading参数控制首次执行。典型应用包括防止重复请求、优化性能等。掌握这些技术能显著提升代码效率，避免无谓的资源消耗。
2025-06-06 09:33:07
621
原创 【React源码32】深入学习React 源码实现——React 错误边界（Error Boundaries）与异常捕获机制
摘要： React 错误边界（Error Boundary）是防止组件树异常导致应用崩溃的关键机制，通过类组件的 getDerivedStateFromError 和 componentDidCatch 实现。前者静态更新状态以渲染降级UI，后者处理副作用（如日志记录）。
2025-06-05 09:11:37
810
原创 【React源码31】深入学习React 源码实现—— useLayoutEffect底层实现（最完整版）
深入解析 useLayoutEffect：原理与源码分析 useLayoutEffect 是 React 中同步执行 DOM 布局相关副作用的 Hook，与 useEffect 的关键区别在于执行时机：它在 DOM 更新后、页面绘制前同步执行，适合测量布局或避免视觉闪烁。源码分析显示，React 通过标记 LayoutMask 在提交阶段同步执行这些副作用。初始化阶段保存副作用函数和依赖项，更新阶段对比依赖变化，最终在 commit 阶段（commitLayoutEffects）同步执行。
2025-06-04 21:17:25
784
1
原创 【React源码30】深入学习React 源码实现—— useDeferredValue底层实现（最完整版）
useDeferredValue是React 18引入的并发特性Hook，用于延迟更新非紧急状态以提升UI响应性。其核心原理是利用React的优先级调度机制（IdleLanes），将值的更新标记为低优先级，在主线程空闲时执行。源码分析显示，该Hook通过初始化阶段缓存值、更新阶段检测变化并加入调度队列（使用环形链表结构）来实现延迟更新。典型应用场景包括搜索框输入优化，可避免频繁触发昂贵计算。与手动防抖不同，该Hook由React内部调度系统控制，更高效且无需手动清理。
2025-06-04 20:31:48
561
原创 【React源码29】深入学习React 源码实现—— useDebugValue底层实现（最完整版）
本文深入解析 React 的 useDebugValue Hook，揭示其在 DevTools 中的调试机制。该 Hook 专为开发环境设计，用于提升自定义 Hook 的可读性和可调试性，不会影响组件行为。文章详细剖析了其源码实现（React v18.2），包括： 历史背景与设计初衷 核心文件定位 算法设计三阶段（初始化、更新判断、DevTools同步） 关键性能优化点（浅比较、环境区分） 与 Fiber 架构的深度集成方式 通过模拟源码+注释的方式，展示了 React 如何在内部管理调试信息。
2025-06-04 19:45:42
571
原创 【React源码28】深入学习React 源码实现—— useImperativeHandle底层实现（最完整版）
本文深入解析 React 中的 useImperativeHandle Hook，它是配合 forwardRef 使用的关键 API，允许函数组件自定义暴露给父组件的实例值。文章从历史背景出发，对比类组件和函数组件的 ref 处理差异，详细解析了其源码实现位置（主要在 ReactFiberHooks.js 等文件）和语法结构。核心算法部分通过代码示例展示了初始化流程，包括创建暴露对象、赋值 ref.current 以及标记副作用等关键步骤。该 Hook 解决了函数组件没有实例的问题，使父组件能安全调用子组件
2025-06-04 19:27:23
925
原创 【React源码27】深入学习React 源码实现——useTransition 的实现原理与源码分析（最完整版）
useTransition 是 React 18 引入的关键 Hook，用于优化并发更新。它通过将状态更新标记为"非紧急"，让高优先级任务优先执行，提升用户体验。本文详解其实现原理：利用 React 的 Lane 优先级系统，在初始化阶段创建过渡队列，当调用 startTransition 时，将回调加入队列并标记为 TransitionPriority，由调度器在空闲时执行。源码分析显示其核心在 ReactFiberHooks.js 中实现，配合调度系统完成优先级管理。
2025-06-04 15:49:59
684
原创 【React源码26】深入学习React 源码实现——React.lazy 与 Suspense 的底层实现
本文深入解析了React.lazy与Suspense的源码实现，从历史背景到核心原理全面剖析。主要内容包括：1）React v16.6引入原生懒加载的动机；2）React.lazy的数据结构设计及其状态管理机制；3）resolveLazyComponent函数如何通过Promise实现异步加载；4）Fiber架构下beginWork阶段对LazyComponent的特殊处理流程。通过源码分析揭示了React如何将动态导入与渲染系统深度集成，实现了高效组件加载机制。
2025-06-03 21:05:38
814
原创 【React源码25】深入学习React 源码实现——useReducer底层实现
摘要：本文深入探讨React的useReducer Hook实现原理。首先介绍了useReducer的历史背景，作为React 16.8引入的Hooks API，其设计灵感来自Redux。文章详细阐述了实现思路，包括支持惰性初始化、状态更新队列处理以及与React内部机制的集成。核心代码展示了如何模拟useReducer功能，使用useState管理状态，通过dispatch分发action，并处理状态更新。最后分析其应用的设计模式（状态模式、观察者模式等）并提供实战案例，如计数器应用和表单验证的实现。
2025-06-03 09:49:27
1021
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人