前端达人-CSDN博客

原创 Claude Code 通关手册（六）：MCP 协议完全指南，Claude Code 最被低估的能力

Claude Code 作为 MCP 客户端，通过安装不同的 MCP Server 获得不同的能力——GitHub 操作、文档查询、数据库访问等。比如你问它"Next.js 15 的 Server Actions 怎么写"，如果 Next.js 15 是在训练数据截止之后才发布的，Claude 只能靠猜——很可能给你一个旧版本的语法。它能连上你的数据库、你的项目管理工具、你的 Slack。GitHub MCP 是使用频率最高的 MCP Server，也是 GitHub 官方维护的。你们公司的内部文档系统？

2026-02-27 20:28:19 108

原创 Claude Code 通关手册（五）：子代理系统——给你的 AI 配一个“专家团队“

有了记忆之后，你的 code-reviewer 审查得越多，就越了解你的项目——它会记住"这个项目经常出现忘记标注 'use client' 的问题"、"API 路由经常缺少输入校验"这些模式。你说一句"审查一下这个模块"，三个子代理同时开工——一个查代码质量、一个生成测试、一个扫描安全漏洞——各自在独立的上下文窗口里工作，互不干扰，最后把结果汇总给主 Agent。子代理是你配的"专科医生团队"——心内科、骨科、神经科各管各的，每个人在自己的诊室（独立上下文）里看病，最后把诊断结果汇总给你这个主治医生。

2026-02-26 20:55:12 269

原创 Claude Code 通关手册（五）：子代理系统——给你的 AI 配一个“专家团队“

有了记忆之后，你的 code-reviewer 审查得越多，就越了解你的项目——它会记住"这个项目经常出现忘记标注 'use client' 的问题"、"API 路由经常缺少输入校验"这些模式。你说一句"审查一下这个模块"，三个子代理同时开工——一个查代码质量、一个生成测试、一个扫描安全漏洞——各自在独立的上下文窗口里工作，互不干扰，最后把结果汇总给主 Agent。子代理是你配的"专科医生团队"——心内科、骨科、神经科各管各的，每个人在自己的诊室（独立上下文）里看病，最后把诊断结果汇总给你这个主治医生。

2026-02-26 20:55:12 199

原创 Claude Code 通关手册（四）：3 个自定义命令，让你的 Claude Code 快到飞起

想象一下：你不再是跟一个 AI 对话，而是有一个"AI 团队"——一个负责审查代码、一个负责写测试、一个负责查安全漏洞。学完这篇，你的 Claude Code 配置就算"毕业"了。养成看一眼状态栏的习惯，能帮你及时发现"哦，我现在用的还是 Opus，这个简单任务不需要"。你的 Claude Code 现在已经从"一个能用的工具"变成了"一个高度定制化的效率引擎"。，包括内置命令和你创建的自定义命令。更要命的是，每次你还可能忘了某个检查项——上周审查的时候忘了加"安全问题"，导致一个 XSS 漏洞溜过去了。

2026-02-25 20:08:16 268

原创 Claude Code 通关手册（三）：99%的人不知道的效率秘诀，CLAUDE.md 深度实战

太模糊的不写（"写干净的代码"），太详细的不写（放到 docs/ 目录用 @ 引用），频繁变动的不写（在会话中说就行）。CLAUDE.md 就是这份文档——只不过你的"新同事"是 Claude Code，而且它每天早上都会"失忆"，所以它每天上班第一件事就是把这份文档读一遍。这就是"渐进式披露"的具体应用：Claude 写组件的时候加载组件规范，写 API 的时候加载 API 规范，不用的时候不加载，节省宝贵的上下文窗口空间。你的项目有不同类型的代码——组件、API、测试——它们各自有不同的规范。

2026-02-24 21:02:21 334

原创 Claude Code 通关手册（二）：权限系统搞明白，效率直接翻倍

另外，当 Claude 询问你是否允许某个操作时，你选择"Always allow"会自动把这条规则加到你的 allowlist 里。因为在写代码这件事上，你大概率是希望 Claude 直接改的——毕竟你都让它重构代码了，肯定是希望它直接写入文件。我会提供完整的 Next.js 项目 CLAUDE.md 模板，以及好的 CLAUDE.md 和差的 CLAUDE.md 的对比分析。从"Claude 在干活，但每一步都要你盯着点头"，变成了"你说一句话，Claude 跑完了把结果汇报给你"。

2026-02-23 10:41:19 487

原创 Claude Code 通关手册（一）：Cursor 用户转 Claude Code，第一天我就后悔了——后悔没早点用

