摘要：
读完这篇，你会理解 ChatGPT / Claude 输出文字背后的核心机制。 为什么写这篇 最近在工作中深度使用 Claude Code——让 AI 直接读取 Figma 设计稿、写组件、改 Bug，协作下来效率提升很明显。 用得多了自然就好奇：它到底是怎么工作的？输出的文字是怎么一个个生成的？为 阅读全文
posted @ 2026-05-15 10:20
HuangBingQuan
阅读(2)
评论(0)
推荐(0)
摘要：
背景：提升TypeScript开发体验与团队协作效率 在现代化的 TypeScript 项目开发中，代码的类型安全和开发者体验是保障质量与效率的两大支柱。然而，默认的编辑器设置往往需要我们频繁地通过 悬停 来查看类型信息，或在 问题面板 中寻找错误提示，这种上下文切换打断了编码的心流，降低了代码的直 阅读全文
posted @ 2026-02-13 10:02
HuangBingQuan
阅读(25)
评论(0)
推荐(0)
摘要：
背景 传统点对点调用让服务之间像蜘蛛网一样缠绕：一次改动，全网抖动。 发布-订阅（Pub/Sub）通过Broker把“谁发”与“谁收”彻底解耦，将调用关系转化为“主题-订阅”声明式关系，成为现代微服务、实时推送、事件驱动架构的事实标准。 点对点耦合 点对点耦合的成因 在微服务中，A服务直接调用B服务 阅读全文
posted @ 2025-11-19 23:15
HuangBingQuan
阅读(37)
评论(0)
推荐(0)
摘要：
页面卡顿的本质是浏览器无法在16.7毫秒内完成一帧的渲染工作（以达到60FPS的流畅度）。 问题根源可归为两大类：CPU计算瓶颈和I/O等待瓶颈。 一、 CPU瓶颈（主线程过载） 根本原因： JavaScript是单线程的。主线程负责执行JS、计算样式、布局、绘制等。一个长时间任务会阻塞整个线程。 阅读全文
posted @ 2025-09-25 22:30
HuangBingQuan
阅读(240)
评论(0)
推荐(0)
摘要：
要理解useMemo首先要明白React函数式组件是如何工作的 React 函数组件工作原理 渲染即调用：函数组件的本质就是一个 JavaScript 函数，每次状态（State）或属性（Props）发生变化时，React 就会调用这个函数来生成新的虚拟 DOM（JSX），并与之前的进行对比（Dif 阅读全文
posted @ 2025-09-01 00:22
HuangBingQuan
阅读(36)
评论(0)
推荐(0)
摘要：
JavaScript 函数重载实现 JavaScript 没有原生的函数重载，但可以用闭包 + 链式回溯优雅地模拟它。 什么是函数重载 函数重载是指同一个函数名，根据传入参数的个数或类型，执行不同的逻辑。 Java、C++ 等语言原生支持，但 JavaScript 不支持——同名函数后者会直接覆盖前 阅读全文
posted @ 2025-04-26 14:24
HuangBingQuan
阅读(48)
评论(0)
推荐(0)
摘要：
随着新的一年的钟声敲响，祝大家2024年元旦快乐！愿你的代码如同流水般顺畅，bug远离你的键盘。在这个充满希望的新年里，愿你在编程的世界里发现更多的乐趣和创新。让我们一起在代码的海洋里航行，探索未知的领域，创造出更加精彩的作品。愿你在新的一年里，不仅技术日新月异，也能享受生活的每一个美好瞬间。新年快 阅读全文
posted @ 2024-01-01 20:56
HuangBingQuan
阅读(72)
评论(0)
推荐(0)
摘要：
读完这篇，你会理解 webpack 打包产物的内部结构，以及模块系统在浏览器里是怎么运行的。 为什么写这篇 每天都在用 webpack，但你有没有好奇过： 我写了十几个 JS 文件，打包后浏览器是怎么跑起来的？ import / require 浏览器本身不支持，webpack 是怎么处理的？ 同一 阅读全文
posted @ 2023-04-19 16:44
HuangBingQuan
阅读(79)
评论(0)
推荐(0)
摘要：
数据变了，视图自动更新——这背后是怎么做到的？ 什么是数据响应式 当数据发生变化时，自动执行依赖该数据的相关函数（如渲染函数）。 const data = { count: 0 } autorun(() => { document.body.innerHTML = data.count // 用到了 阅读全文
posted @ 2023-02-19 22:00
HuangBingQuan
阅读(80)
评论(0)
推荐(0)
摘要：
浅拷贝、深克隆、各种方案的能力边界一次说清楚。 先理解：浅拷贝 vs 深克隆 const obj = { a: 1, b: { c: 2 } } 浅拷贝：复制第一层，嵌套对象还是同一个引用 深克隆：递归复制所有层级，完全独立 // 浅拷贝 const shallow = { ...obj } sha 阅读全文
posted @ 2022-12-29 23:54
HuangBingQuan
阅读(102)
评论(0)
推荐(0)
摘要：
告别手动切换，让环境管理真正无感 无缝切换，极致体验：前端工具链 Volta。（快速、可靠、通用） 背景 在前端开发生态中，Node.js 无疑是核心基石之一（从Rollup到Webpack再到Vite，这些构建工具都离不开Node.js环境，这些构建工具本身都运行在Node.js之上，依赖Node 阅读全文
posted @ 2026-03-26 10:30
HuangBingQuan
阅读(61)
评论(0)
推荐(0)
摘要：
不借助服务端，纯前端实现跨页签实时通信。 是什么 BroadcastChannel 是浏览器原生提供的 API，允许同源的多个页面（标签页、iframe、Worker）之间互相发送消息。 类比理解：就像一个公共广播频道——订阅了同一个频道的所有页面，都能收到广播消息。 核心用法 // 创建 / 加入 阅读全文
posted @ 2025-10-15 23:45
HuangBingQuan
阅读(54)
评论(0)
推荐(1)
摘要：
交叉观察者- IntersectionObserver复盘 一、 Intersection Observer是什么？ Intersection Observer API 提供了一种异步观察目标元素与祖先元素或视口交叉状态的方法。通俗地说，就是可以高效地监测一个元素是否进入或离开了另一个元素的“可视区 阅读全文
posted @ 2025-10-13 23:17
HuangBingQuan
阅读(43)
评论(0)
推荐(0)
摘要：
什么是泛型 T 是一个类型变量，代表"某种类型" 举个例子 loadMore: (page: number) => Promise<T[]>; 相当于说：这个函数返回一个Promise，Promise解析的结果是T类型的数组 实际使用时的具体化 // 当 T = Product 时： loadMor 阅读全文
posted @ 2025-09-30 23:59
HuangBingQuan
阅读(33)
评论(0)
推荐(0)
摘要：
TypeScript：从数组值推导联合类型 只写一次，类型和值永远同步。 问题：类型和值重复维护 // ❌ 定义了两次，改一个忘了改另一个，容易出错 const eventNames = ["UNAUTHORIZED", "NETWORK_ERROR", "TIMEOUT"] type EventN 阅读全文
posted @ 2025-09-20 22:45
HuangBingQuan
阅读(52)
评论(0)
推荐(0)
摘要：
把逻辑从组件里抽出来，让组件只负责渲染。 是什么 自定义 Hook 就是一个以 use 开头的普通函数，内部可以调用其他 Hook，用来封装可复用的状态逻辑。 function useUserData(userId) { const [user, setUser] = useState(null) 阅读全文
posted @ 2025-09-05 00:20
HuangBingQuan
阅读(39)
评论(0)
推荐(0)
摘要：
CSS 线性渐变 线性渐变(linear-gradient)是CSS中创建颜色平滑过渡的强大工具。 基本语法 background-image: linear-gradient(渐变方向, 颜色1 变化区间, 颜色2 变化区间, ... 颜色n变化区间); 渐变方向 使用角度：0deg（上到下）、9 阅读全文
posted @ 2025-07-29 22:32
HuangBingQuan
阅读(67)
评论(0)
推荐(0)
摘要：
React 错误边界 React错误边界的本质上是防止子组件错误（渲染过程中）向上冒泡导致整个应用崩溃，错误边界可以解决导致整个应用崩溃问题。 在 React 错误边界中，fallback 确实实现了典型的降级策略： 理想情况：正常渲染业务组件 异常情况：当组件崩溃时，降级显示预设的备用 UI（组件 阅读全文
posted @ 2025-07-25 22:08
HuangBingQuan
阅读(89)
评论(0)
推荐(0)
摘要：
AbortController：优雅地取消请求 前端开发中，取消一个进行中的请求是刚需。AbortController 是浏览器原生提供的标准解决方案。 是什么 AbortController 是浏览器原生 Web API，用于中止一个或多个异步操作（最常见的是取消 fetch / axios 请求 阅读全文
posted @ 2025-06-10 16:52
HuangBingQuan
阅读(92)
评论(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
阅读(446)
评论(0)
推荐(0)
摘要：
在 SCSS 中，@import 和 @use 都是用于引入其他样式文件的规则，但它们的工作方式和用途有显著区别。 以下是两者的主要对比： @import 全局作用域：通过 @import 引入的文件中的变量、混合（mixins）、函数等会全局暴露，可能导致命名冲突。 // file: _vars. 阅读全文
posted @ 2025-05-16 09:47
HuangBingQuan
阅读(422)
评论(0)
推荐(0)
摘要：
useResize 是一个自定义 Vue3 Hook，用于实现大屏项目的自适应布局。它通过监听窗口尺寸变化，自动调整页面元素的缩放比例，确保在不同分辨率下都能保持一致的视觉效果。 import { onBeforeMount, onBeforeUnmount, onMounted, ref } fr 阅读全文
posted @ 2025-05-02 21:55
HuangBingQuan
阅读(145)
评论(0)
推荐(0)
摘要：
这段代码是一个用于移动端响应式布局的 REM 自适应方案，其核心原理是通过动态调整根元素（html）的字体大小（font-size），使得页面元素能够根据屏幕宽度等比缩放。 假设设计稿宽度为 1080px，定义 1rem = 100px。 设计稿中 100px 的元素 → 代码写为 1rem。 根字 阅读全文
posted @ 2025-03-31 17:23
HuangBingQuan
阅读(147)
评论(0)
推荐(0)
摘要：
搞懂 hash 的目的和三种类型，彻底理解 webpack 缓存控制。 为什么需要 Hash？ 浏览器会缓存静态资源。问题是：你更新了代码，但文件名没变，浏览器认为"这个文件我已经有了"，直接用旧缓存，用户看不到新版本。 加了 hash 之后，每次构建文件名不同： bundle.abc123.js 阅读全文
posted @ 2025-03-14 20:43
HuangBingQuan
阅读(43)
评论(0)
推荐(0)
摘要：
TypeScript 中的类型拓宽（Type Widening）是 TypeScript 编译器在推断变量类型时的一种行为。 它通常发生在使用 let 或 var 声明变量时，TypeScript 会将变量的类型推断为一个更宽泛的类型，而不是具体的字面量类型。这种行为是为了确保变量在后续可以被重新赋 阅读全文
posted @ 2025-03-04 13:37
HuangBingQuan
阅读(46)
评论(0)
推荐(0)
摘要：
tsconfig.json jsx为react-jsx React中提示xxxx不能用作JSX组件 产生原因：TypeScript 与 @types/react 版本不适配 版本对照表 https://www.npmjs.com/package/@types/react?activeTab=vers 阅读全文
posted @ 2025-02-28 16:26
HuangBingQuan
阅读(84)
评论(0)
推荐(0)
摘要：
Form.Item 下有多层包裹导致表单无法正确回填数据 在 Ant Design v4 中，如果 Form.Item 下有多层包裹（例如 Input 被包裹在 div 或其他组件中），可能会导致表单无法正确回填数据。这是因为 Form.Item 需要通过 name 属性找到直接子组件（如 Inpu 阅读全文
posted @ 2025-02-27 15:46
HuangBingQuan
阅读(134)
评论(0)
推荐(0)
摘要：
GitLab上配置SSH来拉取代码 1. 生成 SSH 密钥（如果尚未生成） 打开终端（Linux/macOS）或 Git Bash（Windows），运行以下命令生成密钥： ssh-keygen -t ed25519 -C "your_email@example.com" 按回车确认默认保存路径（ 阅读全文
posted @ 2025-02-24 13:03
HuangBingQuan
阅读(3738)
评论(0)
推荐(0)
摘要：
HtmlWebpackPlugin 版本号："webpack-dev-server": "^3.10.1" html-webpack-plugin@3 是较旧的版本（最新主版本已到5.x），主要适配 Webpack 4 及更早版本。 npm install html-webpack-plugin@3 阅读全文
posted @ 2025-02-16 20:54
HuangBingQuan
阅读(79)
评论(0)
推荐(0)
摘要：
webpack.BannerPlugin 是一个用于在生成的打包文件顶部添加自定义注释或横幅的插件。它通常用于添加版权信息、版本号、作者信息等。 基本配置 BannerPlugin 的配置对象可以是一个字符串或一个对象。以下是两种常见的配置方式： 1. 字符串配置 const webpack = r 阅读全文
posted @ 2025-02-06 11:44
HuangBingQuan
阅读(140)
评论(0)
推荐(0)
摘要：
1. 虚拟DOM的本质 在 Vue 中，可以通过一个名叫 h 的函数，该函数的调用结果就是返回虚拟 DOM，也就意味着虚拟DOM的本质是由渲染函数调用生成的普通JS对象. 真实DOM和虚拟DOM都设计到了两个层面计算 真实DOM 解析字符串（JS层面） 创建DOM的节点（DOM层面） 虚拟DOM 创 阅读全文
posted @ 2025-01-13 17:09
HuangBingQuan
阅读(63)
评论(0)
推荐(0)
摘要：
安装 TypeScript（TS）是一种编译时的静态类型语言，是一种强类型语言。 静态类型: 在TypeScript中，变量和函数的类型是在编写代码时指定的，而不是在运行时确定的。这有助于捕捉类型错误，并提供更好的代码自动补全、导航和重构支持。 编译时: 浏览器和nodejs并不能直接识别TS代码， 阅读全文
posted @ 2024-12-31 14:54
HuangBingQuan
阅读(113)
评论(0)
推荐(0)
摘要：
使用第三库简化流程 ts-node: 将ts代码在内存中完成编译，同时完成运行 安装: npm i -g ts-node 运行: ts-node src/index.ts nodemon: 检测文件变化 安装: npm i -g nodemon 运行: nodemon --exec ts-node 阅读全文
posted @ 2024-12-31 14:44
HuangBingQuan
阅读(34)
评论(0)
推荐(0)
摘要：
git 常用命令。 创建SSH Key $ ssh-keygen -t rsa -C "youremail@example.com" 配置用户信息 $ git config --global user.name "Your Name" $ git config --global user.email 阅读全文
posted @ 2024-12-11 12:27
HuangBingQuan
阅读(34)
评论(0)
推荐(0)
摘要：
为防止不符合规范的数据存入数据库，在用户对数据进行插入、修改、删除等操作时，MySQL提供了一种机制来检查数据库中的数据是否满足规定的条件，以保证数据库中数据的准确性和一致性，这种机制就是完整性约束。 MySQL中主要支持以下几种种完整性约束，如表所示。 其中Check约束是MySQL8中提供的支持 阅读全文
posted @ 2024-12-07 15:22
HuangBingQuan
阅读(140)
评论(0)
推荐(0)
摘要：
DDL修改，删除数据库表 -- 修改表结构 -- 增加一列 ALTER TABLE t_student ADD score DOUBLE(5, 2); -- 增加一列（放在最前面） ALTER TABLE t_student ADD score DOUBLE(5, 2) FIRST; -- 增加一列 阅读全文
posted @ 2024-12-07 14:16
HuangBingQuan
阅读(30)
评论(0)
推荐(0)
摘要：
修改，删除数据 DML -- 修改操作 UPDATE t_student SET age = 23 WHERE sno = 2056035; -- 删除操作 DELETE FROM t_student WHERE sno = 2056035; 总结 关键字，表名，字段名不区分大小写。 默认情况下，内 阅读全文
posted @ 2024-12-07 13:42
HuangBingQuan
阅读(30)
评论(0)
推荐(0)
摘要：
插入数据 SELECT * FROM t_student; -- 在t_student数据库表中插入数据 INSERT INTO t_student VALUES (2056035, '张三', '男', 18, NOW(), '移动2002', '666666@163.com'); INSERT 阅读全文
posted @ 2024-12-06 23:56
HuangBingQuan
阅读(26)
评论(0)
推荐(0)
摘要：
前端路由：Hash 模式 vs History 模式 单页应用（SPA）不跳页，靠的就是前端路由。两种模式原理不同，适用场景也不同。 什么是前端路由 传统多页应用：点链接 → 浏览器发请求 → 服务器返回新页面。 单页应用：点链接 → 不发请求 → JS 拦截，自己决定渲染什么内容。 前端路由就是实 阅读全文
posted @ 2024-11-27 17:10
HuangBingQuan
阅读(30)
评论(0)
推荐(0)
摘要：
vite.config.js中配置esbuild import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export 阅读全文
posted @ 2024-11-27 15:57
HuangBingQuan
阅读(164)
评论(0)
推荐(0)
摘要：
webpack+Terser 代码压缩 // webpack.config.js const TerserPlugin = require('terser-webpack-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css- 阅读全文
posted @ 2024-11-15 15:35
HuangBingQuan
阅读(43)
评论(0)
推荐(0)
摘要：
圣杯模式 圣杯模式的核心就是拿一个空的构造函数去当中间人,解决组合模式的缺陷。 举个例子 function Person(name, age) { this.name = name??""; this.age = age??""; }; Person.prototype.say = function 阅读全文
posted @ 2024-09-16 22:29
HuangBingQuan
阅读(69)
评论(0)
推荐(0)
摘要：
组合模式 前置知识 原型 原型链 apply 举个例子 function Person(name, age) { this.name = name??""; this.age = age??""; }; Person.prototype.say = function () { console.log 阅读全文
posted @ 2024-09-16 19:18
HuangBingQuan
阅读(11)
评论(0)
推荐(0)
摘要：
数据模式，结构，Props Vue双向绑定，修改数据自动更新视图，React单向数据流，需要手动setState。 Vue template 结构表现分离，React jsx 结构表现融合。 Vue Props 要声明才能使用，React 不需要声明直接使用。 阅读全文
posted @ 2024-09-04 14:48
HuangBingQuan
阅读(32)
评论(0)
推荐(0)
浙公网安备 33010602011771号