前端技术文章
-
当多个嵌套组件必须沿用同一组父网格轨道时，CSS subgrid 可以避免重复定义列宽和行高。本文通过卡片与表单场景说明 subgrid 的写法、gap 和隐式轨道边界，以及如何保留独立 grid 回退。147 收藏 -
Vue 3 对 TypeScript 有很好的支持，本教程介绍 Vue 3 + TypeScript 的开发实践。 Vue 3 的 Composition API 和 TypeScript 的类型系统完美结合，可以让代码更安全、更易维护。 Vue 3 + TypeScript 类型支持 Vue 3146 收藏 -
朝朝 问候各位 Ja va 老友们！咱写惯了 Spring Boot 那套“万物皆对象”的江湖，突然一脚踏入 Rust 的领地，是不是感觉像从自动挡换到了手动挡？别慌，今儿朝朝就用大白话，把 Rust 那套让编译器“管天管地”的内存安全机制掰扯明白。咱不整虚的，就看它到底怎么把咱后端开发的旧习惯给“144 收藏 -
讲清 IntersectionObserver 的 root、null、祖先关系、rootMargin 与 threshold，并用 rootBounds 和检查表定位滚动容器中不触发的问题。144 收藏 -
用 CSS :focus-visible 区分键盘导航与鼠标点击的焦点表现，保留可访问的焦点提示，补齐自定义组件、脚本聚焦和高对比检查边界。143 收藏 -
SPA 接入 View Transition API 时，动画应该是渐进增强而不是状态更新的前置条件。本文用同一更新回调处理能力检测、减少动态效果、焦点恢复和 updateCallbackDone 边界。142 收藏 -
介绍 Intl.DurationFormat 如何接收结构化持续时间对象，按 locale 与 long、short、narrow 风格生成本地化文本，并用 formatToParts 和能力检测处理真实前端场景。141 收藏 -
文章 · 前端 | 1个月前 | 前端 · 性能优化 · javascript · ArrayBuffer postMessage TypedArray 结构化克隆 Web Worker Transferable
Web Worker通过postMessage传递大数组时，默认结构化克隆会复制数据。本文用TypedArray加Transferable转移底层ArrayBuffer，说明发送端detached边界、Worker侧重建视图、结果回传和何时不该转移。140 收藏 -
用 IntersectionObserver 为长列表图片实现进入视口再加载：从 data-src 占位、rootMargin 预加载，到回调清理、停止观察和兼容边界，给出可直接改造的 JavaScript 写法。139 收藏 -
文章 · 前端 | 2个月前 | javascript · 浏览器API · AbortSignal 前端性能 scheduler.postTask Prioritized Task Scheduling
用一个小型任务调度器示例说明 scheduler.postTask 的优先级、AbortSignal 取消和 scheduler.yield 让出主线程边界，并给出浏览器能力检测与降级写法。138 收藏 -
通过字符串键、对象身份键、读取方式和序列化需求，对比 Object.groupBy 与 Map.groupBy 的选择方法，并解释空原型对象、键转换和元素引用等容易忽略的边界。138 收藏 -
用 CSS scrollbar-width 的 thin 值缩窄长列表滚动条，同时区分 auto 与 none 的行为，处理根元素和嵌套滚动面板的作用范围，并保留键盘、滚轮和触摸用户的滚动入口。138 收藏 -
用 CSS @container style() 读取组件祖先的自定义属性，让同一组件在浅色、深色和高对比主题下保持局部样式一致，并补上浏览器降级与可访问性检查。136 收藏 -
讲清 CSS contain-intrinsic-size 与 content-visibility 的配合方式，用合理的占位尺寸减少长列表内容进入视口时的布局跳动，并给出 CLS 与兼容降级的检查方法。136 收藏 -
文章 · 前端 | 2个月前 | html · 前端 · javascript · css · 表单校验 Web Components ElementInternals form-associated custom elements setValidity
把日期选择器、验证码框等自定义元素接入原生 form，不必再在提交事件里重复拼装校验。本文用 ElementInternals、setFormValue 和 setValidity 做一个可提交、可校验的 custom element，并说明浏览器能力不足时如何降级。134 收藏