San30.-CSDN博客

原创彻底搞懂防抖（Debounce）：从手写基础版到企业级 Hook 封装

摘要：本文深入探讨前端开发中的高频触发场景（如搜索联想、窗口调整等）及防抖技术解决方案。文章由浅入深分为四个阶段：1）基础版实现，利用闭包和this绑定；2）解析前置(Leading)与后置(Trailing)执行模式；3）进阶企业级实现，支持Promise、取消功能和精细状态控制；4）React时代的Hooks化实现。通过代码示例详细展示了如何构建功能完善的防抖工具，有效解决性能问题和逻辑错误，适用于各种前端框架和场景。（149字）

2026-04-15 12:58:17 347

原创前端进阶：从浏览器渲染原理到网络请求全链路解析

浏览器渲染机制与前端性能优化指南：本文深入解析了浏览器渲染流程，从网络请求、DOM/CSSOM构建到最终合成渲染的全过程，重点分析了JS阻塞效应和回流/重绘的性能影响。针对前端开发，提出HTML语义化、CSS原子化、JS异步加载等优化策略，强调减少DOM操作和避免强制回流。同时阐述了HTTP协议中GET/POST的核心区别，包括缓存机制、幂等性和安全性考量。通过理解底层原理，开发者可以更精准地进行性能优化，提升页面加载速度和用户体验。

2026-04-14 21:41:46 352

原创从浏览器到 Node.js，这一次彻底搞懂 Event Loop 与异步模型

摘要本文深入解析了JavaScript中的Event Loop机制，对比了浏览器和Node.js的不同实现。浏览器采用宏任务与微任务的双队列模型，执行顺序遵循同步代码→微任务→渲染→宏任务的循环；Node.js则基于libuv库划分为6个阶段（Timers、Poll、Check等），并引入了更高优先级的process.nextTick微任务。文章通过典型代码示例，揭示了关键差异：在I/O回调中，Node.js会优先执行setImmediate而非setTimeout。理解这些底层原理，能帮助开发者更好地处

2026-04-14 20:52:05 352

原创前端渲染：从 CSR、SSR 到同构与手写 Vite+React SSR 实践

本文系统梳理了现代Web开发的渲染模式演进，从CSR到SSR再到同构渲染，深入分析了各种方案的优缺点及适用场景。文章重点探讨了首屏加载与SEO优化这一核心问题，通过对比CSR的交互优势与SSR的性能优势，引出同构渲染这一最佳实践方案。在实战部分，详细介绍了基于Vite+Express+React的手写SSR实现方案，包括工程化路径处理、双端入口设计、Hydration机制等关键技术点，为开发者提供了从原理到实践的完整指导。全文150字。

2026-04-13 21:52:49 438

原创深入浅出：彻底搞懂 WebSocket、SSE 与心跳机制

本文探讨了大前端开发中的实时通信技术，重点对比了HTTP、SSE和WebSocket三种协议在聊天应用中的适用性。HTTP协议基于短连接轮询，效率低下；SSE适合服务端单向推送场景；而WebSocket作为全双工协议，完美满足聊天应用的双向实时通信需求。文章深入解析了WebSocket的101协议升级机制，并提供了基于Node.js和Koa框架的实战示例，演示了如何实现一个支持多人在线的聊天室，包括客户端连接管理、消息广播等核心功能。最后还提及了长连接必备的心跳机制，为开发者提供了全面的WebSocket技

2026-04-13 20:48:53 374

原创深入浅出 RAG 与向量数据库：从 Milvus 基础到电子书级语义搜索实战

摘要：从传统数据库到向量数据库的范式演进本文探讨了大模型时代下数据库架构的转变，重点分析了向量数据库在AI Agent和RAG系统中的核心作用。传统关系型数据库擅长精确匹配，但无法满足自然语言的语义搜索需求。向量数据库通过将文本转换为多维向量，实现了基于语义相似度的检索。文章以Milvus为例，演示了构建日记语义搜索系统的完整流程，包括：文本向量化嵌入集合加载与相似度计算使用余弦相似度进行语义匹配进一步解析了RAG架构的6个核心要素，并展示了如何为《天龙八部》电子书构建向量知识库。向量数据库正成

