前端技术文章
-
文章 · 前端 | 1个月前 | 前端 · javascript · 可访问性 · 表单校验 Web Components ElementInternals Custom Elements Shadow DOM
自定义元素放进原生 form 后，ElementInternals 可以让组件参与表单校验、提交和无障碍语义。本文用一个邮箱字段拆开 setValidity、表单状态同步和回退边界。205 收藏 -
WebSocket 断线重连时，分别在 error 和 close 中 setTimeout 很容易形成多个重连链。本文用单一调度器、指数退避和 stop 清理解决定时器叠加问题。205 收藏 -
排查 Vite 生产构建仍读取旧环境变量的问题，解释 --mode、NODE_ENV、.env 文件和进程环境变量的优先级，并给出配置阶段与构建阶段的核对方法。204 收藏 -
协变与逆变是 TypeScript 类型系统中的重要概念，理解它们有助于编写类型安全的代码。 它们描述了泛型类型在父子类型关系中的行为。 协变与逆变概念 协变 (Covariant) 输出类型：安全 Dog → Animal Provider → Provider 不变 (Invariant) 输入202 收藏 -
本文介绍如何通过条件类型让异步函数根据是否传入处理器函数，自动推导出 string[] 或自定义泛型 T 的返回类型，避免 unknown 问题，并支持 T 默认化。 本文介绍如何通过条件类型让异步函数根据是否传入处理器函数，自动推导出 `string[]` 或自定义泛型 `T` 的返回类型，避免200 收藏 -
前端表单重复提交通常不是单纯把按钮 disabled 就能解决。本文从 submit 事件、form.submit()、requestSubmit() 和原生校验的差异出发，给出一次提交门闩、异步恢复与键盘回车场景的可验证写法。200 收藏 -
Worker.terminate() 会立即停止 Worker，未完成计算和未发出的消息不会自动补发。本文用请求编号、确认消息和协作取消协议处理销毁边界，并说明 structured clone 与 transfer list 的对象所有权差异。199 收藏 -
BroadcastChannel 关闭标签页后收不到消息，通常不是浏览器漏发，而是旧实例已离开通道且 API 不保存历史。本文用生命周期封装、主动同步和状态快照给出可落地的处理方式。199 收藏 -
用 Temporal.PlainDate 处理生日、账期和只关心日历日期的业务值，避开 Date 的时区偏移，覆盖 from、compare、until、toString 与旧浏览器降级边界。198 收藏 -
文章 · 前端 | 2个月前 | 前端 · javascript · css · JavaScript 浏览器兼容 View Transition API document.startViewTransition 前端筛选列表 SPA过渡
从商品筛选列表切换时的突兀重绘切入，使用 document.startViewTransition 包住 DOM 更新，给出筛选状态、动效样式、浏览器回退和可访问性检查，避免为了动效破坏点击与焦点。196 收藏 -
TypeScript 面试：接口数据为什么别急着写成 any？有人被问到 any 和 unknown 的区别，会先讲「一个更安全」。这句话没错，但太像背定义了。更直观的说法，不妨直接看一段接口代码：服务端昨天把 name 改成了 displayName，但前端并没有收到通知。结果到了页面渲染时，代码196 收藏 -
用一个可复现的无限列表场景，拆解 IntersectionObserver 的 rootMargin、threshold、unobserve 与 disconnect，避免滚动监听重复触发和组件卸载后的残留回调。196 收藏 -
从 envPrefix、envDir、--mode、MODE 与 NODE_ENV 的区别入手，定位 Vite 环境变量不生效、读到旧值或误用生产配置的原因，并给出安全验证清单。196 收藏 -
本文详解如何通过原生 Ja vaScript 安全、高效地动态创建并插入 HTML 元素，涵盖 innerHTML 的正确用法、事件委托实践、DOM 插入时机控制及常见陷阱规避。 本文详解如何通过原生 Ja vaScript 安全、高效地动态创建并插入 HTML 元素，涵盖 `innerHTML`191 收藏 -
用户连续点击提交按钮，常见结果是重复请求、重复订单或失败后无法恢复。本文从 HTML formdata 事件切入，拆开提交锁、请求取消、失败恢复和键盘回车的边界，给出可核对的前端实现。190 收藏