前端技术文章
-
动态创建正则时，先用 RegExp.escape() 将搜索词、域名等外部字符串转成字面量，再拼接固定的正则语法。本文说明手写转义的误区、组合方式、兼容策略和输入边界。134 收藏 -
用一个可运行的曝光实验说明 IntersectionObserver 的 threshold 数组如何触发可见比例回调，并用 Set 做首屏曝光去重，避开重复上报和阈值误判。133 收藏 -
用 Vue Router 的 scrollBehavior 区分新导航、浏览器前进后退、hash 锚点和异步内容，配置固定头部偏移并排查滚动位置恢复异常。133 收藏 -
解释 Vite 配置求值早于 .env 文件加载的原因，并用 loadEnv 正确读取模式变量、配置端口和控制客户端暴露边界。133 收藏 -
SolidJS 的 createStore 可以用 setStore 路径语法定位嵌套对象和数组元素，本文用一个表单状态示例说明局部更新、条件批量更新以及 produce 的适用边界。130 收藏 -
Popover API 的 beforetoggle 会在浮层切换前触发。本文说明怎样只拦截开启状态，在条件不满足时调用 preventDefault，并把已经发生的状态同步交给 toggle，同时保留浏览器不支持时的降级路径。130 收藏 -
用浏览器原生 Web Crypto API 完成 AES-GCM 密钥的导入、导出、加密和解密，重点核对 Base64 编码、CryptoKey 可提取性、每次加密唯一 IV 以及 ArrayBuffer 类型边界。129 收藏 -
用原生 HTML details 的 name 属性实现互斥手风琴，说明同组规则、多个 open 的源码顺序、details[open] 样式和 toggle 事件的使用边界。129 收藏 -
文章 · 前端 | 2个月前 | 前端 · javascript · 前端动画 document.startViewTransition View Transitions API startViewTransition SPA页面切换
单页应用切换列表与详情时，可以用 document.startViewTransition 包住 DOM 更新，让浏览器接管新旧视图的过渡；同时保留 prefers-reduced-motion 和 API 能力检测，确保不支持时仍能正常切换。128 收藏 -
原生 HTML dialog 关闭后，焦点恢复、Esc 取消和按钮结果经常被混在一起。本文用一个可复现的确认框拆开 showModal、returnValue、cancel/close 事件和焦点恢复的边界。128 收藏 -
scroll-target-group 可以把自定义目录容器变成滚动标记组，再配合 :target-current 让当前章节对应的目录项自动高亮；本文给出最小 HTML/CSS 写法、结构边界和不支持浏览器的降级方案。128 收藏 -
前端上传几百 MB 文件时，真正容易卡住的不是单个请求，而是分片队列、并发窗口和失败重试互相放大。本文用浏览器 File.slice、Promise 队列和服务端分片状态，拆解从一次性上传改成可暂停、可续传方案时的架构取舍。127 收藏 -
Service Worker 更新后旧缓存不消失，通常是新旧 worker 共存和缓存未版本化造成的。本文用 install、activate、event.waitUntil 和受限删除名单设计可回退的版本清理方案。127 收藏 -
网页里同时存在 dialog、抽屉和自定义浮层时，可用 CloseWatcher 统一接收 ESC 或系统返回关闭请求，再把焦点恢复、脏数据确认和旧浏览器回退放进同一条关闭链路。126 收藏 -
文章 · 前端 | 2天前 | javascript · 异步编程 · 前端开发 · JavaScript Promise Promise.withResolvers resolve reject 异步事件
Promise.withResolvers() 返回 promise、resolve 和 reject 三个控制点。本文从一次性外部事件与连续数据批次两个场景说明如何拆开 Promise 控制器、何时重新创建，以及生命周期和兼容性边界。126 收藏