2026-03-17 15:32:41 500

原创从零理解 RAG：解决 LLM 幻觉痛点

RAG（检索增强生成）技术通过结合检索与生成能力，有效解决大语言模型的知识局限和幻觉问题。其核心在于：先将用户问题转化为向量，在向量数据库中检索相关文档片段，再将这些片段作为上下文输入模型生成回答。关键技术包括：1）使用向量搜索替代传统关键词匹配，通过语义相似度精准定位相关内容；2）灵活的数据加载器（Loader）支持多种格式输入；3）智能文本切分器（Splitter）平衡语义完整性与长度限制，特别是递归字符切分器（RecursiveCharacterTextSplitter）能保持语义连贯性。此外，需注意

2026-03-15 19:51:31 413

原创从 URL 输入到首屏渲染的全链路万字解析（附底层网络深挖）

本文系统梳理了从浏览器输入URL到页面展示的全过程，重点解析了底层原理和面试考察要点。首先介绍了浏览器多进程架构，包括主进程、网络进程和渲染进程的分工。随后详细拆解了导航流程：从URL解析、DNS查询、TCP三次握手，到HTTP请求发送和响应处理。特别强调了TCP协议如何保证数据传输可靠性，以及OSI七层模型中数据包的封装过程。最后指出面试官主要考察系统性思维，而非零散知识点记忆。全文以进程协作和数据流转为主线，串联起网络协议、浏览器机制等核心知识体系。

2026-03-14 13:52:47 391

原创 AI 时代的“USB-C”接口：MCP 核心原理与实战

本文介绍了Model Context Protocol（MCP）协议如何解决大语言模型调用外部工具的痛点。MCP作为统一标准，支持跨进程、跨语言的工具调用，包含Host、Client和Server三大核心组件。通过代码示例演示了如何创建MCP Server（实现数据库查询功能）和集成MCP Client到LangChain中，展示了MCP的即插即用特性，为AI应用开发提供了更优雅的工具调用方案。

2026-03-08 16:11:40 398

原创手写 Mini Cursor：基于 Node.js 与 LangChain 的开发实战

本文介绍了从Prompt Engineering向Agentic Engineering的范式转变，详细阐述了AI Agent的核心概念（LLM+Memory+Tool+RAG+Prompt Template）。作者基于Node.js和LangChain框架，通过封装子进程通信、开发文件读写等工具，构建了一个具备"手眼"能力的编程Agent。文章重点展示了Agent的思考循环机制（思考->调用工具->获取结果->再次思考），并最终演示了该Agent自动创建React T

2026-03-06 17:04:25 452 1

原创从 Express 到企业级架构：NestJS 实战指南与深度解析

NestJS 是一个基于 TypeScript 的企业级后端框架，采用模块化架构和依赖注入设计。本文通过一个待办事项管理 Demo 展示了 NestJS 的核心特性：标准化分层架构（模块、控制器、服务）内置 TypeScript 支持依赖注入实现松耦合 RESTful 路由设计和参数管道验证全局模块封装数据库连接实战部分演示了从控制器接收请求到服务处理业务逻辑的完整流程，并介绍了如何通过自定义 Provider 管理数据库连接池。NestJS 通过强制规范使代码更易维护，适合构建复杂后端应用。

2026-02-05 23:13:20 1005

原创 Zustand：打造 React 应用的“中央银行”级状态管理

本文介绍了轻量级状态管理库 Zustand 在 React 应用中的使用。Zustand 通过简洁的 API 设计解决了 Redux 的复杂性问题，同时避免了 Context API 的性能缺陷。文章从核心概念入手，通过计数器、待办事项和用户认证三个典型案例，详细展示了如何创建模块化 Store、处理复杂数据结构更新、实现状态持久化等实用技巧。重点阐述了 Zustand 的不可变更新原则、按需选取优化策略，以及如何自然地集成到 React 组件中。这种"中央银行"式的状态管理模式，为中小

