前端技术文章
-
React Suspense 的 fallback 只负责等待态，数据 Promise reject 后要由 Error Boundary 展示失败态。本文用一个可重试的 Promise 状态说明如何接入 Try again、resetKeys 和缓存边界。379 收藏 -
CSS sticky 不生效时，重点检查 top 偏移、父容器 overflow、实际滚动祖先和可用高度差，按清单定位错误参照并修复。161 收藏 -
CSS Flex 子元素撑破容器，最常见原因不是父容器宽度失效，而是 flex 子项默认的自动最小尺寸被长文本、不可断 URL 或显式宽度撑住。本文从 min-width: 0 入手，配合换行和滚动边界，整理一套可复用的排查方法。348 收藏 -
FormData 上传文件时不要手动设置 multipart/form-data 的 Content-Type，浏览器需要根据请求体自动生成 boundary。本文用 fetch 示例说明正确写法，并给出从请求头、字段名和文件对象排查上传失败的方法。353 收藏 -
前端用 fetch 下载文件时，读取 Content-Disposition 中的 filename* 或 filename，再结合 Blob URL 和 a.download 保留后端文件名；跨域场景还要暴露响应头。231 收藏 -
fetch 遇到 404 不进入 catch，是因为请求已经拿到了 HTTP 响应。本文用 response.ok、status 和 JSON 解析示例说明正确的错误处理方式。481 收藏 -
用 TypeScript 区分联合建模请求状态，让 loading、success、error 的字段访问安全，并用 never 检查新增状态是否遗漏。292 收藏 -
TypeScript satisfies 用于校验对象是否符合类型契约并保留精确推断，类型断言则表达调用者已掌握的额外事实，二者在配置对象、DOM 和外部数据边界上的用法不同。293 收藏 -
React 定时器越跑越快，通常是 useEffect 重复创建 setInterval 却没有对称清理。本文用生命周期、依赖数组和 Strict Mode 说明 clearInterval 的正确写法。389 收藏 -
React 列表删除一项后输入框内容错位，通常是使用数组下标作为 key，让组件状态按位置复用。本文从可编辑购物清单出发，说明如何用创建时生成的稳定 id 绑定列表项、更新删除回调和输入状态。215 收藏 -
Vue 修改响应式数据后，DOM 不会立刻同步完成。本文用 nextTick 和模板 ref 说明如何在更新后读取高度，并区分图片、字体等后续布局变化。171 收藏 -
Vue computed 默认只有 getter，直接赋值会触发只读警告。本文用源状态、派生值和 writable computed 三个层次说明正确改法，并给出回滚与响应式检查清单。311 收藏 -
Vue watch 触发搜索请求时，旧请求可能晚于新请求返回。本文用 onCleanup 或 onWatcherCleanup 取消过期请求，再用请求序号保护状态写回，解决快速输入造成的结果错乱。388 收藏 -
Interop 2026 将媒体伪类列为重点互操作方向。本文用一个音频卡片示例说明 :playing、:paused、:buffering、:stalled 与 :muted 的边界，并给出特性查询降级和可访问性检查方法。384 收藏 -
文章 · 前端 | 3星期前 | 前端 · javascript · Web Components CustomElementRegistry Scoped Custom Element Registries ShadowRoot
Scoped Custom Element Registries 为 Web Components 提供独立命名空间，让不同组件库或微前端可以保留同名标签。本文从全局注册冲突出发，说明 ShadowRoot、元素子树和渐进降级的边界。150 收藏