前端技术文章
-
通过自定义属性、命名容器和 @container style() 让组件响应父级状态，并说明默认回退、继承、容器选择及普通属性查询的支持边界。120 收藏 -
闭合阴影根不必牺牲焦点委托。用声明式模板保留 delegatesFocus，区分宿主聚焦、Tab 顺序与外部观察，并避开布尔属性、重复建根和字符串注入的常见误区。120 收藏 -
文章 · 前端 | 1个月前 | 前端 · css · CSS scroll-driven animations animation-timeline scroll-timeline view-timeline animation-range
用 CSS scroll-driven animations 把动画绑定到滚动位置或元素进入视口的进度，拆清 scroll timeline、view timeline、animation-range 的关系，并给出 prefers-reduced-motion 与 @supports 降级方案。119 收藏 -
在 React 里，如果用 useCallback 包住一个依赖组件 state 的事件处理函数，却没有把这个 state 一并写进依赖数组，问题就来了：闭包会一直拿着初始的 state 值不放，结果看起来就像状态更新只成功了一次。解决办法其实很直接，把函数真正依赖的 state 变量，比如 dar116 收藏 -
本文介绍多种可靠方式判断字符串首字符是否为数字（0–9），重点解决正则误判、空字符串边界问题，并提供简洁高效的替代方案。 本文介绍多种可靠方式判断字符串首字符是否为数字（0–9），重点解决正则误判、空字符串边界问题，并提供简洁高效的替代方案。在 Ja vaScript 里，如果要判断一个字符串（比如116 收藏 -
Vite 8.1 已使用 Rolldown 与 Oxc。本文比较直接升级、rolldown-vite 过渡和兼容层兜底，说明如何从配置警告与插件挂载位置判断迁移风险。112 收藏 -
本文用搜索列表案例拆分 React 中必须立即响应的交互状态与可中断的后台渲染，说明 useTransition、isPending、受控输入、异步更新和 Suspense 的正确边界。112 收藏 -
中文搜索框不能靠空格切词。本文用 JavaScript Intl.Segmenter 的 word 粒度保留 segment、index 与 isWordLike，再把字符位置映射到高亮范围，处理中文、英文和表情符号的边界。111 收藏 -
用 CSS :has(> ...) 让卡片只响应直接子元素的状态，理解后代匹配与直接子代匹配的差异，并处理多个状态、优先级和组件边界。111 收藏 -
scheduler.yield 能把主线程长任务切成多个 continuation，并在 postTask 内继承优先级。本文给出时间预算切片、取消处理与兼容降级的完整写法。110 收藏 -
JavaScript Iterator Helpers 可以把 filter、map、take 等操作组合成惰性处理链。本文用可运行配方解释何时取值、怎样提前停止，以及一次性消费与兼容性边界。110 收藏 -
本文详解 React 中因 useCallback 依赖数组遗漏状态变量，导致 useState 切换函数仅执行一次的问题，并提供正确写法、原理分析与最佳实践。 本文详解 React 中因 `useCallback` 依赖数组遗漏状态变量，导致 `useState` 切换函数仅执行一次的问题，并提供108 收藏 -
本文讲解如何通过事件委托（Event Delegation）为动态添加的 .checkbox 元素正确绑定点击事件，解决直接遍历 querySelectorAll 导致新元素无响应的问题。 本文讲解如何通过事件委托（Event Delegation）为动态添加的 `.checkbox` 元素正确绑定108 收藏 -
用 AbortController 和 AbortSignal.timeout 为 Fetch 设置超时，区分 TimeoutError、AbortError、HTTP 状态和普通网络错误，并给出兼容回退写法。108 收藏 -
用 PerformanceResourceTiming 的域名解析、连接和安全连接时间戳拆分 DNS、TCP、TLS 耗时，并处理跨域受限、缓存命中与连接复用导致的零值。108 收藏