2026-02-03 13:16:54 747

原创从零构建坚固的前端堡垒：TypeScript 与 React 实战深度指南

TypeScript赋能现代前端开发：从基础到React实战本文系统介绍了TypeScript的核心概念及其在React项目中的应用。首先讲解了TS的基础类型、数组/元组、枚举等核心语法，对比了any与unknown的区别，重点阐述了接口和类型别名的应用场景。随后展示了如何构建规范的React+TS项目架构，包括类型定义、泛型工具函数和自定义Hook的实现。通过Todo List案例，演示了TS如何提升代码安全性和可维护性，特别是在组件Props类型检查和状态管理方面的优势。全文强调TS通过静态类型检查将

2026-02-01 14:43:17 1126

原创深度解析 React Router v6：构建企业级单页应用（SPA）的全栈式指南

本文系统剖析了React Router v6在企业级应用中的实践方案。从路由模式选择（HashRouter vs BrowserRouter）到性能优化（代码分割与Suspense懒加载），再到立体化路由配置（动态参数、嵌套路由）和安全防护（路由守卫），构建了一套完整的高性能路由体系。特别关注交互细节，通过CSS动画缓解加载等待，利用导航高亮增强用户体验，最终实现媲美原生应用的流畅SPA。

2026-01-30 17:12:49 1020

原创构建“Git 提交 AI 神器”：从零打通 DeepSeek 混合架构全栈开发

本文介绍了一个AI驱动的Git提交信息生成工具的开发过程。该项目采用前后端分离架构，前端使用React+TailwindCSS，后端基于Node.js/Express，集成DeepSeek-R1推理模型和LangChain框架。文章深入解析了关键技术点：1）Express中间件机制处理HTTP请求数据流；2）RESTful接口设计中GET与POST的语义区别；3）HTTP状态码的规范使用；4）选择推理型AI模型的原因及其参数配置；5）CORS跨域安全机制原理；6）前端Axios封装与超时优化。该工具旨在解决

2026-01-28 13:42:09 665

原创零成本、全隐私：基于 React + Ollama 打造你的专属本地 AI 助手

本文介绍如何在本地电脑上部署私有版ChatGPT，使用Ollama运行大模型并搭建React聊天界面。首先安装Ollama并下载Qwen2.5中文模型，通过11434端口连接服务。然后创建API接口处理前后端通信，封装自定义Hook管理聊天状态和历史记录。最后构建聊天UI界面，实现自动滚动和输入锁定功能。整个方案无需联网，可完全在本地运行，解决了数据隐私和API费用问题，适合开发者构建安全的本地AI助手应用。

2026-01-26 16:20:09 441

原创前端性能优化：深入解析防抖（Debounce）与节流（Throttle）

防抖(debounce)和节流(throttle)是前端优化高频事件触发的两种经典方案。防抖通过清除定时器确保只在最后一次触发后执行，适用于搜索建议、表单验证等场景；节流则通过时间间隔控制执行频率，适用于滚动加载、拖拽元素等场景。两者的核心区别在于防抖关注"结果"(动作停止后执行)，节流关注"过程"(固定频率执行)。通过闭包保存状态，这两种技术能有效减少不必要的函数执行，提升页面性能。

2026-01-23 22:32:42 606

原创深入浅出 JavaScript 柯里化：从原理到高级实践

摘要：柯里化（Currying）是一种将多参数函数转换为单参数函数链的技术，核心基于闭包和参数收集。它分为严格柯里化（必须单参调用）和非严格柯里化（支持混合传参）。通过通用实现，可将任意函数动态柯里化，利用递归和闭包实现参数累积。工程中，柯里化的核心价值在于参数预设（Partial Application），例如生成语义化的日志工具（如errorLog）或处理异步分批参数。其优势包括提升代码可读性、复用性和异步兼容性，是函数式编程中优化代码组织的重要范式。

2026-01-22 14:04:02 587

原创 LangChain 第四课：拒绝“纸上谈兵”，给大模型装上“双手”

