前端技术文章
-
用 Vue Router 的 scrollBehavior 区分新导航、浏览器前进后退、hash 锚点和异步内容，配置固定头部偏移并排查滚动位置恢复异常。133 收藏 -
解释 Vite 配置求值早于 .env 文件加载的原因，并用 loadEnv 正确读取模式变量、配置端口和控制客户端暴露边界。133 收藏 -
Astro middleware 可以把请求级数据写入 context.locals，再由 .astro 页面通过 Astro.locals 读取。本文用一个可复用的 TypeScript 示例说明写入、读取、类型声明、生命周期和多 middleware 顺序。132 收藏 -
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 收藏 -
Service Worker 更新后旧缓存不消失，通常是新旧 worker 共存和缓存未版本化造成的。本文用 install、activate、event.waitUntil 和受限删除名单设计可回退的版本清理方案。127 收藏 -
CSS font-palette 用于选择彩色字体的内置配色，本文说明 normal、light、dark 与 @font-palette-values 的使用边界，并给出普通字体回退和主题切换方案。127 收藏 -
网页里同时存在 dialog、抽屉和自定义浮层时，可用 CloseWatcher 统一接收 ESC 或系统返回关闭请求，再把焦点恢复、脏数据确认和旧浏览器回退放进同一条关闭链路。126 收藏 -
文章 · 前端 | 1星期前 | javascript · 异步编程 · 前端开发 · JavaScript Promise Promise.withResolvers resolve reject 异步事件
Promise.withResolvers() 返回 promise、resolve 和 reject 三个控制点。本文从一次性外部事件与连续数据批次两个场景说明如何拆开 Promise 控制器、何时重新创建，以及生命周期和兼容性边界。126 收藏 -
CSS reading-flow 可以在特定布局场景下调整 Grid 或 Flex 子项的阅读与 Tab 顺序，但它仍是实验性能力，必须优先保持合理 DOM 顺序，并用浏览器能力检测安排降级。124 收藏