大前端
JavaScript、TypeScript、Vue、React、CSS、HTML、SSR……，前端的一切都在这 👈
「头哥」的博客
技术改变生活，分享驱动进步
前端、后端、AI、设计……，技术无界，分享无限
Skip to content
最新文章
- 2/10/2025使用 useEffect 实现节流效果（Debounce）Debounce 简介 Debounce 是一种常用的编程技术，主要用于限制某个函数在短时间内被频繁调用的情况。它特别适用于处理那些可能会以高频率触发的事件，例如窗口调整大小、滚动、键盘输入等。通过 debounce 技术，可以确保该函数只在最后一次触发事件后的指定延迟时间后执行一次，如果在这段时间内再次触发了事件，则重新计时。 工作原理 假设你设置了一个 300 毫秒的...
- 2/8/2025纯黑色背景下字体颜色的选择
- 1/25/2025Ant Design 日期组件显示中文问题
- 1/24/2025首次渲染 React useEffect 执行了两次刚接触新版本 React，一开始以为是我的问题，哪里触发的重新渲染或不小心多渲染了一次，研究了一番才发现是框架的特性。 StrictMode renders components twice (on dev but not production) in order to detect any problems with your code and warn you about them...
- 1/24/2025两次大写文件名导致的 Github 异常
- 1/19/2025Windows 实用快捷键窗口管理 Alt + F4：关闭当前程序 Win + E：此电脑 Win + E：打开资源管理器 Win + R：运行指令，键入： cmd命令终端 mstsc远程桌面 Win + X：快捷菜单，继续按（其它选项见列表）： F：应用和功能 A：PowerShell Win + D：显示桌面 Win + M：最小化所有窗口 Win + S：搜索 Ctrl + Alt + Del：任务管理器...
- 1/14/2025Nextjs + Prisma 生产环境 npm run start 各种报错用的是 pnpm 安装依赖。 报错：大概意思是找不到 Prisma 模型。 执行npx prisma generate后报错：bus error (core dumped)。试过各种方法无效，猜测可能是操作系统版本和 Node 版本的问题。 一番搜索后，把 node 版本从 v18.20.4 切换至 v20.11.1 没有了bus error (core...
- 1/14/2025npm install 导致服务器卡死执行npm install导致服务器卡死，Terminal 卡住停止，无法 Ctrl + C 退出，服务器无法 ssh 登录。只能重启服务器恢复 ssh 登录。 将 Node 版本从 18.20.4 升级为 20.18.1 解决了，之后执行npm install就正常了。
- 1/10/2025页面总是加载旧的文件，不加载更新后的代码查看浏览器发现加载的文件是旧的，重启 dev server、重新加载页面、重启浏览器、重新安装或移除更新的安装包、清除 npm 缓存等全都无效。 最后，删除 pnpm 的缓存文件，问题解决。 bashpnpm store prune
- 1/10/2025Material Design 几种实用 Bezier 运动曲线
- 1/7/2025创建和使用 npm 私有包常见三种创建 npm 私有包的方法：npm 网站发布私有包；创建私有仓库；静态打包文件。 1. npm 网站发布私有包 npm 注册账号并在package.json添加私人声明，发布到 npm。 json{ ..., "private": true, ... } 2. 私人 npm 仓库 登录到仓库 bashnpm login...
- 1/5/2025VSCode 无法使用中文标点符号按下组合键 Ctrl + . ，第二个键是句号，应该就可以了。
- 1/2/2025Github 提交代码失败且无法 Ping 通更改 hosts 文件： 140.82.113.3 github.com 199.232.5.194 github.global.ssl.fastly.net 54.231.114.219 github-cloud.s3.amazonaws.com Unix-Like 系统记得重新启用 hosts。
- 1/2/2025VSCode 修改文件名后 import 报错问题描述：修改文件名后，import 报错找不到模块，但实际文件和代码都没有问题？ 解决方案：VSCode 按 Ctrl + Shift + P 键打开命令面板，输入并选择 Restart TS Server命令。
- 12/30/2024Next Auth 报错 JWTSessionError使用 Github 登录，跳转会页面时，后台报错 JWTSessionError，获取 session 为 null。 解决方案：将 next-auth session 策略配置为 'jwt'。 tsexport const { handlers, signIn, signOut, auth } = NextAuth({ ...authConfig, adapter:...
- 12/20/2024使用 Chrome 监控 work_thread 子线程Chrome DevTools 是实用前端开发工具，对于 NodeJS 的开发和调试也是非常好用。 主线程代码在创建工作线程时传入一个启动参数，可以自己定义参数： jsconst worker = new Worker('./dist/worker.js', { execArgv: ["--inspect-brk"] });...
- 12/10/2024跨平台框架选择树形图跨平台框架选择树形图（来自通义千问） 开始 ├── 是否需要支持移动应用 (Android/iOS)? │ ├── 是 │ │ ├── 是否需要高性能和接近原生的体验? │ │ │ ├── 是 → Flutter, React Native │ │ │ └── 否 → Ionic, Xamarin Forms, PhoneGap/Cordova │ │ ├── 是否已有 Web 技术栈...
- 12/8/2024关于 buffer 转 Float32Array 的问题直接使用 buffer 创建 Float32Array，每个字节对应一个元素： jsconst buffer = new Buffer.alloc(8).fill(0); const array = new Float32Array(buffer); console.log(buffer.byteLength, array.length); // 8 8 如果 buffer...
- 11/20/2024右移操作导致正数变负数问题：对较大整数使用右移操作>>返回错误结果，并可能是负数： js4143136207 >> 0 // -151831089 原因：使用算数右移>>操作时，在操作前会将number类型转化为有符号 32 位整数，高于 32 位的位被丢弃。执行右移后，如果右移后第一位（符号位）是 1，那么返回的是负数。 方案：在 32 位整数范围内改用逻辑右移动>>>。超过 32 位用 BigInt（兼容性较差）...
- 11/15/2024Tersorflow JS 遇到的一些问题保存训练数据文件不完整 应该是写入到一半的时候强制退出程序导致的。 报错 Invalid TF_Status: 8 Error: OOM when allocating tensor with shape 训练跑了80%，好像是 GPU 内存满了，不确定没查清原因。 无法使用 GPU 加速，报错 tensorflow: Could not load dynamic library...
- 11/9/2024废话合集
- 11/2/2024npm 报错 Class extends value undefined is not a constructor or null.md更新 node-v22.11.0 后，执行 npm install 或 npm init 等几乎所有指令都报错：Class extends value undefined is not a constructor or null。 尝试修复： 卸载后重新安装 node-v22.11.0 - 无效 重启电脑 - 无效 手动删除 npm-cache - 无效 卸载 node-v22.11.0，安装...
- 10/31/2024WebAssembly（Wasm）简介WebAssembly（通常缩写为 Wasm）是一种二进制指令格式，用于表示结构化栈式的简单函数。它是为 Web 设计的一种序列化二进制文件格式，可以以接近原生性能的速度运行，并且可以与 JavaScript 进行互操作。WebAssembly 最初是为浏览器设计的，但它也可以在服务端或独立的应用程序中使用。 WebAssembly 的主要用途之一是让开发人员能够在网页上使用 C 或 C++...
- 10/21/2024VSCode 实用快捷键文件导航 Alt + LeftArrow 或近侧鼠标侧键：回到光标上一次停留的位置，可以跨文件，光标位置明显变化 Alt + RightArrow 或远测鼠标侧键：去到下一个光标位置 Ctrl + T：搜索标识符（类名等），前往查看标识符代码 Ctrl + P：搜索文件 Ctrl + Tab：切换文件 Ctrl + Shift + P：打开命令面板 代码导航 增选： Ctrl +...
- 10/17/2024Git Flow 简介
- 10/17/2024前端资料整理编码风格 综合 Google Style Guides JS 编码风格指南 Airbnb JavaScript Style Guide() { Google JavaScript Style Guide TS 编码风格指南 Google TypeScript Style Guide 标准和规范 ES6 标准：ECMA-262 TC39 提案：TC39 proposals ES...
- 10/16/2024版本号管理版本号规范 版本号规范通常指的是软件发布时所使用的编号体系，它用于标识软件的不同版本。一个良好的版本号系统可以帮助开发者、测试人员和用户清楚地了解软件的变更情况，以及不同版本之间的关系。目前最广泛接受的版本号规范是语义化版本控制（Semantic Versioning），简称 SemVer。 语义化版本控制 (SemVer) 语义化版本控制规定了版本号应采用...
- 10/12/2024强化学习中的一些概念
- 10/11/2024使用 min-width 0 解决 flex-box 子元素溢出容器问题这是一个常见问题，使用 flex 布局时，flex-box 中的某个子元素随着随容器缩放，如果子元素内元素撑开子元素，导致子元素宽度和高度过大，容器中元素被寄出容器，这一般是我们不想看到的。我们希望这个子元素仍然维持在不超出容器的最大尺寸。解决方案很简单，给这个元素设置min-width: 0;，也可以设置为其它数值。 css.parent { display: flex; border:...
- 10/10/2024Chrome 主题变化没改变 CSS prefers-color-scheme在 Chrome 浏览器中，无论设置了什么主题，页面中prefers-color-scheme检测到的仍然是系统主题配色，不受 Chrome 浏览器主题配色的影响。而其它浏览器（比如 Firefox）中，prefers-color-scheme会随浏览器主题变化。 ts// true 或 false 不受 Chrome 浏览器主题影响...
- 10/10/2024HTML tabindex 属性是如何工作的？HTML 元素设置tabindex属性后，可以触发聚焦（focus）和离焦（blur）事件，通过按下键盘上的 Tab 能够在可聚焦的元素间切换。tabindex值会改变 Tab 切换行为方式： 正值（1到32767）：按照从小到大顺序 0：默认顺序，即界面上显示的顺序 -1：无法通过 Tab切换 用 <kbd> 标签表示键盘按键 **** Ctrl + C 复制...
- 10/9/2024接口多重继承接口多重继承 类似 JS 或 TS 中 class 多重继承的写法，接口同样也能够使用多重继承，使用接口interface： tsinterface A extends B, C { foo: string; } 类似的，可以用通过type达到相似的实现： tstype A = B & C & { foo: string; };
- 10/7/2024废弃标注提示备注中将废弃的方法、属性等标记为@deprecated，编辑器会在其它引用处将其标记为废弃，这有利于团队协作和代码重构。 tsinterface Bike { readonly brand: string; /** * @deprecated 替代为 brand */ getBikeBrand(): string; } function sellBike(bike: Bike) { //...
- 10/2/2024Chrome DevTools debug 无法进入到 node_modulesChrome 120 版本增强了忽略列表，默认 Debugger 现在会默认跳过/node_modules/和/bower_components/中的脚本。可以随时在设置中停用此规则。 打开开发者工具 点击“设置” 点击左侧“忽略列表（Ignore list）” 勾掉不要的忽略项 开发者工具中的新功能 (Chrome 120)
- 9/28/2024VSCode 源码分析 —— 撤销重做
- 9/25/2024Vue3 父组件传入属性变化，子组件属性未变问题代码如下： vue<script setup lang="ts"> const { title } = defineProps<{ title: string; }>(); </script> <template> <div class="property-input">{{ title }}</div> </template> 解决：因为析构赋值，变量title相当于const title...
- 9/13/2024Iterable 和 IteratorItreable Iteratable是实现了 The iterable protocol（可迭代协议）的对象。Iteratable必需实现一个[Symbol.iterator](): Iterator<T>方法，实现了这个方法，就可以在需要迭代的地方，比如for...of、Array.from、new Set()等使用该对象。Iteratable定义如下： tsinterface...
- 8/22/2024Could not find a declaration file for module 'package name'这个问题意思是缺少包的类型声明，以下是几种解决方案。 方案一，如果包是相对热门的包，或最近更新时间近，有更大可能性已经上传类型声明包，尝试安装类型声明： shellnpm install -D @types/module-name 如果安装失败，没有对应的包，请尝试其它方案。 方案二，创建声明文件module-name.d.ts（module-name根据模块名或项目需要修改），声明缺少的模块：...
- 8/21/2024空值合并赋值操作符（?==）空值合并赋值操作符（?==） 仅当左侧的值为空（null或undefined）时，将右侧的值赋值给左侧： jslet myShoes = null myShoes ??= 'Nike' // Nike myShoes ??= 'Jordan' // Nike myShoes = null myShoes ??= 'Jordan' // Jordan 相当于： jsmyShoes ??=...
- 8/20/2024用 textContent 替代 innerText优先使用 textContent 替代 innerText textContent 性能要好的多，而 innerText 可能导致性能问题，且可能有意料之外的情况。 innerText vs. textContent
- 8/9/2024设置泛型参数的默认类型类似 JavaScript 或 TypeScript 中设置函数参数的默认值，在 TypeScript 中也可以设置泛型参数的默认类型。 tsinterface BikeStore { // 未指定泛型情况下，默认使用 NewBike 类型作为 T 的类型。 orderBike<T extends Bike = NewBike>(sku: string): T; }; interface...
- 8/2/2024私有化构造器阻止第三方示例化为阻止第三方实例化类，可以将构造器声明为私有类型（private）或保护类型（protect）。可用于创建纯静态方法和属性的类，也可以用于实现单例模式。 tsclass BikeFactory { private static _instance: BikeFactory | null = null; public static create() { if...
- 8/1/2024禁止用户打开调试工具定时器进行循环检测，进入调试环境，触发调试函数，无限递归执行debbuger。于是，一打开调试，就无限debugger。 bash// 原版 setInterval(function() { check() }, 4000); var check = function() { function doCheck(a) { if (("" + a/a)["length"] !== 1 || a %...
- 8/1/2024可选链运算符（?.）可选链运算符（?.） jsconst bike = {}; // js error const brakerBrand = bike.braker.name || 'unknow'; // ok const brakerBrand = bike.braker?.name || 'unknow'; 还能用于方法调用： js// Uncaught TypeError: bike.ride is...
- 7/27/2024抽象类创建纯静态的类TypeScript 可以很方便地用抽象类创建一个工具类，其中只含静态方法或属性，且限制了第三方实例化类（抽象类不能直接实例化）。 tsabstract class Utils { static add(a, b) { return a + b } } Utils.add(1, 2) // ok const utils = new Utils() // ts error
- 7/1/2024无符号右移操作符>>>无符号右移操作符 >>> >>>操作符能够将number和非number类型转换为无符号32位整型。 js1 >>> 0 === 1 -1 >>> 0 === 0xFFFFFFFF 1.7 >>> 0 === 1 0x100000002 >>> 0 === 2 1e21 >>> 0 === 0xDEA00000 Infinity >>> 0 === 0 NaN >>> 0 === 0...
- 6/30/2024为何 VSCode 源码值得学习？
- 4/7/2024数组的函数式方法的第二个参数数组的函数式方法的第二个参数 数组数据机构中存在一些方法，它们以函数作为参数，像map、forEach、every、find、some、filter等，它们可以传入第二个参数指定函数的执行环境。 作为参数传入的函数，如果不是箭头函数或绑定环境的情况下，其中this将指向全局变量（非严格环境）或undefined（严格环境），有时候我们希望它指向定义函数的环境，这时候就可以传入第二个参数。...
- 2/16/2024《设计中的设计》笔记
- 2/11/2024排版笔记
- 1/16/2024+ 取 Date 时间戳+ 取 Date 时间戳 js// 返回时间戳 +new Date(); // 1737048797311 加号运算符（+）在这里被用作一元运算符，它试图将紧跟其后的表达式转换成数字。当应用于 Date 对象时，这会调用 Date 对象的 .getTime() 方法，返回自1970年1月1日午夜（UTC时间）以来的毫秒数（即时间戳）。因此，+new Date(...)...
- 11/26/2023品牌食品收录食材 & 配料 崔字牌芝麻酱 红九九火锅底料 好侍咖王辣咖喱 卡利友泰国咖喱 玉梦凯里红酸汤、白酸汤 李锦记叉烧酱 石码五香 水乡阿婆肉粽 东北延边大米 好时巧克力酱 四川汉源大红袍花椒 四川二荆条干辣椒 肉类 澳洲1265厂牛排 阿根廷1920厂牛排 唐人神湖南腊肠、腊肉 广州酒家腊肠 荷美尔香肠 周庄沈万三肘子 台湾士林香肠 长沙大香肠 厦门姜母鸭 恒都原切牛肉卷 零食 ...
- 7/2/2023通过命令行安装最新版 Powershell
- 4/1/2023组件开发小技巧 npm link 链接本地库本地组件开发时，可以使用 npm link 或 yarn link 命令，链接项目库与组件库。 组件库项目在package.json中配置好name、main、version 等属性后，打包组件库，在组件库根目录输入指令： bashnpm link // or yarn link // 提示：success Registered "packageA" // 其中 packageA 为包名...
- 3/7/2023JS 中问号（?） 号其它用法??：算符左侧值为 undefined 或 null 时，返回右侧的值，否则 ?.：用作链式引用，如果左侧的值为 undefined 或 null，一般链式引用会报错，而问号+逗号的用法则不会报错，中断执行并返回 undefined 常见用法： javascriptconst client = { name: 'ZhangSan', cat: { name: 'Kitty' } } //...
- 3/6/2023内网私有库 Yarn 安装异常处理由于每次 Yarn 执行安装组件都会检查整个组件树，即使只安装一个组件，如果整个依赖树存在私有库不存在的包，都会报错 Not Found。 首先，可以通过脚本，将 node_modules 中的组件发布到私有库，这个过程很慢，可能持续数个小时，并且可能仍有部分包没有上传成功。于是，在次执行 Yarn 安装，仍可能报错 Not Found。 basherror An unexpected...
- 2/21/2023Vue2 和 Vue3 性能比较小实验
- 2/21/2023Vue3 响应式实现Vue3 响应式实现两种方式，一种是Ref，基于class的setter和getter来实现，另一种是reactive，基于Proxy类来实现。我们先来看Ref： typescript// packages/reactivity/src/ref.ts class RefImpl<T> { private _value: T private _rawValue: T public dep?:...
- 2/19/2023Vu2 Diff 算法源码解析Vue 实例中_render()函数生成虚拟 DOM VNode，然后_update()更新为真实 DOM，其中调用了__patch__方法，我们深入__patch__了解其背后 Diff 优化。 typescript// src/core/instance/lifecycle.ts Vue.prototype._update = function (vnode: VNode,...
- 2/18/2023Vue2 渲染引擎
- 2/17/2023Vue2 响应式源码解读认识Vue2响应式系统原理，我们要思考两个个问题： 当我们改变组件的一个状态时，系统会发生什么变化？ 系统是如何知道哪些部分依赖于这个状态？ 实际上，组件的渲染、计算属性、组件watch对象和Vue.&watch()方法，它们之所以能响应组件props和data的变化，都是围绕着Watcher类来实现的。...
- 1/30/2023CSS A4 打印踩坑A4 纸尺寸是 21cm x 29.7cm，CSS 中同样可以使用 cm 作为单位，将 Div 设置 A4 纸尺寸，可以在显示器上得到一个近似 A4 大小元素。 设置打印边距 css@page { margin: 2cm; } 设置打印时的样式 css@media print { .example { display: none } } 在开发者工具中启用“打印”模式。...
- 1/21/2023获取元素位置以下是获取三种元素位置的方法： javascript// 获取相对 offsetParent 位置 el.offsetTop | el.offsetLeft // 获取相对视窗（Viewport）位置 el.getClientRects()[0] // 获取相对页面的位置 function getPosition( el ) { var x = 0; var y = 0; while( el...
- 1/16/2023记录一次性能排查
- 1/16/2023CSS 粘性布局今天才发现 position 还有一个 sticky 属性。 前端开发中一个常见需求：当页面滚动某处时，让一部分内容固定在某处。以往必须要监听 scroll 事件，然后改变样式。这种方式有几个问题： 每滚动一定距离后才会触发 scroll 事件，从滚动到固定过程会出现抖动，不够平滑。 监听滚动事件消耗性能。 增加代码复杂度。 sticky 定位的 Element 有两种表现，并且要配合...
- 1/14/2023npm 报错 connect ETIMEDOUT报错信息： bashError: connect ETIMEDOUT 104.16.23.35:443 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1161:16) Emitted 'error' event on ClientRequest instance at: at...
- 1/13/2023大战流氓软件 AVG Antivirus申请了 PT 站会员，想下个 PT 客户端，就下了官网推荐的 uTorrent，没想到安装好后，电脑其卡无比，发现多了一个软件 AVG Antivirus，整个系统处于几乎奔溃状态。 强制关机无数次，有时能操作，想关掉它，系统卡到根本关闭不了，也停止不了服务，系统很快又再次奔溃，我的心同样也一直奔溃，直到后面卡到甚至系统无法进行操作了。...
- 12/20/2022在打印模式下打印指定元素的背景色黑白打印时，系统默认不打印元素背景色，对于需要保留背景色的元素，可加上下面 CSS 代码： css@media print { .classA { background-color: #333 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; } }
- 12/13/2022文字两端对齐使用 text-align-last 最后一行对齐方式 csstext-align-last: justify;
- 7/7/2022TS 报错 Cannot use import statement outside a modulepackage.json添加： json{ "type": "module" } 确认 HTML 文件中 script 标签的 type 属性为 module： html<script type="module" src="whatever.js"></script>
- 7/6/2022Grid 布局不等宽？布局中 repeat(n, 1fr) 布局可能不等宽 。1fr 表示对可用空间进行分配，但是当其中的内容超出列宽度时，为了避免内容 overflow 会自动调整列的宽度，导致列不再等宽。可以写成： cssgrid-template-columns: repeat(3, minmax(0, 1fr)); 或 cssgrid-auto-columns: minmax(0, 1fr);...
- 9/4/2021JavaScfript 键盘事件注意事项键盘常用的监听器包括keydown、keyup、keypress，在回调函数中，我们能拿到键盘事件KeyboardEvent，那么如何根据事件属性来判断用户的按键呢？...
- 9/17/2020使用 as 来避免编译器报错JavaScript 本身语法非常灵活，可是一些很方便的语法在 JavaScript 中是合法的，到了 TypeScript 中会报错。灵活地使用as可以避免报错，省去修改数据结构的麻烦事。 比如在下面代码中，bike.brake有可能是字符串，也有可能是对象。用bike.brake.name || bike.brake的方式可以很轻松的得到brakeName，但 TypeScript...
- 4/1/2019跨域解法方案有哪些？原理是什么？JSONP：利用 script 标签不会跨域的原理。需传入回调函数，通过执行回调函数，传递数据。只支持 get 方法。 iframe + 表单：利用 iframe 不会跨域的原理。使用 js 创建一个 iframe，在 iframe 中创建表单并提交。 CORS 跨域资源共享。对于跨域请求，浏览器会先发送一个 option 请求，服务器响应在头部添加：...
- 4/1/2019流行框架生命周期
- 3/20/2019ES 各版本特性一览ES5 2009：浏览器兼容性最好的版本。 ES6 2015：箭头函数() => {}、class关键字、模板字符串、析构、let/const、...rest/spread运算符(用于参数列表、数组初始化)、迭代器、协程generator、unicode、module、map/set、proxy、symbol、promise、tail calls、等等 ES7 2016：Array...
- 9/14/2018页面跳动处理由于需要加载数据，页面有一个从无数据到有数据的过程，此过程可能发生页面元素的跳动。一个元素跳到另一个位置，或元素大小发生了变化。数据是不可能立即拿到的，要做的只能是尽量减少页面跳动对用户造成的影响。可以通过以下几种方式：...