前端技术文章
-
URLPattern 适合把前端路由匹配从手写字符串切分收敛到可校验规则，但命名参数、相对 URL 和浏览器缺失都要单独处理。本文用一个商品详情路由拆解匹配判断、参数读取、baseURL 与降级边界。102 收藏 -
浏览器回退后表单内容仍然保留，通常不是 localStorage 写错，而是页面命中了 bfcache。本文用 pageshow、pagehide 和 persisted 判断真实生命周期，再给出需要清空状态时的可靠处理方式。170 收藏 -
用 URLPattern 把前端路由规则、命名参数和 URL 校验放在同一处，并为暂不支持该 API 的浏览器准备可靠降级。185 收藏 -
用 structuredClone 复制前端表单草稿时，先分清深拷贝、不可克隆值和 transfer 转移语义，避免原缓冲区被置空或提交时丢失字段。449 收藏 -
前端表单重复提交不能只靠按钮 disabled 解决：浏览器事件、网络重试和用户回退会分别制造重复请求。本文用原生 JavaScript 拆开提交锁、请求幂等键、失败恢复和服务端去重的配合边界。491 收藏 -
从 Node.js ESM 的 import.meta.dirname、import.meta.filename 与 import.meta.url 出发，说明本地文件定位、旧版本兼容、URL 路径和构建发布中的稳妥写法。384 收藏 -
前端已经发布新代码，浏览器却仍加载旧 JS，通常不是缓存策略一个开关的问题，而是入口 HTML、资源哈希和上传顺序没有形成闭环。本文用一个可复查的发布流程拆开判断。421 收藏 -
Web Animations API 适合控制可暂停、可反向和可取消的交互动画。本文用一个可复用的面板动画说明 currentTime、playbackRate、reverse() 与 cancel() 的边界，并给出状态核对和降级写法。290 收藏 -
CSS Masonry 仍处于早期开发阶段，实际项目应先用稳定的 CSS Grid 或多列方案兜底，再逐步验证列数、图片尺寸、阅读顺序和浏览器支持。本文用一组可回退的卡片布局说明列高差、图片加载和无障碍顺序的处理边界。424 收藏 -
文章 · 前端 | 2个月前 | javascript · 异步编程 · 浏览器API · 异步资源清理 Promise.withResolvers JavaScript Promise 外部resolve
Promise.withResolvers 把 Promise 的 resolve 和 reject 暴露出来，适合事件桥接、超时控制和一次性完成的异步流程。本文用最小示例拆解重复完成、异常传播、取消与资源清理边界。433 收藏 -
scheduler.postTask 可以把前端任务按 user-blocking、user-visible 和 background 分层，并通过 AbortController 取消尚未执行的工作。本文从交互卡顿场景出发，给出最小用法、任务取消、兼容降级和验收边界。151 收藏 -
fetch 请求被取消时，AbortController.abort(reason) 可以把用户主动切换、超时和页面离开区分开。本文用一个可运行的请求封装说明 reason 的传递、catch 判断和兼容边界。246 收藏 -
white-space-collapse 把空白折叠从 white-space 中拆出来，适合处理用户输入、代码片段和多行说明。本文用最小示例解释 collapse、preserve、preserve-breaks、preserve-spaces、break-spaces 的差异，并给出旧浏览器降级与验收方法。430 收藏 -
Web Worker 处理大数组或文件切片时，结构化克隆会复制数据，Transferable 则转移底层内存。本文用 ArrayBuffer 实验说明两者的边界、发送后原对象为何被清空，以及如何用生命周期和回收检查避免主线程内存持续上涨。273 收藏 -
从触底加载重复请求的现场出发，拆开 rootMargin、哨兵节点和请求状态之间的关系，给出可验收的去重实现与异常处理边界。462 收藏