摘要：本文介绍了如何通过LangChain的Tools模块为大型语言模型(LLM)赋予调用外部功能的能力。传统LLM无法直接访问实时数据或执行计算，而Tools模块通过Function Calling机制，让模型能识别用户意图并调用指定工具。文章以DeepSeek模型为例，演示了创建天气查询器和加法计算器两个工具的过程：1)用zod定义工具参数结构；2)通过bindTools绑定工具；3)模型分析用户输入后返回工具调用请求；4)本地执行对应函数。这种"大脑+手"的架构是构建AI Age

2026-01-19 13:55:14 587

原创 LangChain 第三课：拒绝“只有七秒记忆”，给 LLM 装上大脑 (Memory)

摘要：大模型API调用本质是无状态的，导致LLM无法记住对话历史。文章探讨了LangChain的Memory模块解决方案，通过RunnableWithMessageHistory自动管理对话上下文。演示了如何通过内存存储实现多轮对话记忆，并指出生产环境中需解决持久化（如Redis存储）和Token爆炸（窗口记忆或摘要压缩）问题，为构建连贯的AI助手提供实践方案。（149字）

2026-01-18 16:20:46 560

原创 LangChain 第二课：拒绝“废话”，用 Zod 强制 AI 输出标准 JSON

摘要：本文介绍如何利用 LangChain 的 JsonOutputParser 和 Zod 验证库，将 AI 的自然语言输出转化为精准的结构化数据。通过定义严格的 Schema（如字段类型、枚举值），配合自动生成的格式指令，开发者可确保 AI（如 DeepSeek 模型）输出标准化的 JSON 数据，避免冗余文本或格式错误。这种技术解决了 AI 输出不可控的问题，为自动化集成、数据清洗和系统稳定性提供了高效方案，使生成式 AI 真正成为可编程的工具。文末附有完整实现代码示例。

2026-01-17 19:24:03 622

原创告别鼠标依赖？揭秘 qoder-cli：基于 Qwen 的“数字员工”与全能命令行开发指南

本文深度解析了基于阿里 Qwen 模型构建的 AI 命令行框架 qoder-cli，将其定义为能读懂文档、操作浏览器的“数字员工”。文章首先探讨了“双引擎开发模式”，指出 CLI 工具在自动化任务和快速原型搭建上相较于图形化 AI 编辑器（IDE）的独特优势。核心部分详细介绍了 MCP（模型上下文协议）的应用，重点展示了两个关键工具：能实时抓取最新文档以消除模型幻觉的 Context7，以及赋予 AI 浏览器自动化测试能力的 Playwright。

2026-01-17 18:51:18 680

原创告别全局污染：深入解析现代前端的模块化 CSS 演进之路

CSS模块化演进：从全局污染到组件化隔离前端开发中CSS的全局污染问题长期困扰开发者，本文探讨了三种主流解决方案。传统BEM命名法依赖人为约定，而现代技术提供了更可靠的方案： React的CSS Modules通过构建工具自动为类名生成唯一哈希值，实现真正的样式隔离。开发者只需导入样式对象，工具自动处理命名冲突。 Vue的Scoped CSS利用自定义属性(data-v-)和属性选择器，为组件样式创建独立作用域，保持类名可读性同时防止样式泄漏。 CSS-in-JS方案如styled-components将

2026-01-08 23:43:28 889

原创拒绝手写代码！用 Vibe Coding + SDD 范式“搓”一个微信计分小程序

本文深入探讨了 Vibe Coding（氛围编程）这一新兴开发范式，以构建“微信计分小程序”为例，展示了如何利用 Trae、Cursor 等 AI 编辑器实现真正的“零代码”开发。文章指出，AI 编程已从初期的“抽卡式”提问进化为 **SDD（规范驱动开发）+ 多智能体（Multi-Agent）** 的系统化模式。核心方法论在于“先文档，后代码”：利用 Gemini 等大模型扮演“产品经理”生成结构化的需求文档（Spec），将其作为不可违背的“合同”来指导 AI 生成代码。这种模式不仅规避了 AI 的逻辑

2026-01-06 23:17:11 1663