但别因此放弃，下一篇文章我会教你怎么配置权限，让它该问的问、不该问的自动通过。但 Claude Code 更进一步——你告诉它"给这个项目加上暗色模式"，它会自动找到需要修改的文件、创建新的组件、修改配置、甚至跑一下看看有没有报错。然后某天你听说了 Claude Code，装上一看——一个光秃秃的终端界面，没有花哨的 UI，没有智能补全的小弹窗，甚至没有一个像样的"开始"按钮。Cursor 的核心价值是"编辑器里的 AI 助手"，Claude Code 的核心价值是"可编程的 AI 开发平台"。

2026-02-22 14:03:30 787

原创为什么你的页面总是卡成PPT？90%的前端开发者忽略了这个浏览器原生能力

你雇了一个专门的后厨师傅（Web Worker），把切菜、调料这些重活全交给他。你可以把 Web Worker 理解为浏览器给你开辟的一个"后台计算室"。是 Worker 专属的同步加载方法，它会阻塞 Worker 线程（但不会阻塞主线程），且无法享受 Tree Shaking 等优化。实际项目中，我们很少"裸写"计算逻辑，通常会依赖 lodash、dayjs 这类工具库。你写的不是代码，是单线程牢笼里的"独角戏"。AES、RSA 这些加解密算法计算量不小，放到 Worker 里处理，主线程零感知。

2026-02-19 17:17:47 684

原创 2026年React数据获取的第七层：你的应用在“裸奔“——性能优化和错误处理的真相

用户打开你的页面，三个组件同时向同一个接口发起请求——服务器收到了三份一模一样的请求。你在公司群里问了一个问题，结果有三个同事同时在私聊里找你要相同的答案。你刚坐下，服务员已经把你最常点的菜提前备好了——你看菜单的时候，厨房已经开始准备了。大多数 React 应用在"能跑"的状态下发布了，但从来没有被认真"保护"过。页面瞬间加载，用户以为你的服务器很快，其实是你比他更了解他。在深入本文之前，强烈建议先读完前几篇，知识是有递进关系的：。的书架展示给你，你往前走，前面的书架才出现，后面的收起来。

2026-02-18 18:57:52 684

原创 2026年React数据获取的第七层：你的应用在“裸奔“——性能优化和错误处理的真相

用户打开你的页面，三个组件同时向同一个接口发起请求——服务器收到了三份一模一样的请求。你在公司群里问了一个问题，结果有三个同事同时在私聊里找你要相同的答案。你刚坐下，服务员已经把你最常点的菜提前备好了——你看菜单的时候，厨房已经开始准备了。大多数 React 应用在"能跑"的状态下发布了，但从来没有被认真"保护"过。页面瞬间加载，用户以为你的服务器很快，其实是你比他更了解他。在深入本文之前，强烈建议先读完前几篇，知识是有递进关系的：。的书架展示给你，你往前走，前面的书架才出现，后面的收起来。

2026-02-18 18:57:52 226

原创 2026年React数据获取的第七层：你的应用在“裸奔“——性能优化和错误处理的真相

用户打开你的页面，三个组件同时向同一个接口发起请求——服务器收到了三份一模一样的请求。你在公司群里问了一个问题，结果有三个同事同时在私聊里找你要相同的答案。你刚坐下，服务员已经把你最常点的菜提前备好了——你看菜单的时候，厨房已经开始准备了。大多数 React 应用在"能跑"的状态下发布了，但从来没有被认真"保护"过。页面瞬间加载，用户以为你的服务器很快，其实是你比他更了解他。在深入本文之前，强烈建议先读完前几篇，知识是有递进关系的：。的书架展示给你，你往前走，前面的书架才出现，后面的收起来。

2026-02-18 18:57:52 843

原创 2026年React数据获取的第七层：你的应用在“裸奔“——性能优化和错误处理的真相

用户打开你的页面，三个组件同时向同一个接口发起请求——服务器收到了三份一模一样的请求。有了它，只有出错的那个区域崩掉，其他部分继续正常运行。你在公司群里问了一个问题，结果有三个同事同时在私聊里找你要相同的答案。你刚坐下，服务员已经把你最常点的菜提前备好了——你看菜单的时候，厨房已经开始准备了。你公司有50个员工。大多数 React 应用在"能跑"的状态下发布了，但从来没有被认真"保护"过。页面瞬间加载，用户以为你的服务器很快，其实是你比他更了解他。的书架展示给你，你往前走，前面的书架才出现，后面的收起来。

2026-02-18 18:57:52 563

原创 2026年React数据获取的第七层：你的应用在“裸奔“——性能优化和错误处理的真相

