前端技术文章
-
CSS shape() 可以把响应式卡片的裁切路径写成相对尺寸，让 clip-path 在容器变化时保持比例；本文用真实 CSS 片段拆开坐标起点、line/curve 命令、百分比伸缩和 @supports 回退验收。160 收藏 -
本文介绍如何通过原生 Ja vaScript 实现：当用户从嵌套的 子菜单中选择任意选项时，该选项自动移至 下拉框顶部并设为当前选中值，提升用户体验与交互一致性。 本文介绍如何通过原生 Ja vaScript 实现：当用户从嵌套的 `` 子菜单中选择任意选项时，该选项自动移至 `` 下拉框顶部并设为156 收藏 -
CSS corner-shape 可以在 border-radius 的基础上实现 bevel、scoop、notch 和 squircle 等异形圆角，但目前仍需配合 @supports 和普通圆角降级。本文用卡片组件说明写法、参数边界与验收方法。155 收藏 -
在 Vue 2 + Vue Router 3 中，需确保特定子路由（如 FoodDescription）每次被激活（含浏览器前进/后退）时都执行 API 请求，而非仅依赖按钮点击逻辑；推荐通过 $route 路由守卫式监听 + watch 实现精准、低侵入性响应。 在 Vue 2 + Vue Rou152 收藏 -
scheduler.postTask 可以把前端任务按 user-blocking、user-visible 和 background 分层，并通过 AbortController 取消尚未执行的工作。本文从交互卡顿场景出发，给出最小用法、任务取消、兼容降级和验收边界。151 收藏 -
文章 · 前端 | 14小时前 | 前端 · javascript · web components · Web Components CustomElementRegistry Scoped Custom Element Registries ShadowRoot
Scoped Custom Element Registries 为 Web Components 提供独立命名空间，让不同组件库或微前端可以保留同名标签。本文从全局注册冲突出发，说明 ShadowRoot、元素子树和渐进降级的边界。150 收藏 -
Vue 3 对 TypeScript 有很好的支持，本教程介绍 Vue 3 + TypeScript 的开发实践。 Vue 3 的 Composition API 和 TypeScript 的类型系统完美结合，可以让代码更安全、更易维护。 Vue 3 + TypeScript 类型支持 Vue 3146 收藏 -
朝朝 问候各位 Ja va 老友们！咱写惯了 Spring Boot 那套“万物皆对象”的江湖，突然一脚踏入 Rust 的领地，是不是感觉像从自动挡换到了手动挡？别慌，今儿朝朝就用大白话，把 Rust 那套让编译器“管天管地”的内存安全机制掰扯明白。咱不整虚的，就看它到底怎么把咱后端开发的旧习惯给“144 收藏 -
文章 · 前端 | 1星期前 | javascript · 前端性能 · 浏览器API · AbortSignal 前端性能 scheduler.postTask Prioritized Task Scheduling
用一个小型任务调度器示例说明 scheduler.postTask 的优先级、AbortSignal 取消和 scheduler.yield 让出主线程边界，并给出浏览器能力检测与降级写法。138 收藏 -
用 CSS @container style() 读取组件祖先的自定义属性，让同一组件在浅色、深色和高对比主题下保持局部样式一致，并补上浏览器降级与可访问性检查。136 收藏 -
文章 · 前端 | 1星期前 | html · 前端 · javascript · css · web components · 表单校验 Web Components ElementInternals form-associated custom elements setValidity
把日期选择器、验证码框等自定义元素接入原生 form，不必再在提交事件里重复拼装校验。本文用 ElementInternals、setFormValue 和 setValidity 做一个可提交、可校验的 custom element，并说明浏览器能力不足时如何降级。134 收藏 -
用一个可运行的曝光实验说明 IntersectionObserver 的 threshold 数组如何触发可见比例回调，并用 Set 做首屏曝光去重，避开重复上报和阈值误判。133 收藏 -
商品卡片内容长短不一时，底部价格和按钮容易上下漂移。本文从实际错位现象入手，用 CSS Grid 的 subgrid 统一行轨道，并给出不支持 subgrid 浏览器的稳定降级写法。130 收藏 -
文章 · 前端 | 1星期前 | 前端 · javascript · 安全开发 · Web Crypto · 浏览器 API · ArrayBuffer 前端加密 AES-GCM Web Crypto API crypto.subtle
用浏览器原生 Web Crypto API 完成 AES-GCM 密钥的导入、导出、加密和解密，重点核对 Base64 编码、CryptoKey 可提取性、每次加密唯一 IV 以及 ArrayBuffer 类型边界。129 收藏 -
图片懒加载如果没有预留尺寸，页面会在图片加载后发生布局抖动。本文按完整工作流拆解占位比例、IntersectionObserver 按需加载、骨架状态和 CLS 指标复查。128 收藏