前端技术文章
-
中文摘要不能只按字符串下标截断，否则容易把词和表情拆开。本文用 Intl.Segmenter 的 word 粒度处理中文边界，再用 isWordLike 和 supportedLocalesOf 设计多语言回退。290 收藏 -
Nuxt 3 废弃了 Vue 2 的 this.$refs，但可通过 getCurrentInstance().refs 在 onMounted 中安全访问所有已注册的模板 ref，实现类似 Vue 2 的批量操作逻辑。 Nuxt 3 废弃了 Vue 2 的 `this.$refs`，但可通过 `g288 收藏 -
面向前端接口超时告警的运行手册，覆盖触发信号、Network 瀑布图快速判断、前端超时策略、接口分层定位、临时降级、版本回滚、告警确认和复盘清单。287 收藏 -
本文从表单联动字段使用旧状态校验、用户连点导致重复提交的现场出发，排查原因并给出派生规则、同步校验和提交锁的修复方案。285 收藏 -
文章 · 前端 | 1个月前 | 前端 · Cookie · cors · 自动化测试 · playwright · 前端 cookie cors Playwright SameSite 登录态 跨域测试
登录接口返回成功不等于登录态可用。本文用 Playwright 把 Cookie 保存、跨域请求凭证、CORS 响应头和 SameSite 边界写进一组可重复运行的浏览器回归测试，并给出失败定位与上线检查方法。285 收藏 -
本文介绍如何基于两个嵌套对象数组（系统全量模块与用户可访问模块），动态生成带布尔标记（1/0）的权限映射结构，确保未在用户模块中声明的动作自动标记为 0。 本文介绍如何基于两个嵌套对象数组（系统全量模块与用户可访问模块），动态生成带布尔标记（1/0）的权限映射结构，确保未在用户模块中声明的动作自动标285 收藏 -
文章 · 前端 | 6天前 | 前端 · javascript · 性能排查 · 浏览器API · requestAnimationFrame ResizeObserver ResizeObserver loop completed with undelivered notifications 前端尺寸监听
ResizeObserver 回调里再次改动被观察元素尺寸，可能触发循环通知。本文用最小示例还原报错，拆开 contentRect、requestAnimationFrame 和 lastWidth 的关系，给出可验证的修复边界。285 收藏 -
图片懒加载并不等于把 src 延后设置。若没有提前占住尺寸，图片加载完成时会推动正文，造成首屏抖动。本文用 IntersectionObserver、aspect-ratio 和 loading 状态组合出一套可复查的懒加载写法，并说明可见性回收与取消观察的边界。281 收藏 -
本文介绍在鼠标移动事件中动态切换预览图片时，如何避免重复为 元素设置相同 src，从而防止不必要的资源加载和潜在的闪烁问题。核心方法是通过比对当前 img.src 与目标 URL 是否一致来实现条件赋值。 本文介绍在鼠标移动事件中动态切换预览图片时，如何避免重复为 `` 元素设置相同 `src`，从276 收藏 -
1723 天前,我提交了 Canvas Editor 的第一行代码。1460 次提交之后,它正式发布了 1.0.0。促成 1.0 的最后一块拼图,是一个挂了 1556 天的 issue(#41)。2022 年 4 月 28 日,有用户留下一句话:跨页表格在修改列宽的时候,不能够同步。1556 天、3276 收藏 -
文章 · 前端 | 1星期前 | 前端 · javascript · Fetch API · 异步控制 · JavaScript 请求超时 AbortSignal.any AbortSignal.timeout fetch请求取消
用 AbortSignal.any 合并用户取消和超时信号，让 fetch 请求只监听一个入口，并按 AbortError、TimeoutError 区分结束原因，补上兼容与竞态边界。276 收藏 -
把现有的 Ja vaScript 项目，按阶段、循序渐进地迁移到 TypeScript。 迁移策略 添加 tsconfig.json 重命名 .js 为 .ts 逐步添加类型注解 启用严格模式 配置 tsconfig.json tsconfig.json { "compilerOptions": {275 收藏 -
本文从用户连续点击提交按钮的真实场景出发，讲解前端如何用请求锁、按钮禁用、幂等请求头和失败回滚来减少重复订单、重复保存和重复消息。273 收藏 -
Web Worker 处理大数组或文件切片时，结构化克隆会复制数据，Transferable 则转移底层内存。本文用 ArrayBuffer 实验说明两者的边界、发送后原对象为何被清空，以及如何用生命周期和回收检查避免主线程内存持续上涨。273 收藏 -
前端上线后用户仍看到旧页面，通常不是重新部署失败，而是 HTML、静态资源缓存和 Service Worker 的更新边界没有分开。本文用一套可回滚的发布检查，讲清 Cache-Control、文件指纹、CDN 缓存刷新和浏览器验证如何配合。267 收藏