前端技术文章
-
TypeScript 项目遇到 structuredClone 类型缺失时，按浏览器与 Node.js 宿主分别检查 target、lib、types 和 noLib，再区分编译期声明、运行时支持与 DataCloneError 数据边界。310 收藏 -
用 Fetch 读取 Response.body 的 ReadableStream，按块更新页面，并处理 UTF-8 中文跨块、HTTP 异常、空 body 和取消读取。304 收藏 -
CSS container query 不生效时，先确认父元素设置了 container-type，再检查查询命中的容器、宽度条件和浏览器支持；文中给出卡片布局的最小写法与降级方案。291 收藏 -
动态 import 失败时，用统一的 catch 和 finally 切换到可重试的降级界面，并区分网络、路径和模块执行问题。282 收藏 -
TypeScript satisfies 不需要独立配置项。本文从版本与构建解析器开始，说明如何约束配置对象并保留具体推断，再用最小 tsc 检查定位常见报错。254 收藏 -
文章 · 前端 | 2天前 | javascript · web components · custom elements · 前端排错 · Web Components Custom Elements attributeChangedCallback observedAttributes
attributeChangedCallback 不触发时，先检查 observedAttributes 是否监听了正确的 attribute，再确认代码改的是 DOM attribute 而不是只改 JavaScript property。本文用最小示例说明属性反射、初始值和回调重渲染的边界。233 收藏 -
Service Worker 更新失败通常不是简单清空浏览器缓存，而是脚本版本、install 预缓存、waiting 状态和 fetch 策略没有对齐。本文用一个稳定的 sw.js 与版本化缓存示例，说明如何配置更新、控制接管时机，并用 DevTools 定位旧页面来源。222 收藏 -
Popover API 的 auto 状态会在点击外部时自动关闭。本文用独立 draft 状态保存表单输入，在 toggle 打开时恢复，并把清理动作限定在提交成功或明确取消。220 收藏 -
文章 · 前端 | 2天前 | websocket · 断线重连 · 前端排障 · 指数退避 · JavaScript异步 · WebSocket断线重连 WebSocket重连定时器 JavaScript指数退避 前端实时连接
WebSocket 断线重连时，分别在 error 和 close 中 setTimeout 很容易形成多个重连链。本文用单一调度器、指数退避和 stop 清理解决定时器叠加问题。205 收藏 -
ResizeObserver 循环通常来自回调读到元素尺寸后又写回影响布局的样式。本文用最小示例说明如何定位反馈环，并通过 requestAnimationFrame、期望值守卫和拆分观察目标让布局稳定收敛。185 收藏 -
Vite 的 import.meta.glob 不是运行时目录扫描。本文用路径模式、负模式和 import/query 等选项收窄构建时收集范围，并说明字面量、懒加载和 base 的边界。175 收藏 -
URLPattern 可以把可选语言前缀和资源 ID 放进同一个 pathname 规则：用 {/:lang}? 让语言段连同斜杠一起可选，再用 :id(\d+) 限制并捕获数字 ID。本文给出 test()、exec() 写法、边界检查和浏览器兼容建议。173 收藏 -
Array.toSorted 适合在不改动原数组的前提下完成排序，但数字、对象和旧运行环境都需要额外配置。本文从 sort 与 toSorted 的差异开始，给出比较函数、兼容写法和回归检查清单。169 收藏 -
讲清 Web Worker 使用 Transferable 传回 ArrayBuffer 结果的写法，区分结构化克隆、所有权转移与共享内存，并说明 detach、TypedArray 和生命周期边界。162 收藏 -
讲清 IntersectionObserver 的 root、null、祖先关系、rootMargin 与 threshold，并用 rootBounds 和检查表定位滚动容器中不触发的问题。144 收藏