摘要：
📌 一句话核心区别 Skills（传统技能/工具插件）：大模型的“应用触手”。通过动态、渐进式的多轮对话，让模型去猜测和调用一个个碎片化的 API。 MCP（模型上下文协议）：大模型的“系统级驱动”。通过统一的常驻标准协议，让模型与外部环境（本地文件、数据库）实现一次性底层打通，直接按需读写数据。 阅读全文
posted @ 2026-07-18 22:51
HuangBingQuan
阅读(16)
评论(0)
推荐(0)
摘要：
读完这篇，你会理解 ChatGPT / Claude 输出文字背后的核心机制。 为什么写这篇 最近在工作中深度使用 Claude Code——让 AI 直接读取 Figma 设计稿、写组件、改 Bug，协作下来效率提升很明显。 用得多了自然就好奇：它到底是怎么工作的？输出的文字是怎么一个个生成的？为 阅读全文
posted @ 2026-05-15 10:20
HuangBingQuan
阅读(72)
评论(0)
推荐(0)
摘要：
背景：提升TypeScript开发体验与团队协作效率 在现代化的 TypeScript 项目开发中，代码的类型安全和开发者体验是保障质量与效率的两大支柱。然而，默认的编辑器设置往往需要我们频繁地通过 悬停 来查看类型信息，或在 问题面板 中寻找错误提示，这种上下文切换打断了编码的心流，降低了代码的直 阅读全文
posted @ 2026-02-13 10:02
HuangBingQuan
阅读(45)
评论(0)
推荐(0)
摘要：
背景 传统点对点调用让服务之间像蜘蛛网一样缠绕：一次改动，全网抖动。 发布-订阅（Pub/Sub）通过Broker把“谁发”与“谁收”彻底解耦，将调用关系转化为“主题-订阅”声明式关系，成为现代微服务、实时推送、事件驱动架构的事实标准。 点对点耦合 点对点耦合的成因 在微服务中，A服务直接调用B服务 阅读全文
posted @ 2025-11-19 23:15
HuangBingQuan
阅读(45)
评论(0)
推荐(0)
摘要：
页面卡顿的本质是浏览器无法在16.7毫秒内完成一帧的渲染工作（以达到60FPS的流畅度）。 问题根源可归为两大类：CPU计算瓶颈和I/O等待瓶颈。 一、 CPU瓶颈（主线程过载） 根本原因： JavaScript是单线程的。主线程负责执行JS、计算样式、布局、绘制等。一个长时间任务会阻塞整个线程。 阅读全文
posted @ 2025-09-25 22:30
HuangBingQuan
阅读(284)
评论(0)
推荐(0)
摘要：
React useMemo 深度解析 一、从函数组件工作原理说起 1.1 渲染即调用 函数组件的本质就是一个 JavaScript 函数。每次 State 或 Props 发生变化时，React 就会调用这个函数： 执行函数体，生成新的虚拟 DOM（JSX） 与上一次的虚拟 DOM 进行 Diff 阅读全文
posted @ 2025-09-01 00:22
HuangBingQuan
阅读(49)
评论(0)
推荐(0)
摘要：
JavaScript 函数重载实现 JavaScript 没有原生的函数重载，但可以用闭包 + 链式回溯优雅地模拟它。 什么是函数重载 函数重载是指同一个函数名，根据传入参数的个数或类型，执行不同的逻辑。 Java、C++ 等语言原生支持，但 JavaScript 不支持——同名函数后者会直接覆盖前 阅读全文
posted @ 2025-04-26 14:24
HuangBingQuan
阅读(49)
评论(0)
推荐(0)
摘要：
随着新的一年的钟声敲响，祝大家2024年元旦快乐！愿你的代码如同流水般顺畅，bug远离你的键盘。在这个充满希望的新年里，愿你在编程的世界里发现更多的乐趣和创新。让我们一起在代码的海洋里航行，探索未知的领域，创造出更加精彩的作品。愿你在新的一年里，不仅技术日新月异，也能享受生活的每一个美好瞬间。新年快 阅读全文
posted @ 2024-01-01 20:56
HuangBingQuan
阅读(79)
评论(0)
推荐(0)
摘要：
读完这篇，你会理解 webpack 打包产物的内部结构，以及模块系统在浏览器里是怎么运行的。 为什么写这篇 每天都在用 webpack，但你有没有好奇过： 我写了十几个 JS 文件，打包后浏览器是怎么跑起来的？ import / require 浏览器本身不支持，webpack 是怎么处理的？ 同一 阅读全文
posted @ 2023-04-19 16:44
HuangBingQuan
阅读(90)
评论(0)
推荐(0)
摘要：
数据变了，视图自动更新——这背后是怎么做到的？ 什么是数据响应式 当数据发生变化时，自动执行依赖该数据的相关函数（如渲染函数）。 const data = { count: 0 } autorun(() => { document.body.innerHTML = data.count // 用到了 阅读全文
posted @ 2023-02-19 22:00
HuangBingQuan
阅读(91)
评论(0)
推荐(0)
摘要：
浅拷贝、深克隆、各种方案的能力边界一次说清楚。 先理解：浅拷贝 vs 深克隆 const obj = { a: 1, b: { c: 2 } } 浅拷贝：复制第一层，嵌套对象还是同一个引用 深克隆：递归复制所有层级，完全独立 // 浅拷贝 const shallow = { ...obj } sha 阅读全文
posted @ 2022-12-29 23:54
HuangBingQuan
阅读(104)
评论(0)
推荐(0)
摘要：
基于实际使用经验总结的 AI 辅助开发效能提升指南，持续迭代中。 1. 会话独立与连接 每个会话保持独立，同时通过机制建立连接。 Do ✅ Don't ❌ 单次会话聚焦一个主题，避免上下文污染 在一个会话中频繁切换无关话题 通过 Memory 文件在会话间传递关键信息 依赖聊天历史作为持久记忆 使用 阅读全文
posted @ 2026-07-23 22:05
HuangBingQuan
阅读(3)
评论(0)
推荐(0)
摘要：
📌 一句话定义 Sub-Agent（子代理/子专家） 是大模型工程化架构中的“专项打工人”。它们由主代理（Master/Supervisor）统一调度，拥有独立的系统提示词（System Prompt）、独立的会话上下文（Session Context）以及独立的工具集（Skills/Tools） 阅读全文
posted @ 2026-07-18 23:37
HuangBingQuan
阅读(15)
评论(0)
推荐(0)
摘要：
核心准则 "仅在高度聚合的表单对象（>5 个关联字段，且不涉及解构场景）时使用 reactive()" 一句话总结：ref() 是安全的默认选择，reactive() 是特定场景下的便利性优化。 一、选择决策树 开始 ├─ 字段数 > 5 且 不会解构？ │ └─ 是 → reactive() ← 阅读全文
posted @ 2026-07-01 10:53
HuangBingQuan
阅读(17)
评论(0)
推荐(0)
摘要：
适用工具：Claude Code、Codex、Cursor 等现代 AI Coding Agent 核心理念：从"教 AI 写单段代码"升级为"多层次上下文工程" 核心机制：两种视角看提示词层级 视角一：运行时视角（AI 底层机制） 从 AI 的实际运行来看，提示词只有两层： ┌────────── 阅读全文
posted @ 2026-06-29 23:45
HuangBingQuan
阅读(21)
评论(0)
推荐(0)
摘要：
引子 在许多现代化前端脚手架（如旧版 vue-cli 的模板过滤机制、metalsmith 插件系统）中，我们经常会看到如下的代码结构： module.exports = function evaluate(exp, data) { // 核心：动态构造一个执行函数 const fn = new F 阅读全文
posted @ 2026-06-29 17:23
HuangBingQuan
阅读(9)
评论(0)
推荐(0)
摘要：
一、为什么需要环境变量注入 1.1 一场事故引发的思考 假设你是一个后端开发者。某天你接到任务：把刚写完的支付服务部署到生产环境。 你打开配置文件，把数据库地址从 192.168.1.100:3306 改成 xx.x.x.xxx:3306，把密码从 dev123 改成 prod_secret_202 阅读全文
posted @ 2026-06-29 14:27
HuangBingQuan
阅读(21)
评论(0)
推荐(0)
摘要：
规范前端项目中敏感数据的本地存储行为，结合 pinia-plugin-persistedstate 与 crypto-js，实现数据防窥探、防篡改的「暗箱化」缓存方案。 一、CryptoJS 是什么 1.1 出现背景 CryptoJS（Crypto.js）是一个纯 JavaScript 实现的加密算 阅读全文
posted @ 2026-06-18 13:50
HuangBingQuan
阅读(25)
评论(0)
推荐(0)
摘要：
一句话总结 ref() 对 .value 做深度响应式代理，shallowRef() 只对 .value 本身做响应式追踪，不触及内部属性。 基本使用 import { ref, shallowRef } from 'vue'; // ─── ref — 深度响应式 ─── const state1 阅读全文
posted @ 2026-06-16 13:56
HuangBingQuan
阅读(19)
评论(0)
推荐(0)
摘要：
⚡ Vue 3 常用 API 技术速查指南 在 Vue 3 组合式 API（<script setup>）开发中，高频使用的核心 API 可分为以下五大类。 一、 响应式核心 API（基础必备） 用于将普通 JavaScript 数据转化为支持视图更新的响应式数据。 1. ref() 适用场景：基本 阅读全文
posted @ 2026-06-16 11:41
HuangBingQuan
阅读(15)
评论(0)
推荐(0)
摘要：
🔍 一、 审查核心：什么是卫语句？ 卫语句是一种提早退出函数的编程模式。其核心思想是：“先挑刺，后干活”。 在函数开头，先检查所有不满足条件的“非法情况”或“边界条件”，一旦匹配立刻用 return 或 throw 阻断并退出，将真正的核心业务逻辑平铺在函数最外层。 📋 二、 Code Revi 阅读全文
posted @ 2026-06-15 18:24
HuangBingQuan
阅读(15)
评论(0)
推荐(0)
摘要：
一、不要滥用响应式对象 1. 核心定义 只将需要驱动视图（DOM）更新或引发跨组件副作用的数据转化为响应式（ref/reactive）。避免劫持复杂的第三方实例、海量静态数据以及内部临时变量。 2. 滥用后果 性能衰减：深层响应式（Deep Reactivity）递归遍历嵌套属性，导致内存飙升、CP 阅读全文
posted @ 2026-06-15 18:12
HuangBingQuan
阅读(29)
评论(0)
推荐(0)
摘要：
一、解决了什么问题 传统多应用架构的痛点： 问题 场景 重复加载依赖 A、B 两个应用都用 React，用户访问时加载了两份 跨应用共享代码困难 公共组件只能发 npm 包，改一次发布一次 巨石应用难拆分 一个大 repo，构建慢、团队协作难 微前端集成复杂 iframe、single-spa 各有 阅读全文
posted @ 2026-06-09 10:28
HuangBingQuan
阅读(33)
评论(0)
推荐(0)
摘要：
基于 React Context + react-hook-form 的三层架构弹窗表单规范，根治团队内弹窗表单写法不一致的问题。 一、背景与痛点 项目使用 Vite + React 18 + TypeScript + antd，react-hook-form。团队内弹窗表单存在以下乱象： 乱象 后 阅读全文
posted @ 2026-06-03 02:51
HuangBingQuan
阅读(29)
评论(0)
推荐(0)
摘要：
在大模型应用开发中，处理用户历史消息的核心原则是：保持会话独立与连续，同时尽量精简内容。 一、 为什么必须传递历史记录？ 大模型是无状态的（Stateless）：大模型本质上没有长久记忆。每一次请求都是完全独立的计算，它不记得上一轮说了什么。 维持语境连贯性：为了让模型理解指代词（如“它”、“刚才那 阅读全文
posted @ 2026-06-01 17:51
HuangBingQuan
阅读(65)
评论(0)
推荐(0)
摘要：
一、核心概念 Coding Agent 是一种基于大语言模型的代码智能体，它通过「大模型决策 + Agent 工具执行」的闭环交互，实现自动读取、修改、运行和调试代码的能力，解决用户的开发需求。 二、完整工作流程 初始化提示词（System Prompt） 提前给大模型配置上下文信息，包括： 当前项 阅读全文
posted @ 2026-05-30 16:17
HuangBingQuan
阅读(48)
评论(0)
推荐(0)
摘要：
Flex 与 Grid 使用技巧 & 注意点 一份面向实战的 CSS 布局速查 —— 何时用 Flex、何时用 Grid、常见坑与最佳实践 一、心智模型：先选对工具 维度 Flexbox Grid 维度 一维（行 或 列） 二维（行 和 列） 思路 内容驱动（让子项自适应） 布局驱动（先画格子，再放 阅读全文
posted @ 2026-05-26 15:50
HuangBingQuan
阅读(32)
评论(0)
推荐(0)
摘要：
核心目标：让大屏在不同分辨率（1366×768 → 2560×1440 → 4K）下都能真实重排，图表清晰、字体不糊、关键信息不被裁切。 一、方案对比：为什么不用 transform: scale() 业界大屏常见两类方案，本项目选择第二类： 维度 scale 缩放方案 流式布局方案（本项目） 实现 阅读全文
posted @ 2026-05-21 17:24
HuangBingQuan
阅读(52)
评论(0)
推荐(0)
摘要：
Vue2 与 Vue3 响应式核心实现对比 基于本仓库 src/core/observer/ 源码与 Vue3 @vue/reactivity 实现的对比总结。 一、整体架构对比 维度 Vue2 Vue3 拦截方式 Object.defineProperty Proxy + Reflect 响应单元 阅读全文
posted @ 2026-05-20 17:25
HuangBingQuan
阅读(25)
评论(0)
推荐(0)
摘要：
一、ref 用于创建响应式数据，可包裹任意类型（原始值、对象、数组、Map、Set 等）。 import { ref } from 'vue' const name = ref('Bill') // 原始值 const user = ref({ name: 'Bill', age: 18 }) // 阅读全文
posted @ 2026-05-18 19:59
HuangBingQuan
阅读(23)
评论(0)
推荐(0)
摘要：
告别手动切换，让环境管理真正无感 无缝切换，极致体验：前端工具链 Volta。（快速、可靠、通用） 背景 在前端开发生态中，Node.js 无疑是核心基石之一（从Rollup到Webpack再到Vite，这些构建工具都离不开Node.js环境，这些构建工具本身都运行在Node.js之上，依赖Node 阅读全文
posted @ 2026-03-26 10:30
HuangBingQuan
阅读(118)
评论(0)
推荐(0)
摘要：
不借助服务端，纯前端实现跨页签实时通信。 是什么 BroadcastChannel 是浏览器原生提供的 API，允许同源的多个页面（标签页、iframe、Worker）之间互相发送消息。 类比理解：就像一个公共广播频道——订阅了同一个频道的所有页面，都能收到广播消息。 核心用法 // 创建 / 加入 阅读全文
posted @ 2025-10-15 23:45
HuangBingQuan
阅读(67)
评论(0)
推荐(1)
摘要：
交叉观察者- IntersectionObserver复盘 一、 Intersection Observer是什么？ Intersection Observer API 提供了一种异步观察目标元素与祖先元素或视口交叉状态的方法。通俗地说，就是可以高效地监测一个元素是否进入或离开了另一个元素的“可视区 阅读全文
posted @ 2025-10-13 23:17
HuangBingQuan
阅读(49)
评论(0)
推荐(0)
摘要：
什么是泛型 T 是一个类型变量，代表"某种类型" 举个例子 loadMore: (page: number) => Promise<T[]>; 相当于说：这个函数返回一个Promise，Promise解析的结果是T类型的数组 实际使用时的具体化 // 当 T = Product 时： loadMor 阅读全文
posted @ 2025-09-30 23:59
HuangBingQuan
阅读(39)
评论(0)
推荐(0)
摘要：
TypeScript：从数组值推导联合类型 只写一次，类型和值永远同步。 问题：类型和值重复维护 // ❌ 定义了两次，改一个忘了改另一个，容易出错 const eventNames = ["UNAUTHORIZED", "NETWORK_ERROR", "TIMEOUT"] type EventN 阅读全文
posted @ 2025-09-20 22:45
HuangBingQuan
阅读(66)
评论(0)
推荐(0)
摘要：
把逻辑从组件里抽出来，让组件只负责渲染。 是什么 自定义 Hook 就是一个以 use 开头的普通函数，内部可以调用其他 Hook，用来封装可复用的状态逻辑。 function useUserData(userId) { const [user, setUser] = useState(null) 阅读全文
posted @ 2025-09-05 00:20
HuangBingQuan
阅读(54)
评论(0)
推荐(0)
摘要：
CSS 线性渐变 线性渐变(linear-gradient)是CSS中创建颜色平滑过渡的强大工具。 基本语法 background-image: linear-gradient(渐变方向, 颜色1 变化区间, 颜色2 变化区间, ... 颜色n变化区间); 渐变方向 使用角度：0deg（上到下）、9 阅读全文
posted @ 2025-07-29 22:32
HuangBingQuan
阅读(76)
评论(0)
推荐(0)
摘要：
React 错误边界 React错误边界的本质上是防止子组件错误（渲染过程中）向上冒泡导致整个应用崩溃，错误边界可以解决导致整个应用崩溃问题。 在 React 错误边界中，fallback 确实实现了典型的降级策略： 理想情况：正常渲染业务组件 异常情况：当组件崩溃时，降级显示预设的备用 UI（组件 阅读全文
posted @ 2025-07-25 22:08
HuangBingQuan
阅读(98)
评论(0)
推荐(0)
摘要：
AbortController：优雅地取消请求 前端开发中，取消一个进行中的请求是刚需。AbortController 是浏览器原生提供的标准解决方案。 是什么 AbortController 是浏览器原生 Web API，用于中止一个或多个异步操作（最常见的是取消 fetch / axios 请求 阅读全文
posted @ 2025-06-10 16:52
HuangBingQuan
阅读(114)
评论(0)
推荐(0)
摘要：
用于自动识别和引入 uView UI 组件库的组件。 pages.json下配置easycom "easycom": { "autoscan": true, "custom": { "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" } } 1. easyc 阅读全文
posted @ 2025-06-04 16:40
HuangBingQuan
阅读(504)
评论(0)
推荐(0)
摘要：
在 SCSS 中，@import 和 @use 都是用于引入其他样式文件的规则，但它们的工作方式和用途有显著区别。 以下是两者的主要对比： @import 全局作用域：通过 @import 引入的文件中的变量、混合（mixins）、函数等会全局暴露，可能导致命名冲突。 // file: _vars. 阅读全文
posted @ 2025-05-16 09:47
HuangBingQuan
阅读(438)
评论(0)
推荐(0)
摘要：
useResize 是一个自定义 Vue3 Hook，用于实现大屏项目的自适应布局。它通过监听窗口尺寸变化，自动调整页面元素的缩放比例，确保在不同分辨率下都能保持一致的视觉效果。 import { onBeforeMount, onBeforeUnmount, onMounted, ref } fr 阅读全文
posted @ 2025-05-02 21:55
HuangBingQuan
阅读(152)
评论(0)
推荐(0)
摘要：
这段代码是一个用于移动端响应式布局的 REM 自适应方案，其核心原理是通过动态调整根元素（html）的字体大小（font-size），使得页面元素能够根据屏幕宽度等比缩放。 假设设计稿宽度为 1080px，定义 1rem = 100px。 设计稿中 100px 的元素 → 代码写为 1rem。 根字 阅读全文
posted @ 2025-03-31 17:23
HuangBingQuan
阅读(158)
评论(0)
推荐(0)
摘要：
搞懂 hash 的目的和三种类型，彻底理解 webpack 缓存控制。 为什么需要 Hash？ 浏览器会缓存静态资源。问题是：你更新了代码，但文件名没变，浏览器认为"这个文件我已经有了"，直接用旧缓存，用户看不到新版本。 加了 hash 之后，每次构建文件名不同： bundle.abc123.js 阅读全文
posted @ 2025-03-14 20:43
HuangBingQuan
阅读(57)
评论(0)
推荐(0)
浙公网安备 33010602011771号