原创 React 进阶：useRef —— 那个“只做事不说话”的幕后英雄

React的useRef Hook是一个强大的工具，主要用于两个核心场景：1）访问DOM节点（如输入框聚焦），2）存储不影响渲染的可变值。它创建的引用对象在整个组件生命周期中保持不变，修改其current属性不会触发重绘。与useState不同，useRef适合存储"幕后"变量（如定时器ID、前次状态值），解决闭包陷阱问题。通过对比普通变量，useRef能确保数据在组件实例间隔离且不随渲染丢失。开发者应理解其与useState的区别：前者用于不影响视图的数据，后者用于触发渲染的状态管理。

2026-01-04 23:12:58 549

原创 React 性能优化避坑指南：彻底搞懂 useMemo、useCallback 与闭包陷阱

React性能优化实战：useMemo与useCallback深度解析本文深入探讨React中两个关键性能优化工具：useMemo和useCallback。通过三个典型场景，揭示React组件渲染机制中的常见陷阱。缓存计算逻辑：当组件包含昂贵计算时，useMemo能避免无关状态更新导致的重计算，通过依赖项数组控制何时重新执行。防止子组件无效渲染：使用React.memo包装子组件后，配合useCallback缓存函数引用，解决因函数对象重新创建导致的memo失效问题。闭包陷阱解析：文章还提及新手常遇

2026-01-04 23:05:21 1014

原创 React 表单与状态管理：彻底搞懂 useRef、受控与非受控组件

本文深入解析了React中useRef与表单处理的两种模式（受控组件与非受控组件）。useRef不仅用于访问DOM节点，还可作为不触发重渲染的持久化容器。非受控组件通过DOM直接管理数据，适合简单场景；受控组件则由React state完全控制数据流，支持实时验证和联动。文章通过代码示例对比了两者的优缺点，建议90%场景优先使用受控组件，仅在文件上传等特殊情况下选择非受控模式。掌握这些概念能有效提升React表单开发能力。

2025-12-29 23:20:07 905

原创 React 进阶指南：彻底搞懂 Context 与“暗黑模式”实战

本文详细介绍了React Context API的实战应用，通过三个递进阶段讲解如何优雅管理组件间数据传递。首先解析基础用法：创建Context、Provider包裹和useContext消费；然后进阶到封装Provider模式，以暗黑模式切换为例展示状态与逻辑的内聚管理；最后结合CSS变量实现UI主题切换。Context API有效解决了Prop Drilling问题，实现组件解耦和逻辑封装，是管理全局状态（如主题、用户信息）的理想原生方案。文章强调这种模式相比传统Props传递的优势，并指出其适用场景与

2025-12-28 23:02:02 244

原创从面向对象 CSS 到原子化架构：Tailwind CSS 与 React 性能优化实践

本文探讨前端开发中CSS和DOM结构的演进历程。首先分析CSS方法论的三个阶段：传统"Bad"模式导致样式不可复用，OOCSS引入面向对象概念提高复用性，最终原子化CSS（如Tailwind）将样式拆分为最小单元。文章详细介绍了Tailwind的配置方法、核心特性（Utility Class和响应式布局）及其AI时代优势。同时深入解析React中Fragment的底层原理，说明其通过DocumentFragment避免DOM冗余和性能优化的机制。这两项技术共同提升了现代前端应用的开发效率

2025-12-26 23:32:44 820

原创【React入门实战】手把手拆解 Todo List：从组件通信到 Hooks 详解

本文通过一个基于React的Todo List项目，深入解析了前端开发的核心概念。项目采用组件化设计，分为App、TodoInput、TodoList和TodoStats组件，体现状态提升原则。重点讲解了React的核心技术：使用useState进行状态管理（含惰性初始化优化）、受控组件实现双向绑定、父子组件通过props和回调函数通信、不可变数据的增删改查操作（filter/map方法）、列表渲染的key重要性、useEffect处理副作用（数据持久化）等。文章特别强调了React开发的核心原则：单向数据

2025-12-24 19:51:21 539

空空如也

空空如也