前端技术文章
-
Vue 修改响应式数据后，DOM 不会立刻同步完成。本文用 nextTick 和模板 ref 说明如何在更新后读取高度，并区分图片、字体等后续布局变化。171 收藏 -
WebSocket 客户端不能只在 close 事件里 new 一个连接。本文从连接代次、指数退避、messageId/seq 去重和待发送队列出发，给出一套能控制重复副作用的浏览器端设计，并说明客户端去重与服务端幂等的边界。171 收藏 -
浏览器回退后表单内容仍然保留，通常不是 localStorage 写错，而是页面命中了 bfcache。本文用 pageshow、pagehide 和 persisted 判断真实生命周期，再给出需要清空状态时的可靠处理方式。170 收藏 -
Array.toSorted 适合在不改动原数组的前提下完成排序，但数字、对象和旧运行环境都需要额外配置。本文从 sort 与 toSorted 的差异开始，给出比较函数、兼容写法和回归检查清单。169 收藏 -
我们知道数组中元素的数据类型都一般是相同的（any[] 类型的数组可以不同），如果存储的元素数据类型不同，则需要使用元组。 在 TypeScript 里，元组（Tuple）可以理解为一种“更有边界感”的数组。它和普通数组最大的区别就在于：元组允许把不同类型的值放在同一个数组里，而且每个元素不仅类型是168 收藏 -
Fetch 调用 AbortController 取消后，catch 和 finally 仍会按 Promise 规则执行；真正需要防止的是旧请求在 await 后继续更新业务状态。本文用 signal.aborted、请求代次和 finally 清理讲清排查与修复方法。168 收藏 -
Fetch 使用 ReadableStream 作为请求体时，RequestInit 必须显式写 duplex: half。本文从流的结束、取消、错误处理和浏览器兼容四个方面给出可落地的上传写法。168 收藏 -
Navigation API 通过 navigate 与 intercept 统一接管单页应用导航，本文说明拦截边界、异步渲染、历史状态、错误处理和 History API 降级方案。167 收藏 -
文章 · 前端 | 1个月前 | html · 前端 · javascript · 浏览器API · dialog close cancel HTMLDialogElement requestClose
用原生 dialog 做确认弹窗时，requestClose() 能把 Esc、关闭按钮和脚本关闭统一到 cancel 与 close 两个事件，并保留 returnValue 的结果语义。163 收藏 -
讲清 Web Worker 使用 Transferable 传回 ArrayBuffer 结果的写法，区分结构化克隆、所有权转移与共享内存，并说明 detach、TypedArray 和生命周期边界。162 收藏 -
CSS sticky 不生效时，重点检查 top 偏移、父容器 overflow、实际滚动祖先和可用高度差，按清单定位错误参照并修复。161 收藏 -
CSS shape() 可以把响应式卡片的裁切路径写成相对尺寸，让 clip-path 在容器变化时保持比例；本文用真实 CSS 片段拆开坐标起点、line/curve 命令、百分比伸缩和 @supports 回退验收。160 收藏 -
用组件场景区分 CSS @container 的 style query 与 size query，说明 container-type、自定义属性、组合条件和常见误用。158 收藏 -
本文介绍如何通过原生 Ja vaScript 实现：当用户从嵌套的 子菜单中选择任意选项时，该选项自动移至 下拉框顶部并设为当前选中值，提升用户体验与交互一致性。 本文介绍如何通过原生 Ja vaScript 实现：当用户从嵌套的 `` 子菜单中选择任意选项时，该选项自动移至 `` 下拉框顶部并设为156 收藏 -
CSS corner-shape 可以在 border-radius 的基础上实现 bevel、scoop、notch 和 squircle 等异形圆角，但目前仍需配合 @supports 和普通圆角降级。本文用卡片组件说明写法、参数边界与验收方法。155 收藏