用户打开你的页面，三个组件同时向同一个接口发起请求——服务器收到了三份一模一样的请求。有了它，只有出错的那个区域崩掉，其他部分继续正常运行。你在公司群里问了一个问题，结果有三个同事同时在私聊里找你要相同的答案。你刚坐下，服务员已经把你最常点的菜提前备好了——你看菜单的时候，厨房已经开始准备了。你公司有50个员工。大多数 React 应用在"能跑"的状态下发布了，但从来没有被认真"保护"过。页面瞬间加载，用户以为你的服务器很快，其实是你比他更了解他。的书架展示给你，你往前走，前面的书架才出现，后面的收起来。

2026-02-18 18:57:52 796

原创 2026年React数据获取的第七层：你的应用在“裸奔“——性能优化和错误处理的真相

用户打开你的页面，三个组件同时向同一个接口发起请求——服务器收到了三份一模一样的请求。有了它，只有出错的那个区域崩掉，其他部分继续正常运行。你在公司群里问了一个问题，结果有三个同事同时在私聊里找你要相同的答案。你刚坐下，服务员已经把你最常点的菜提前备好了——你看菜单的时候，厨房已经开始准备了。你公司有50个员工。大多数 React 应用在"能跑"的状态下发布了，但从来没有被认真"保护"过。页面瞬间加载，用户以为你的服务器很快，其实是你比他更了解他。的书架展示给你，你往前走，前面的书架才出现，后面的收起来。

2026-02-18 18:57:52 979

原创 2026年React数据获取的第七层：你的应用在“裸奔“——性能优化和错误处理的真相

用户打开你的页面，三个组件同时向同一个接口发起请求——服务器收到了三份一模一样的请求。有了它，只有出错的那个区域崩掉，其他部分继续正常运行。你在公司群里问了一个问题，结果有三个同事同时在私聊里找你要相同的答案。你刚坐下，服务员已经把你最常点的菜提前备好了——你看菜单的时候，厨房已经开始准备了。你公司有50个员工。大多数 React 应用在"能跑"的状态下发布了，但从来没有被认真"保护"过。页面瞬间加载，用户以为你的服务器很快，其实是你比他更了解他。的书架展示给你，你往前走，前面的书架才出现，后面的收起来。

2026-02-18 18:57:52 624

原创 2026年React数据获取的第七层：你的应用在“裸奔“——性能优化和错误处理的真相

用户打开你的页面，三个组件同时向同一个接口发起请求——服务器收到了三份一模一样的请求。有了它，只有出错的那个区域崩掉，其他部分继续正常运行。你在公司群里问了一个问题，结果有三个同事同时在私聊里找你要相同的答案。你刚坐下，服务员已经把你最常点的菜提前备好了——你看菜单的时候，厨房已经开始准备了。你公司有50个员工。大多数 React 应用在"能跑"的状态下发布了，但从来没有被认真"保护"过。页面瞬间加载，用户以为你的服务器很快，其实是你比他更了解他。的书架展示给你，你往前走，前面的书架才出现，后面的收起来。

2026-02-18 18:57:52 294

原创 2026年React数据获取的第七层：你的应用在“裸奔“——性能优化和错误处理的真相

用户打开你的页面，三个组件同时向同一个接口发起请求——服务器收到了三份一模一样的请求。有了它，只有出错的那个区域崩掉，其他部分继续正常运行。你在公司群里问了一个问题，结果有三个同事同时在私聊里找你要相同的答案。你刚坐下，服务员已经把你最常点的菜提前备好了——你看菜单的时候，厨房已经开始准备了。你公司有50个员工。大多数 React 应用在"能跑"的状态下发布了，但从来没有被认真"保护"过。页面瞬间加载，用户以为你的服务器很快，其实是你比他更了解他。的书架展示给你，你往前走，前面的书架才出现，后面的收起来。

2026-02-18 18:57:52 235

原创 2026年React数据获取的第七层：你的应用在“裸奔“——性能优化和错误处理的真相

用户打开你的页面，三个组件同时向同一个接口发起请求——服务器收到了三份一模一样的请求。有了它，只有出错的那个区域崩掉，其他部分继续正常运行。你在公司群里问了一个问题，结果有三个同事同时在私聊里找你要相同的答案。你刚坐下，服务员已经把你最常点的菜提前备好了——你看菜单的时候，厨房已经开始准备了。你公司有50个员工。大多数 React 应用在"能跑"的状态下发布了，但从来没有被认真"保护"过。页面瞬间加载，用户以为你的服务器很快，其实是你比他更了解他。的书架展示给你，你往前走，前面的书架才出现，后面的收起来。

2026-02-18 18:57:52 163

原创 2026了，你还在用 React.FC 写组件？这些 TypeScript 模式该更新了

