前端技术文章
-
Fetch API 的 Response.json() 失败后不能直接再读同一个响应体。本文用 text() 与 clone() 解释 bodyUsed 边界，并给出保留原始文本、记录状态码和控制日志内容的实用写法。339 收藏 -
用 useActionState 让 Server Action 在校验失败时同时返回字段值和错误信息，避免表单回显为空，并区分预期错误与异常。308 收藏 -
IntersectionObserver 回调频繁触发不等于请求必须重复。本文从首次 observe、threshold 穿越和 entries 批量回调说起，用元素级 loading/done 状态、rootMargin 与 unobserve 设计稳定的懒加载去重方案。154 收藏 -
Service Worker 更新后旧缓存不消失，通常是新旧 worker 共存和缓存未版本化造成的。本文用 install、activate、event.waitUntil 和受限删除名单设计可回退的版本清理方案。127 收藏 -
Vue computed getter 不应修改自己读取的响应式依赖，否则会把派生值和源状态连成循环。本文用最小示例解释回写原因，并给出事件处理器、纯 computed、watch 和 writable computed 的分工边界。352 收藏 -
React Strict Mode 在开发环境会额外执行一次 useEffect 的 setup 和 cleanup，用来检查副作用是否可重复同步。本文区分开发与生产边界，并给出订阅、定时器和请求的清理写法。381 收藏 -
排查 Vite 生产构建仍读取旧环境变量的问题，解释 --mode、NODE_ENV、.env 文件和进程环境变量的优先级，并给出配置阶段与构建阶段的核对方法。204 收藏 -
图片加载完成前先用 aspect-ratio 建立稳定占位，再配合 width、height、object-fit 和兼容降级，减少卡片内容被推移造成的布局跳动。282 收藏 -
WebSocket close 事件出现 1006 时，浏览器并不是收到了服务端发送的 1006。本文用 CloseEvent 字段、readyState、Network 记录和服务端日志对照，建立一套可执行的异常断链排查方法。286 收藏 -
JavaScript 请求超时和主动取消不是同一件事：本文对比 AbortSignal.timeout、AbortController 与 AbortSignal.any，给出错误区分、signal 一次性使用和旧浏览器定时器清理的实战写法。263 收藏 -
CSS subgrid 能让嵌套卡片在指定方向沿用父网格轨道，解决标题、正文和操作区逐卡片漂移的问题。本文说明列与行的选择、gap 继承、命名线和隐式轨道边界。238 收藏 -
Fetch 使用 ReadableStream 作为请求体时，RequestInit 必须显式写 duplex: half。本文从流的结束、取消、错误处理和浏览器兼容四个方面给出可落地的上传写法。168 收藏 -
structuredClone 并不是任何对象都能复制。本文用最小示例说明函数、DOM 节点、Symbol、WeakMap 等失败边界，并解释 ArrayBuffer 的 transfer 转移、原型链和属性描述符变化。377 收藏 -
CSS container query 让卡片根据父容器宽度切换单列与双列布局，本文从 container-type、@container、命名容器、cqi 和降级方案讲清可复用组件的响应式边界。349 收藏 -
Worker.terminate() 会立即停止 Worker，未完成计算和未发出的消息不会自动补发。本文用请求编号、确认消息和协作取消协议处理销毁边界，并说明 structured clone 与 transfer list 的对象所有权差异。199 收藏