前端技术文章
-
CSS @function 可以把带参数的样式逻辑收进原生 CSS。本文用 result 覆盖规则、参数与局部变量作用域、类型约束和 @supports 降级，判断它是否适合进入前端项目。296 收藏 -
用一个可渐进落地的组件案例说明 CSS @scope 迁移：确定根节点与下边界、保留旧规则回退、处理层叠邻近度与继承，并按浏览器支持范围清理历史选择器。294 收藏 -
TypeScript satisfies 用于校验对象是否符合类型契约并保留精确推断，类型断言则表达调用者已掌握的额外事实，二者在配置对象、DOM 和外部数据边界上的用法不同。293 收藏 -
文章 · 前端 | 1个月前 | 前端 · javascript · css · 浏览器API · Element.checkVisibility visibilityProperty opacityProperty contentVisibilityAuto 前端可见性
Element.checkVisibility() 能判断元素是否有布局盒、是否被 display:none 或 content-visibility:hidden 跳过渲染；通过 opacityProperty、visibilityProperty 和 contentVisibilityAuto 可以收紧判断，但 true 仍不等于元素真的出现在视口中。292 收藏 -
用 TypeScript 区分联合建模请求状态，让 loading、success、error 的字段访问安全，并用 never 检查新增状态是否遗漏。292 收藏 -
SPA 同时处理链接点击、后退和表单跳转时，History API 很容易漏掉边界。用 Navigation API 统一接管导航事件，再配合失败恢复和兼容回退，可以把加载、滚动、焦点和错误状态收进一条可验收的流程。291 收藏 -
CSS container query 不生效时，先确认父元素设置了 container-type，再检查查询命中的容器、宽度条件和浏览器支持；文中给出卡片布局的最小写法与降级方案。291 收藏 -
讲清 Fetch keepalive 在页面隐藏、跳转或关闭前发送小请求的写法、64 KiB 限制、幂等设计，以及与 sendBeacon 的选择边界。291 收藏 -
Fetch API 适合现代上传请求，但标准接口目前没有通用的上传进度事件。本文用一个可回退的前端上传流程，说明何时选择 XMLHttpRequest、如何显示进度，以及取消、失败和重复提交怎么验收。290 收藏 -
Web Animations API 适合控制可暂停、可反向和可取消的交互动画。本文用一个可复用的面板动画说明 currentTime、playbackRate、reverse() 与 cancel() 的边界，并给出状态核对和降级写法。290 收藏 -
中文摘要不能只按字符串下标截断，否则容易把词和表情拆开。本文用 Intl.Segmenter 的 word 粒度处理中文边界，再用 isWordLike 和 supportedLocalesOf 设计多语言回退。290 收藏 -
文章 · 前端 | 4星期前 | 前端 · 性能 · javascript · 浏览器API · ArrayBuffer postMessage Web Worker structured clone transfer list
Web Worker 的 postMessage 默认使用 structured clone，接收端拿到的是独立副本。本文解释对象复制、ArrayBuffer 转移、transfer list 和生命周期边界，帮助前端开发者判断什么时候复制、什么时候交接所有权。290 收藏 -
Nuxt 3 废弃了 Vue 2 的 this.$refs，但可通过 getCurrentInstance().refs 在 onMounted 中安全访问所有已注册的模板 ref，实现类似 Vue 2 的批量操作逻辑。 Nuxt 3 废弃了 Vue 2 的 `this.$refs`，但可通过 `g288 收藏 -
FormDataEvent 会在表单数据条目构造完成后暴露同一个 FormData 对象。本文用一个原生 JavaScript 小项目演示如何统一补充、替换和删除字段，并处理 submitter、成功控件、fetch multipart 边界与取消提交等关键边界。288 收藏 -
WebSocket close 事件出现 1006 时，浏览器并不是收到了服务端发送的 1006。本文用 CloseEvent 字段、readyState、Network 记录和服务端日志对照，建立一套可执行的异常断链排查方法。286 收藏