前端技术文章
-
本文介绍如何在使用 Zod 搭配 Validator.js 进行表单验证时，正确支持可选字段的空字符串（""）输入，避免 .refine 校验因 isAlpha("") 返回 false 而意外拒绝合法空值。 本文介绍如何在使用 Zod 搭配 Validator.js 进行表单验证时，正确支持可选字352 收藏 -
讲清 Fetch 配合 AbortController 传递 abort reason 的写法，区分用户取消、超时与网络异常，并说明组合信号、兼容处理和 signal 一次性边界。351 收藏 -
拖拽排序跳回原位，通常不是 CSS 位置算错，而是指针事件丢失、视觉顺序没有同步 DOM 顺序，或键盘回退路径没有共用同一套排序逻辑。本文用原生 Pointer Events 拆开定位、提交和验收边界。351 收藏 -
通过稳定的 id、aria-describedby 和 aria-invalid 关联表单帮助文本与错误提示，说明动态校验、可见状态和复杂内容边界。349 收藏 -
CSS container query 让卡片根据父容器宽度切换单列与双列布局，本文从 container-type、@container、命名容器、cqi 和降级方案讲清可复用组件的响应式边界。349 收藏 -
异步函数（如 async 声明的 API 调用）必然返回 Promise，不能直接获取解析后的值；需通过 await（在 async 上下文中）或 .then()（在同步上下文中）获取最终结果。 异步函数（如 `async` 声明的 API 调用）必然返回 Promise，不能直接获取解析后的值；需349 收藏 -
用 CSS Anchor Positioning 给提示气泡和筛选浮层建立稳定锚点，结合 position-try 回退与 position-visibility 处理视口边缘、滚动和旧浏览器兼容。349 收藏 -
Web Locks API 能让同源标签页和 Worker 围绕同一锁名协调任务，但默认排队只避免并发，不会自动消除顺序重复。本文讲清 ifAvailable、锁内完成标记、长期持锁和服务端幂等的组合方式。348 收藏 -
CSS Flex 子元素撑破容器，最常见原因不是父容器宽度失效，而是 flex 子项默认的自动最小尺寸被长文本、不可断 URL 或显式宽度撑住。本文从 min-width: 0 入手，配合换行和滚动边界，整理一套可复用的排查方法。348 收藏 -
Promise.all 失败只代表聚合结果不可用，不会自动取消其他请求。本文用 AbortController、共享 AbortSignal 和请求代次，处理并发请求失败、切页、重试与迟到响应。347 收藏 -
通过 Ja vaScript 全局禁用右键菜单、文本选中、复制粘贴等操作，但为 和 等可编辑元素显式启用事件，实现防内容盗取与良好表单体验的平衡。 通过 Ja vaScript 全局禁用右键菜单、文本选中、复制粘贴等操作，但为 `` 和 `` 等可编辑元素显式启用事件，实现防内容盗取与良好表单体验的347 收藏 -
从一个面板尺寸越改越抖的实际场景出发，定位 ResizeObserver 反复触发的回路，区分布局读取与写入边界，并用稳定尺寸和帧内合并完成验证。346 收藏 -
文章 · 前端 | 1个月前 | 前端 · javascript · 登录态 · 浏览器API · Cookie Store API cookieStore 登录态变化 CookieChangeEvent 前端降级
页面登录态变化后，多个组件经常要各自轮询 Cookie 或等待下一次刷新。Cookie Store API 提供异步读取和 change 事件，可以把登录失效、退出登录与界面刷新串成一条可复查的链路；本文同时说明 HTTPS、替换同名 Cookie 和旧浏览器降级边界。346 收藏 -
fetchpriority 是浏览器的图片获取优先级提示。本文说明如何识别首屏关键图片，只给 LCP 候选设置 high，并处理 lazy、CSS 背景、preload、srcset 与验证边界。343 收藏 -
Vite 路由使用动态 import 后首屏仍然偏大，通常不是分包失效，而是入口静态依赖、共享依赖或 CSS 仍被首屏带入。本文用构建 manifest 和模块边界逐层定位原因。343 收藏