前端技术文章
-
Nuxt 3 废弃了 Vue 2 的 this.$refs，但可通过 getCurrentInstance().refs 在 onMounted 中安全访问所有已注册的模板 ref，实现类似 Vue 2 的批量操作逻辑。 Nuxt 3 废弃了 Vue 2 的 `this.$refs`，但可通过 `g288 收藏 -
FormDataEvent 会在表单数据条目构造完成后暴露同一个 FormData 对象。本文用一个原生 JavaScript 小项目演示如何统一补充、替换和删除字段，并处理 submitter、成功控件、fetch multipart 边界与取消提交等关键边界。288 收藏 -
WebSocket close 事件出现 1006 时，浏览器并不是收到了服务端发送的 1006。本文用 CloseEvent 字段、readyState、Network 记录和服务端日志对照，建立一套可执行的异常断链排查方法。286 收藏 -
React useOptimistic 的回滚不靠手工恢复临时副本，而是依赖权威状态只在成功后更新；失败时 Action 结束，界面回到当前权威值。并发列表更新应使用纯 reducer、稳定 ID 和逐项 pending 标记，避免旧闭包覆盖新数据。286 收藏 -
CSS 可用 font-synthesis-weight:none 单独禁止伪粗体，也可用 font-synthesis:none 整体关闭合成。本文说明真实字重资源、继承和简写覆盖，并给出双字重配置及兼容处理示例。286 收藏 -
本文介绍如何基于两个嵌套对象数组（系统全量模块与用户可访问模块），动态生成带布尔标记（1/0）的权限映射结构，确保未在用户模块中声明的动作自动标记为 0。 本文介绍如何基于两个嵌套对象数组（系统全量模块与用户可访问模块），动态生成带布尔标记（1/0）的权限映射结构，确保未在用户模块中声明的动作自动标285 收藏 -
文章 · 前端 | 2个月前 | 前端 · javascript · 性能排查 · 浏览器API · requestAnimationFrame ResizeObserver ResizeObserver loop completed with undelivered notifications 前端尺寸监听
ResizeObserver 回调里再次改动被观察元素尺寸，可能触发循环通知。本文用最小示例还原报错，拆开 contentRect、requestAnimationFrame 和 lastWidth 的关系，给出可验证的修复边界。285 收藏 -
Web Locks 的 query() 不会抢锁或释放锁，只返回当前 origin 的状态快照。本文用 held、pending、name、mode 和 clientId 拆解查询结果，并给出安全上下文、异常处理和排障记录方法。284 收藏 -
view-timeline-axis 决定视图进度时间线沿哪个滚动轴推进。本文区分 block、inline、x、y 的适用场景，说明 subject、滚动容器和溢出条件，并给出不支持时的渐进增强写法。284 收藏 -
解释localStorage只保存字符串的原因，通过JSON编码、版本字段和受控字段恢复对象，区分键缺失、损坏、访问与写入失败，并提供单键重置方案。283 收藏 -
图片加载完成前先用 aspect-ratio 建立稳定占位，再配合 width、height、object-fit 和兼容降级，减少卡片内容被推移造成的布局跳动。282 收藏 -
动态 import 失败时，用统一的 catch 和 finally 切换到可重试的降级界面，并区分网络、路径和模块执行问题。282 收藏 -
CSS position-area 用锚点周围的 3×3 区域放置绝对定位浮层。本文从 anchor-name 和 position-anchor 的绑定开始，比较物理值、逻辑值、span 值与 anchor() 的边界，并给出菜单、提示框等场景的可迁移写法。282 收藏 -
图片懒加载并不等于把 src 延后设置。若没有提前占住尺寸，图片加载完成时会推动正文，造成首屏抖动。本文用 IntersectionObserver、aspect-ratio 和 loading 状态组合出一套可复查的懒加载写法，并说明可见性回收与取消观察的边界。281 收藏 -
用 XState v5 的表单提交场景说明 guard 如何决定 transition、action 如何更新 context 或安排副作用，并给出异步 actor 与版本边界的处理方式。281 收藏