标签: 前端开发
92 个内容
笔记(50)
JavaScript单线程事件循环下，利用Promise/async/await实现并发控制。主要方案：1. Scheduler类（推荐），基于队列+计数器，add任务自动调度max并发；2. asyncPool函数，Set跟踪执行任务+Promise.race限流批处理。核心：闭包劫持、递归触发、错误处理防死锁。
i18n-ally 是 VS Code 开源 i18n 扩展，解决多语言开发中翻译键查找难、修改繁、管理乱痛点。主要功能：内联批注、悬停预览、提取翻译、可视化 UI、机器翻译及死键报告；支持 Vue/React 等框架、多格式，配置简单即用。
本文阐述JavaScript Proxy中`receiver`参数的核心作用：代表发起操作的对象。主要解决原型链继承时getter/setter `this`绑定偏移问题。通过`Reflect.get(target, prop, receiver)`和`Reflect.set(target, prop, value, receiver)`正确绑定`this`至调用者。最佳实践：handler中始终传入`receiver`。
WebAssembly (Wasm) 在计算密集型任务中比 JavaScript (JS) 更快，主要因二进制格式减少解析、强类型避免运行时检查、手动线性内存消除 GC 暂停。适合视频/图像处理、3D 模拟等，与 JS 互补。
**文章介绍免费Chrome扩展Figma Export，作为Figma Dev Mode的替代品。** **关键功能：** 从Figma设计中导出代码片段，支持开发者快速获取UI组件代码。 **资源：** [Chrome Web Store](https://chromewebstore.google.com/detail/figma-export/oamappfeofngblhbamhhkpkbpoeooiba)，[GitHub仓库](https://github.com/powerfulyang/figma-export)。（98字符）
文章解释JavaScript Promise作为状态机特性：状态一旦确定（fulfilled/rejected），多次`await`同一Promise对象均立即返回相同结果，而非重复执行内部逻辑。主要用于异步结果缓存，避免重复请求。示例与注意事项详述错误处理及函数复用场景。
本文介绍了使用`WeakMap`和`Proxy`实现简化版Vue3响应式系统的原理和实现。关键问题在于如何自动追踪依赖和避免内存泄漏。解决方案是利用`WeakMap`存储对象依赖关系，Proxy拦截get/set操作，实现依赖收集和触发。
本文深入探讨了 WeakMap/WeakSet 的底层原理和高级应用。WeakMap/WeakSet 基于弱引用，不会阻止垃圾回收，常用于绑定私有状态、DOM 元素元数据、响应式系统和缓存。同时介绍了WeakRef/FinalizationRegistry的结合使用，并总结了使用陷阱和注意点。
本文总结了JavaScript中使用`new RegExp()`的注意事项与安全转义方法。针对动态生成正则时出现的转义问题和安全风险，提出了使用`escapeRegExp`函数对用户输入进行转义的方案，并封装了`makeSafeRegex`函数以支持更安全的正则构造，同时避免替换中的特殊字符被转义。
VueUse 的 `toReactive` 用于将包含多个 `ref` 的对象转换为响应式对象，避免访问时频繁使用 `.value`。适用场景为批量解包 ref，不适用于单个 ref 或对象属性非 ref 的情况。替代方案包括 `toRef`、模板自动解包或 `computed`。
本文介绍了 JavaScript 原生深拷贝 API `structuredClone`。针对传统深拷贝方案（如 JSON 转换、第三方库）的局限性，`structuredClone` 提供了更广泛的类型支持（包括 Date、RegExp、Map/Set 等）和循环引用处理能力，并具有更好的性能表现。但需注意其不支持函数和 DOM 节点，且存在兼容性要求。
本文介绍了在Vue 3 + TypeScript项目中，使用`vue-tsc -b`进行类型检查的最佳实践。针对多包/大型项目，`vue-tsc -b`支持Project References构建模式，实现依赖顺序编译和增量构建。对于单体应用，建议使用`vue-tsc --noEmit`进行类型检查。
本文介绍了一个通用的`cleanAudio`函数，用于清理`<audio>`节点。该函数接收选择器或节点作为参数，实现停止播放、移除音源、释放资源、清理事件监听器以及移除DOM节点。通过克隆节点替换并移除的方式，有效清理了所有事件监听器，并释放资源。
本文介绍了使用`Intl.Collator`对象进行自然排序的方法，解决了文件名排序中数字识别问题。通过设置`numeric: true`和`sensitivity: 'base'`选项，`Intl.Collator`可以实现忽略大小写和变音符号的数字敏感排序。该方法适用于国际化应用，且比自定义排序函数更高效。
在使用`scrollIntoView`时，导航栏遮挡目标元素是个常见问题。本文提供了多种解决方案，包括推荐的CSS `scroll-margin-top` 属性，以及JavaScript手动计算偏移的`scrollTo`方法，还涉及动态获取导航栏高度和Intersection Observer等。最佳实践建议优先使用CSS方案。
本文解释了 CSS 中 `serif`（衬线体）和 `sans-serif`（无衬线体）通用字体族的使用。它们作为 `font-family` 的备选项，能保证跨平台字体显示。选择时需考虑阅读场景：长文本选用衬线体，屏幕显示和标题选用无衬线体。
Vue 3 允许在`` 中使用 `generic` 属性声明泛型类型参数，支持多个参数、`extends` 约束和默认类型。当无法自动推断类型时，使用 `@vue-generic` 指令显式指定类型。`vue-component-type-helpers` 库用于在 `ref` 中使用泛型组件的引用。
本文介绍了在浏览器中实现Unicode字符映射的技术方案，主要解决将特殊Unicode字符（如数学符号）转换为普通字符的问题。方案包括：利用现代浏览器原生支持的`String.prototype.normalize()`方法，以及针对旧版浏览器的polyfill库unorm。同时提及了normalize-unicode-text等轻量级库。
网页通过`debugger`语句阻止控制台打开，本文提供了多种强制打开和绕过无限`debugger`的方法。包括快捷键、浏览器菜单、禁用断点、条件断点、重写函数、替换文件内容以及添加到忽略列表等方案，并针对不同浏览器和特定情况提供实用技巧。
UInt8Array是JavaScript中用于处理二进制数据的类型化数组，底层基于ArrayBuffer，每个元素占1字节，范围0-255。它在图像处理、WebSocket通信、WebAssembly交互等现代Web开发中广泛应用，需注意内存管理、字节序和安全问题，并可结合Streams API、WebGPU等新技术优化性能。
BehaviorSubject是RxJS中具有记忆功能的Observable，始终持有并广播当前值，适用于状态管理。需提供初始值，新订阅者立即获得当前值。源码通过`_value`属性存储当前值，并重写`_subscribe`方法。应用包括状态管理、表单联动等。需注意内存泄漏、过度触发等性能问题，并可与现代框架集成。
RxJS高阶映射操作符（mergeMap、concatMap、switchMap、exhaustMap）提供不同并发策略处理异步流。文章剖析其机制，对比应用场景（自动补全、防重提交、批量上传），强调内存泄漏防护，并探讨了调试技巧和未来发展，提出微前端架构中的策略选择建议。
本文深入探讨 Chrome 开发者工具的高级用法和扩展开发。涵盖HTTP重定向状态码的工程实践，Chrome扩展的架构设计与安全，DevTools在网络、HAR文件、Web Worker和控制台等方面的调试技巧，以及未来发展趋势，强调分层调试思维和持续学习。
动态(42)
这周一直在实践 SpecKit （宪章 -> 需求澄清 -> 技术方案 -> 编码 -> 检查改进） 规范 AI 编程，尝试不写代码来构建一个复杂一点的应用。
题目是：使用“mediabunny”构建一个音视频格式转换的网页应用，不使用服务端和 FFMPEG.wasm。
选用“mediabunny”的原因是：新出现的 npm 库大模型的知识库里边没具体知识，模型必须使用工具才能完成。
最终能交作业的模型是 Codex 和 Sonnet 4.5。Codex 的 UI 挺好的，Sonnet 4.5 做出来了，但是 UI 太 AI 了。
Codex 做出来的效果：https://format-studio.run-on.workers.dev/
其他模型 GLM 4.6 、M2、KAT-Coder 都未完成作业。能进入编码阶段的是 GLM 4.6，但是代码里边一堆 document 导致 Next.js 报错太多就没往下走了。M2、KAT-Coder 在技术方案阶段没满意的产出，有的是工具不调用、有的是不听话。
K2、Qwen、DeepSeek 没测试，提示词和方法放下面👇了，你们有兴趣可以自己测试，或者复现 Codex 的作业。
测试工具：
SpecKit + Claude Code / Codex
配置 MCP:
deepwiki 和 context7
预置条件：
初始化 Next.js 16 和 shadcn-ui 。
初始化 SpecKit 配置。
原始提示词：
请使用开源库 mediabunny 实现一个名叫 "Format Studio" 的网页应用, 类似很多年前 Windows 中的"格式工厂"这款软件, 可以转换视频文件和音频文件格式。
纯前端应用，无任何服务端依赖。
必须使用 mediabunny 的功能, 不要使用 FFMpeg.wasm 做降级。
如果你不熟悉 mediabunny， 可以使用 deepwiki 和 context7 调研 mediabunny 后，完成后续任务。
参考资料：
<a href="https://github.com/Vanilagy/mediabunny">https://github.com/Vanilagy/mediabunny</a>
<a href="https://mediabunny.dev/guide/converting-media-files">https://mediabunny.dev/guide/converting-media-files</a>
之前一直在 HTML ZONE 用 WASM 和 Web API 开发一些本地优先的 Web 工具。
今天刷到 @addyosmani 的网站，发现他也在做类似的事情，而且进度比我快得多！
这么多完全在浏览器内运行的工具，真的让人惊叹，尤其是屏幕录制功能。
更令人兴奋的是，这些工具全部开源！
🖼 图像处理
• Background Image Remover：AI 去背景，支持本地处理和自定义背景
• Squish - Image Optimizer：批量图片压缩，支持多格式和实时预览
• Filter - Image Editor：现代图像编辑器，内置滤镜和响应式设计
• Upscale and Fix Images：AI 图像增强与放大（2x–8x）
🎥 视频处理
• Compress - Video Optimizer：基于 FFMPEG 的视频压缩与格式转换
• Record：屏幕与摄像头录制，支持画中画和提词器
🧠 AI 工具
• Say - Voice Dictation：Whisper AI 语音转文字，支持摘要与笔记
• Chatty - AI Chat：本地运行的 AI 聊天助手，基于 WebGPU
📄 文档处理
• Scan - Document Scanner：网页端文档扫描，支持拍照、裁剪和 PDF 导出
关于 tiptap 的简单使用，如何不添加到历史记录？
https://twitter.com/localhost_5173/status/1793465965721821428 EGOIST : Choosing a frontend framework be like
#好玩 #code #言 #每日の图
from 世界尽头のWasteland via 边缘坐标 🎉♪⸜(๑ ॑꒳ ॑๑)⸝♪🎆
所以 startTransition 降低优先级，降低到多少级呢 Lane
你提到的startTransition是 React Concurrent Mode（并发模式）的一部分，用于启动不急迫的用户界面转换，例如数据获取。
当使用startTransition开始一个更新时，React 会为该更新分配一个较低的优先级，意味着它可以等待高优先级的任务完成后再执行。在具体的优先级系统（lanes）中，startTransition降低的具体优先级可能不是公开明确的数字。React 团队为优先级设计了一个相对复杂的系统，其中有多个 "lanes" 代表不同的优先级。
至于你提到的 "多少级"，这其实是一个实现细节，React 团队可能会随着版本的迭代进行调整。对于开发者来说，更关心的是startTransition能够确保那些不是非常紧急的更新不会阻塞关键用户交互。
如果你想深入了解 React 的并发模式的实现，可以查阅 React 源码或者关注 React 团队的公开通讯。但在日常开发中，了解startTransition的基本行为和意图通常就足够了。
那些留在2023年的日子：四月
- GraphQL Server
- FFmpeg WASM
- MochiDiffusion
- stable-diffusion-webui
- Figma
- Maximum XOR of Two Numbers in an Array
- Proxy for Github Copilot
The queueMicrotask() method, which is exposed on the Window or Worker interface, queues a microtask to be executed at a safe time prior to control returning to the browser's event loop.
First, nextTick queue is checked to get tasks for its execution, once it is exhausted, the microTasks queue is checked. After finishing the tasks in the microtask queue the process of checking nextTick and microTasks queues are repeated until the queues have been emptied.
They have different queues. The nextTick's queue is managed by node and the microtask one is managed by v8.
The nextTick queue is checked first after the current function/script execution, and then the microTask one.
那些留在2023年的日子：
- 记录 Post 历史版本
- 发布新内容触发 algolia 的 crawler
- react-fiber
- Node Stream
- 借助SVG文字尺寸自动缩放, 感觉场景就那样
- 不要乱用 100vw，会导致滚动条把页面内容遮住的情况，用100%比较好
100vw相对于浏览器的window.innerWidth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！而100%是可用宽度，是不含滚动条的宽度。
于是，calc(100vw - 100%)就是浏览器滚动条的宽度大小（如果有，如果没有滚动条则是0）！左右都有一个滚动条宽度（或都是0）被占用，主体内容就可以永远居中浏览器啦，从而没有任何跳动！
Html Element area, map
How to use React label element?
If you try to render a<label> element bound to a text input using the standard for attribute, then it produces HTML missing that attribute and prints a warning to the console.
1<label for={'user'}>{'User'}</label>
2<input type={'text'} id={'user'} />for is a reserved keyword in JavaScript, use htmlFor instead.
1<label htmlFor={'user'}>{'User'}</label>
2<input type={'text'} id={'user'} />React v16 support custom DOM attributes.
In the past, React used to ignore unknown DOM attributes. If you wrote JSX with an attribute that React doesn't recognize, React would just skip it.
For example, let's take a look at the below attribute:
1<div mycustomattribute={'something'} />Would render an empty div to the DOM with React v15:
1<div />In React v16 any unknown attributes will end up in the DOM:
1<div mycustomattribute='something' />2022-10-18 日报
- timeline 加入 algolia crawler，支持搜索
- fix abnormal scroll by
overflow: clip - 额外学到
overflow-anchor: none - 每日一题二叉树最底层最左边的值