前端技术文章
-
跨域 iframe、弹窗通信最容易漏掉的不是消息格式，而是发送方身份校验。本文用 origin、source 和消息结构三道边界，写出可验证的 postMessage 接收与回复代码。462 收藏 -
用一个原生 HTML dialog 表单说明 showModal、close、returnValue 与 cancel 事件的关系，给出提交、取消和重复打开时的可靠状态处理方式。229 收藏 -
用 AbortSignal.any 合并用户取消和超时信号，让 fetch 请求只监听一个入口，并按 AbortError、TimeoutError 区分结束原因，补上兼容与竞态边界。276 收藏 -
用一个可运行的曝光实验说明 IntersectionObserver 的 threshold 数组如何触发可见比例回调，并用 Set 做首屏曝光去重，避开重复上报和阈值误判。133 收藏 -
前端表单用 blur 做逐字段校验时容易出现提示抖动。用 focusout 事件委托、relatedTarget 判断焦点是否仍在字段组内，再配合 requestId 丢弃过期结果，可以让校验状态稳定下来。356 收藏 -
文章 · 前端 | 2个月前 | 前端 · css · CSS scroll-driven animations animation-timeline scroll-timeline view-timeline animation-range
用 CSS scroll-driven animations 把动画绑定到滚动位置或元素进入视口的进度，拆清 scroll timeline、view timeline、animation-range 的关系，并给出 prefers-reduced-motion 与 @supports 降级方案。119 收藏 -
用 Temporal.PlainDate 处理生日、账期和只关心日历日期的业务值，避开 Date 的时区偏移，覆盖 from、compare、until、toString 与旧浏览器降级边界。198 收藏 -
用浏览器原生 Web Crypto API 完成 AES-GCM 密钥的导入、导出、加密和解密，重点核对 Base64 编码、CryptoKey 可提取性、每次加密唯一 IV 以及 ArrayBuffer 类型边界。129 收藏 -
移动端长列表使用虚拟滚动后，scrollIntoView 可能滚不到顶部。本文从用户症状、滚动时间线和可复现实验入手，解释布局测量与渲染窗口冲突的根因，并给出可验证的修复与回归检查。221 收藏 -
CSS 容器查询从尺寸条件扩展到 style() 条件后，迁移重点不只是替换语法，还要检查容器类型、继承来源、浏览器支持和响应式回归。251 收藏 -
用原生 Popover API 做一个可访问的无 JavaScript 弹出层，覆盖 popover、popovertarget、light dismiss、焦点行为与不支持浏览器的降级方案。235 收藏 -
用一个带校验状态、禁用状态和兄弟提示的表单例子，拆清 CSS :has() 的相对选择器边界、特异性影响与可维护写法。485 收藏 -
文章 · 前端 | 2个月前 | 前端 · 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 收藏