- 博客(191)
- 收藏
- 关注
RSS订阅原创 【 从“打补丁“到“换思路“ 】一次企业级 AI Agent 的架构拐点
在做企业级 AI Agent 时，我踩过一个非常典型的坑。 一开始我以为只是个“小逻辑问题”。后来我发现，那是一次架构认知的分水岭。 这篇文章，讲的不是“消息补全”。讲的是一个更重要的问题： 问题很简
2026-02-11 17:47:04
1016
原创 一次 Agent Skill 的实战体验，以及 MCP 和 Skill 的区别
本周通过一个小需求尝试了下，效果还不错。比如你要做一个网站，以前没装技能的时候，AI 生成的代码又是那个熟悉的：蓝紫渐变色 + 千篇一律的布局 + 明显的 AI 审美（不同的模型，产生的结果不同）当然，rules 和 prompt 也能做到这一点。。虽然本质上没啥区别，都是 prompt，但 Skill 的形态更工程化、更灵活。
2026-01-30 15:21:23
584
原创 AI 流式对话该怎么做？SSE、fetch、axios 一次讲清楚
方案真流式POSTHeader推荐度✅❌❌⭐⭐⭐✅✅✅⭐⭐⭐⭐⭐axios❌✅✅⭐SSE 是流式协议fetch 是流式容器axios 是传统请求工具如果你正在做 AI 产品，通信层选错，后面再怎么优化模型和前端体验，都会事倍功半。
2026-01-07 16:48:22
1067
原创 数据库表还可以这样用——你真的只用它存数据吗？
数据库表不仅是存数据的容器，它还是动态配置中心等。帮助我们提升项目的灵活度、运维、风控，如果你也是将系统配置放到环境变量，不妨试试放到数据库表中。
2026-01-06 09:54:27
698
原创 ClipboardButton.tsx:95 [Violation] Permissions policy violation: The Clipboard API has been blocked
Clipboard API 是一种允许网页程序与用户剪贴板交互的 Web API，通过它，开发者可以实现向剪贴板写入文本的功能（clipboard-write），以及读取剪贴板中的数据（clipboard-read）。标签需要显式设置 allow 属性，允许使用这个 API。这将明确告诉浏览器，嵌套的 iframe 可以使用剪贴板 API。项目中通过 iframe 加载子页面，子页面中存在一个使用了。用户使用的时候，然后就出现这上面的问题。如果你的代码运行在 iframe 内，HTML 的。
2025-12-08 17:31:31
306
原创 Ant Design Form 隐藏字段技巧：解决 getFieldValue 获取不到数据的问题
组件内部需要存储中间状态，但 UI 不需要展示Form 中存储对象、数组等复杂数据对接后端数据时字段是“虚拟字段”自定义选择器（TreeSelect / 级联选择器）与真实字段解耦，临时使用想统一用 form.setFieldValue 管理所有状态你会发现这个方案特别适合 业务表单，尤其是多人选择、权限配置、富文本等组件。
2025-11-21 10:01:51
116
原创 别再被跨域困扰了！一次看懂 CORS 的全部小秘密
CORS（Cross-Origin Resource Sharing）是浏览器提供的一种安全机制，用于允许浏览器访问不同源的资源。浏览器默认策略：同源策略（Same-Origin Policy）协议、域名、端口必须完全一致，否则 JS 无法访问响应好处：保证安全坏处：跨域请求常常失败CORS 的作用：让服务器主动声明“我允许哪些域访问我”，从而解决跨域问题。→ 控制浏览器能发什么→ 是否允许带 Cookie→ 控制浏览器 JS 能读什么Max-Age→ 缓存预检，减少请求。
2025-11-21 09:47:48
41
原创 Promise.then 与 async/await 到底差在哪？（这次彻底讲明白）
宏任务是指每次事件循环中执行的主任务块script（整段代码）setTimeout（Node.js）I/O 操作 等微任务是插入在一次宏任务结束之后、下一个宏任务开始之前执行的任务。执行一个宏任务；执行完后，清空当前所有微任务；再开始下一个宏任务。│ 开始执行 JS 脚本（第一个宏任务） ││▼执行同步代码（主线程执行区）│▼注册异步任务（定时器、Promise等）│▼│ 宏任务执行完毕（本轮结束） ││▼检查微任务队列（Microtasks）
2025-11-19 13:54:44
1314
原创 Uncaught TypeError: Cannot read properties of null (reading ‘value‘)
react-dom.development.js:500 Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property `target` on a released/nullified synthetic event. This is set to null. If you must keep the original syntheti
2025-11-19 13:51:01
191
原创 大模型时代最讽刺的职业出现了：“大模型善后工程师”
AI 写的：快、便宜、能跑工程师修的：稳、能上线、能赚钱不是写代码，而是把错误的地方修对，把不可靠的地方补稳，把模糊的部分变清晰。这才是 AI 时代真正的核心竞争力。你认为呢？
2025-11-17 10:09:57
1511
原创 React 高频 useEffect 导致页面崩溃的真实案例：从根因排查到彻底优化
把副作用提升到父组件，让子组件保持纯净。这是 React 设计理念下最符合逻辑，同时也最稳定的解决方式。“一招鲜吃遍天”，React的开发，全部遵循这种方式的开发，是不是也能避免很多 BUG！你认为呢？欢迎在评论区讨论！
2025-11-17 09:57:43
288
原创 别再只说“TCP可靠、UDP快”了！这才是它们的真正区别
TCP 是“安全邮递”，UDP 是“极速闪送”。TCP 用“稳定”换取“时间”；UDP 用“风险”换取“速度”。真正的处理方式，不会死守某一方，而是根据场景做出权衡——在“可靠”与“实时”之间，找到那条最优解曲线。文件传输，要一字不差；视频直播，要分秒必达。你认为呢？欢迎在评论区一起讨论，希望对你有所帮助、有所借鉴。
2025-11-12 15:18:48
833
原创 有没有发现？你的请求为什么会先触发一个 OPTIONS！
OPTIONS 请求，也叫预检请求（Preflight Request）浏览器在发送复杂跨域请求前，会先发一个OPTIONS 请求，询问服务器：我可以用这个方法、带这些头、发送这个请求体吗？服务器返回允许信息后，浏览器才会发送真正的请求。这是浏览器的安全机制，不是你发的，也不是后端主动发的。OPTIONS 请求是浏览器的安全机制，为复杂跨域请求做“身份确认”不是每个请求都会发，只有复杂请求才会触发可以缓存预检，减少请求次数掌握预检逻辑，跨域问题从此不再迷惑记住。
2025-11-12 15:17:18
374
原创 别再直接改数组了！「非破坏性数组方法」来了！toReversed、toSorted、toSpliced、with
还在用reverse()sort()splice()直接改原数组？ES2023 已经帮你解决这个老问题了——全新的正式登场！一次性带你掌握这波「函数式升级」，让你的数组操作更安全、更优雅。
2025-10-28 16:01:10
674
原创 5分钟搞定 DeepSeek API 配置：从配置到调用一步到位
注册账号 →获取 API Key →设置环境变量 →调整base_url→直接调用！DeepSeek 的计费更低、兼容性强、接入门槛几乎为零。一次配置，全语言通用。DeepSeek API 文档。
2025-10-28 15:53:39
1080
原创 别再只会用 find()！这 9 个数组查找方法你必须掌握
想在面试或实际项目中写出更优雅、更高效的数组查找逻辑？如果你还只停留在 find()、indexOf() 这两个方法上，那你可能已经错过了 JS 新标准带来的强大能力！
2025-10-27 18:06:32
395
原创 flex-grow与flex-shrink，一篇文章搞明白
属性控制方向默认值意义flex-grow空间富余时放大比例0空间多了怎么分空间不足时收缩比例1空间不够怎么挤。
2025-10-27 17:51:37
552
原创 「别再复制正则了」用 regex-center 一站式管理、校验、提取所有正则
摘要： Regex Center 是一个专业的正则表达式管理库，旨在解决开发中正则规则重复定义、维护困难的问题。它内置100+常用正则规则，支持统一管理、自定义扩展和类型提示，并提供提取、替换、高亮等文本处理功能。核心特性包括命名分组、ReDoS安全防护、TypeScript支持等，适用于浏览器和Node.js环境。通过简单API即可实现正则验证和文本处理，还能自定义团队规则库，提升开发效率与代码一致性。
2025-10-13 11:30:28
316
原创 别再只会 useState 了！React 7 大常用 Hooks 深度解析（场景 + 优缺点 + 性能对比）
简单状态useState副作用useEffect跨组件共享useContext复杂状态管理useReducerDOM & 持久化值useRef性能优化useMemo掌握这 7 个 Hooks，你就已经覆盖了 90% 的 React 开发场景。在你自己的项目里，你最常用的 Hook 是哪个？有没有踩过useEffect依赖数组的坑？欢迎在评论区分享你的经验。
2025-09-25 17:22:26
329
原创 前端拖拽，看似简单，其实处处是坑
多设备事件差异拖拽边界处理iframe 兼容性框架下状态丢失移动端滚动冲突如果你只需要写一个 Demo，原生三行代码足够。但如果你要在项目里用，建议直接用成熟的库，比如drag-kit，能帮你绕开大多数坑，快速上线一个稳定、流畅、功能完整的拖拽体验。
2025-09-25 17:09:23
1170
原创 别再放任用户乱填 IP 了！一套前端 IP 与 CIDR 校验的高效方案
离我们前端并不遥远！在表单里输个 `192.168.300.1`，结果后端直接报错;运维想加个网段 `10.0.0.0/40`，系统却崩了；防火墙、白名单、批量导入……一个错误输入可能拖垮整个配置流
2025-09-17 09:47:53
457
原创 clip-path 导致移动端字体模糊问题的排查与解决
clip-path 是 CSS 的一个属性，用来 裁剪元素的显示区域。简单理解：就像拿一把剪刀，把元素裁剪成某个形状，超出部分不会显示。/* 裁剪成圆形 */.circle {/* 裁剪成椭圆 */.ellipse {/* 裁剪成自定义多边形 */.polygon {circle → 变成一个圆形显示区域。ellipse → 裁剪成椭圆。polygon → 按照多边形路径裁剪。这种特性在做动效、炫酷背景时非常常见，因为可以实现非矩形的裁剪效果。
2025-09-15 14:04:27
479
原创 Vue3 自定义 Hook：从入门到进阶（～～安静的阅读2分钟，相信我，这篇文章一定能给你启发）
安静的阅读2分钟，相信我，这篇文章一定能给你启发～～Hook 离我们并不远，而且一点也不复杂。本文将从浅到深理解自定义 Hook，并通过四个层次的案例，以及通用 Hook 模板，让你快速掌握它的用法。
2025-09-10 10:53:24
634
原创 gpt-5与gpt-5-fast
写一个支持分页、搜索、排序的通用表格组件，要求考虑性能优化和可扩展性。我本人是个开发，个人通过实践认为：文本类使用。，如果写代码，建议还是。
2025-08-12 19:33:35
630
原创 npm ERR! /Users/tal/Library/Caches/node-gyp/16.19.1/include/node/v8.h:22:10: fatal error: ‘atomic‘ f
就你的电脑不行，兄弟姐妹们该升级 npm 了！按照我的方式来，我们是前端项目，跟 Xcode 没啥关系！兄弟姐妹们解决了不用谢！
2025-08-11 16:51:55
261
原创 MongoDB Memory Server与完整的MongoDB的主要区别
MongoDB Memory Server是一个在内存中运行的轻量级MongoDB实例，主要用于开发和测试环境，而完整的MongoDB是一个生产级的持久化数据库系统。
2025-07-03 13:50:10
462
原创 还在纠结 provide/inject 还是 Pinia？看完这篇你就不纠结了！
我们常常面临这样的选择：这个数据我应该放在 Pinia 里，还是用 provide/inject 传一下就好？
2025-07-02 09:46:38
415
原创 别再乱写样式了！React 6 大主流样式方案全解析，性能差异巨大！
你是否遇到过这些痛点：改个样式，全局炸锅；多人协作，样式冲突频发；动态样式实现太麻烦。。。。。。在 React 项目中，写样式的方式不止一种，但选错方式，可能会直接拖垮性能和团队协作！
2025-07-02 09:42:03
509
原创 理解本地 `hosts` 文件原理：从本地解析到完整域名解析流程
在日常中，我们经常通过配置 `hosts` 文件来修改某些域名的解析行为。但你是否真正了解它的原理？
2025-07-01 10:53:36
1166
原创 React性能翻车案例：别让 setState 毁了你的主线程！
页面滚动一卡一卡的，是性能瓶颈？DOM 结构太复杂？IntersectionObserver 用错了？我也这么想过……直到我发现罪魁祸首是：高频率的 setState 调用。
2025-06-27 11:32:01
492
原创 React性能优化精髓之一：频繁setState导致滚动卡顿的解决方案
不是所有数据都需要放在 `state` 中，合理的数据分层比复杂的防抖节流更有效。
2025-06-24 18:25:21
559
1
原创 grafana-mcp-analyzer：基于 MCP 的轻量 AI 分析监控图表的运维神器！
grafana-mcp-analyzer是一个开源项目，通过MCP协议将AI助手与Grafana监控平台连接，实现自然语言分析监控数据。它能自动读取Grafana仪表盘，提供专业运维分析和优化建议。主要特点：支持多种AI助手（ChatGPT/Claude/Cursor）30秒快速配置，支持curl命令和HTTP API两种方式全面分析监控数据并提供可执行建议轻量级部署，支持多种数据源安装只需3分钟：npm安装工具配置Grafana连接集成AI助手通过自然语言查询获取专业分析
2025-06-06 13:58:51
2935
9
原创 Grafana-mcp-analyzer：让你用 AI 分析监控图表的神器！
是一个开源工具，让你可以通过。简单来说，它帮你把监控图表“接入 AI”，你只用一句话，就能让 AI 看图说话，帮你查找问题、分析异常、识别趋势。
2025-05-30 18:47:52
1437
原创 pnpm 比 npm 更适合依赖包的管理。不仅更快，甚至更安全！
你还在用 npm 吗？可能你已经踩过“幽灵依赖”的坑但没意识到。而今天，我们不仅要搞懂 npm 与 pnpm 的核心差异，还要快速上手 pnpm，享受它带来的飞一般的开发体验！
2025-05-20 09:58:51
1701
原创 ❌❌别再只会用 npm 了！学会 npx，你就领先一步！
在 Node.js 开发中，npm 是常用的包管理工具，负责安装和管理依赖包，而 npx 则是 npm v5.2+ 提供的命令行工具，用于快速执行 npm 包中的 CLI 工具，无需安装或配置。npx 的优势在于可以避免全局安装，减少命令复杂度，特别适合一次性使用 CLI 工具的场景。例如，创建 React 项目时，使用 npx create-react-app my-app 比传统的 npm install -g create-react-app 更高效且不污染全局环境。总结来说，npm 用于安装工具，n
2025-05-20 09:54:01
298
原创 【纯干货～～】Vue 组件封装通用方法论
突发奇想，是否可以提炼出一套通用的组件开发方法论。即使是刚入行的前端新手，也能快速上手、少踩坑。总说结构清晰、复用性强、沟通明确的 Vue 组件？到底怎么开发？
2025-05-08 11:00:25
1749
原创 监听尺寸变化还在用 resize？你可能已经错过了 ResizeObserver！
总结一句话：ResizeObserver =更轻量、更精准、更高效的尺寸变化监听方案。避免在回调中同步读取布局（如），防止引发强制回流，造成性能抖动。多元素监听需防抖/节流控制频率，降低回调频率，避免卡顿。组件内要在生命周期正确绑定/解绑，防止内存泄漏。IE 不支持，需用 Polyfill 兼容（或者。
2025-04-21 09:51:05
724
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人