前端技术文章
-
从输入事件顺序、中文输入法组合态和浏览器 undo 栈三个角度，排查表单撤销失效，并给出可验收的实现边界。186 收藏 -
用 URLPattern 把前端路由规则、命名参数和 URL 校验放在同一处，并为暂不支持该 API 的浏览器准备可靠降级。185 收藏 -
ResizeObserver 循环通常来自回调读到元素尺寸后又写回影响布局的样式。本文用最小示例说明如何定位反馈环，并通过 requestAnimationFrame、期望值守卫和拆分观察目标让布局稳定收敛。185 收藏 -
Navigation API 已在 2026 年进入 Baseline。本文用最小路由示例讲清 navigate 统一拦截、同源边界、加载失败与 History API 渐进回退。183 收藏 -
用一个受限页面的登录重定向场景，讲清 Navigation API 的 precommitHandler、handler、committed 与 finished 的执行边界，以及旧浏览器降级策略。183 收藏 -
接口本质上是一组抽象方法的声明，可以把它理解为若干方法特征的集合。这些方法本身并不提供具体实现，而是交给具体的类去完成。这样一来，第三方只需要面向这组抽象方法进行调用，至于最终由哪个具体类来执行对应逻辑，则由实现方负责。 TypeScript 接口定义如下： interface interface_181 收藏 -
用一个同源多页网站实例讲清跨文档 View Transition：双端开启、旧新快照、共享元素命名、自定义动画、减少动态效果适配与常见失效排查。181 收藏 -
解释 structuredClone 的 transfer 列表为什么会让原 ArrayBuffer 进入 detached 状态，并给出 byteLength、TypedArray 视图和生命周期管理的排查方法。178 收藏 -
IndexedDB事务会随事件循环在 active、inactive 和 finished 状态间切换。本文从 TransactionInactiveError 和写入时序异常出发，说明如何把外部异步等待移到事务前，并用短事务、请求回调与 complete/abort 处理可靠读写。176 收藏 -
Vite 的 import.meta.glob 不是运行时目录扫描。本文用路径模式、负模式和 import/query 等选项收窄构建时收集范围，并说明字面量、懒加载和 base 的边界。175 收藏 -
文章 · 前端 | 22小时前 | javascript · JavaScript Fetch AbortController 取消请求 AbortSignal.any AbortSignal.timeout
AbortSignal.any 可把用户取消、页面离开和超时合并为一个信号，任一来源中止时立即停止 fetch。本文说明首个 reason、已中止输入、错误分类、监听器清理和兼容边界。174 收藏 -
围绕主题按钮的 hover、浅色背景和边框状态，用 CSS color-mix() 派生 token，再按对比度阈值验收并保留旧浏览器 fallback。173 收藏 -
CSS 响应式规则不必二选一：依赖浏览器视口或设备偏好时用 media query，依赖组件祖先容器宽度时用 container query。本文用最小 CSS 片段和决策表说明两者的选择边界。173 收藏 -
URLPattern 可以把可选语言前缀和资源 ID 放进同一个 pathname 规则：用 {/:lang}? 让语言段连同斜杠一起可选，再用 :id(\d+) 限制并捕获数字 ID。本文给出 test()、exec() 写法、边界检查和浏览器兼容建议。173 收藏 -
文章 · 前端 | 1个月前 | 前端 · 浏览器 · javascript · css · 交互体验 · CSS过渡 dialog popover CSS @starting-style 首次显示动画
元素第一次进入页面或从 display:none 变为可见时，普通 transition 没有起始帧，popover 和 dialog 尤其容易出现硬切。CSS @starting-style 可以补上首次显示状态，但仍要处理 overlay、关闭动画、浏览器降级和 prefers-reduced-motion。171 收藏