今天这篇文章，我们就系统梳理一遍 React + TypeScript 在当下真正值得用的模式——不是拿来炫技的，而是每天都会用到、用了就回不去的那种。就好比你订了一份外卖，只点了宫保鸡丁，结果送来的时候多了一碗不知道啥口味的汤，你没点，但它来了，你也不知道该怎么处理它。系安全带的时候觉得有点不方便，但一旦出了事，它是救你命的东西。它在你写代码的时候就告诉你：这里不对，那里缺了什么，向右转有一条更快的路。可能出现一批新的类型错误，但这些都是真实存在的潜在 bug，TypeScript 替你提前发现了。

2026-02-17 16:50:06 374

原创 AI写代码,资深前端工程师到底怎么用?三个能用,三个别碰

AI就像一个永远不会累、打字速度飞快的实习生,但他会自信满满地瞎说,而且完全不理解你的系统为什么要这么设计。新的一年,希望每位前端er都能找到与AI协作的最佳节奏,把省下来的时间用在真正创造价值的地方。如果重构涉及到"决定数据流向"、"重新划分职责",AI会自信地给你挖坑。资深工程师从AI获益更多,不是因为他们更懂AI,而是因为他们知道什么是"好"。这不是一篇吹捧AI的文章,而是我在前端团队这些年,真实使用AI的踩坑实录。这样用,AI不会让你变懒,反而给你更多时间去做真正需要经验的工作。

2026-02-16 16:07:45 277

原创网站要给 AI 打工了？WebMCP 让浏览器成为 Agent 的工具箱

想象一下这个场景:你让 AI 助手"帮我买张周五晚上的电影票",以前它要像个视障人士一样摸索网页——截屏看图、猜测按钮位置、尝试点击、验证结果。而 WebMCP 的目标是让网站主动告诉 AI:"我这儿有个。**Chrome Web Store:**搜索"Web MCP" **功能:**一键启动浏览器 MCP 服务。就像以前优化"title 标签"给 Google 看,未来要优化"toolname 属性"给 AI 看。Web 开发的下一个十年,可能不仅仅是"为人类设计",而是"为人类和 AI 设计"

2026-02-13 10:21:36 695

原创为什么说新的JavaScript数组方法改变了我们的编程范式？深度对比与实战解析

Redux、Zustand、Jotai等现代状态管理框架，都基于"不可变数据"的假设。掌握这些新方法，你就掌握了现代JavaScript开发的核心范式。如果有人直接修改了你分享的原始文件，你的表格也会跟着变化——这就是。JavaScript正在从"命令式、可变的"语言，向"函数式、不可变的"方向进化。你有没有注意到一个现象：最近几年，JavaScript官方在数组API上做了大量改进，而且。JavaScript虽然是动态语言，但也在向这个方向靠拢。，这一系列新方法的出现，反映了JavaScript生态在。

2026-02-12 20:26:04 871

原创 Mock和Spy的真面目：你的测试是在真的隔离依赖还是在自欺欺人？

但我们验证的不是"这些方法被调用了"，而是"在订单成功的情况下邮件被发送了，在支付失败的情况下没有发送"——这是真实的行为。你的测试只验证了"注册函数调用了sendEmail"，但没验证"注册函数正确处理了sendEmail的返回值"。他写了一个用户注册功能，所有单元测试都通过了，绿灯一片。如果你的测试只验证了函数被调用了几次，但从没验证过返回值是否正确、是否处理了异常、是否满足了业务逻辑，那你写的不是测试，是自欺欺人。到这里，我想讨论一个更深层的问题：过度的Mock和Spy会让你的测试成为"假的通过"。

2026-02-11 20:49:17 317

原创被JavaScript忽视的Web Animations API：为什么说它是前端动画的真正未来？

A: 如果你的动画需求是：简单过渡、列表进入、弹窗动画等常见场景，Web Animations API完全够用。选择哪个，看你的需求和项目约束。这就是为什么说Web Animations API代表了"真正的未来"——它把CSS的性能优势和JavaScript的灵活性结合在一起了。在阿里的eToys或某些电商平台，你可能需要：页面加载时，导航栏、商品图片、价格信息依次出现，每个元素的动画时间要精确同步。这个对象不是字符串，不是Promise，是一个实实在在的对象，它有自己的状态、属性和方法。

2026-02-10 21:10:58 427

原创浏览器里藏着一个专业音频工作站？揭秘Web Audio API的硬核玩法

标签播放背景音乐时,你可能不知道浏览器早已内置了一套媲美专业DAW的音频处理系统。,能让你像在FL Studio或Ableton Live里那样,对声音进行精细化控制。(Audio Node Graph),是专业音频软件的通用设计模式。FFT算法要求必须是2的幂(512, 1024, 2048, 4096...)的Web API,用硬核技术+接地气讲解的方式,帮你建立真正的技术壁垒。如果这篇文章让你对Web Audio API有了新的认识,欢迎。,别再说"臣妾做不到"了——打开DevTools,敲下。

2026-02-09 20:59:24 384