前端技术文章
-
用一个带校验状态、禁用状态和兄弟提示的表单例子，拆清 CSS :has() 的相对选择器边界、特异性影响与可维护写法。485 收藏 -
文章 · 前端 | 3天前 | 前端 · javascript · 登录态 · 浏览器API · Cookie Store API cookieStore 登录态变化 CookieChangeEvent 前端降级
页面登录态变化后，多个组件经常要各自轮询 Cookie 或等待下一次刷新。Cookie Store API 提供异步读取和 change 事件，可以把登录失效、退出登录与界面刷新串成一条可复查的链路；本文同时说明 HTTPS、替换同名 Cookie 和旧浏览器降级边界。346 收藏 -
用一个可复用的卡片组件说明 CSS container query 与 ResizeObserver 的分工：样式交给 CSS，数据计算交给观察器，并通过 requestAnimationFrame 合并重复通知。488 收藏 -
图片懒加载并不等于把 src 延后设置。若没有提前占住尺寸，图片加载完成时会推动正文，造成首屏抖动。本文用 IntersectionObserver、aspect-ratio 和 loading 状态组合出一套可复查的懒加载写法，并说明可见性回收与取消观察的边界。281 收藏 -
URLPattern 适合把前端路由匹配从手写字符串切分收敛到可校验规则，但命名参数、相对 URL 和浏览器缺失都要单独处理。本文用一个商品详情路由拆解匹配判断、参数读取、baseURL 与降级边界。102 收藏 -
浏览器回退后表单内容仍然保留，通常不是 localStorage 写错，而是页面命中了 bfcache。本文用 pageshow、pagehide 和 persisted 判断真实生命周期，再给出需要清空状态时的可靠处理方式。170 收藏 -
用 URLPattern 把前端路由规则、命名参数和 URL 校验放在同一处，并为暂不支持该 API 的浏览器准备可靠降级。185 收藏 -
用 structuredClone 复制前端表单草稿时，先分清深拷贝、不可克隆值和 transfer 转移语义，避免原缓冲区被置空或提交时丢失字段。449 收藏 -
前端表单重复提交不能只靠按钮 disabled 解决：浏览器事件、网络重试和用户回退会分别制造重复请求。本文用原生 JavaScript 拆开提交锁、请求幂等键、失败恢复和服务端去重的配合边界。491 收藏 -
文章 · 前端 | 4天前 | Node.js · javascript · esm · 前端工程化 · JavaScript Node.js ESM 前端构建 import.meta.dirname
从 Node.js ESM 的 import.meta.dirname、import.meta.filename 与 import.meta.url 出发，说明本地文件定位、旧版本兼容、URL 路径和构建发布中的稳妥写法。384 收藏 -
前端已经发布新代码，浏览器却仍加载旧 JS，通常不是缓存策略一个开关的问题，而是入口 HTML、资源哈希和上传顺序没有形成闭环。本文用一个可复查的发布流程拆开判断。421 收藏 -
文章 · 前端 | 4天前 | javascript · 前端开发 · Web Animations API · 浏览器动画 · reverse currentTime playbackRate Web Animations API cancel
Web Animations API 适合控制可暂停、可反向和可取消的交互动画。本文用一个可复用的面板动画说明 currentTime、playbackRate、reverse() 与 cancel() 的边界，并给出状态核对和降级写法。290 收藏 -
文章 · 前端 | 4天前 | 布局 · 前端 · 性能 · css · 无障碍 · 图片布局 瀑布流布局 grid-template-columns CSS Masonry reading-flow
CSS Masonry 仍处于早期开发阶段，实际项目应先用稳定的 CSS Grid 或多列方案兜底，再逐步验证列数、图片尺寸、阅读顺序和浏览器支持。本文用一组可回退的卡片布局说明列高差、图片加载和无障碍顺序的处理边界。424 收藏 -
文章 · 前端 | 4天前 | javascript · 异步编程 · 浏览器API · Promise · 异步资源清理 Promise.withResolvers JavaScript Promise 外部resolve
Promise.withResolvers 把 Promise 的 resolve 和 reject 暴露出来，适合事件桥接、超时控制和一次性完成的异步流程。本文用最小示例拆解重复完成、异常传播、取消与资源清理边界。433 收藏 -
scheduler.postTask 可以把前端任务按 user-blocking、user-visible 和 background 分层，并通过 AbortController 取消尚未执行的工作。本文从交互卡顿场景出发，给出最小用法、任务取消、兼容降级和验收边界。151 收藏