Dvorak
Dvorak

Dvorak Chen

All Posts

12
FEB

Leptos 初探 - 序言

Leptos是一个基于Rust的全栈Web框架通过消除虚拟DOM采用最小粒度更新机制实现了比React更高效的性能表现其组件开发模式与React函数组件相似但通过view!宏和Rust原生语法构建界面开发者需要同时掌握Rust语言特性与框架规则这种双重门槛虽然提升了开发体验但显著提高了学习成本当开发者尝试在两个按钮事件中共享输入框引用时Rust的所有权系统会强制要求使用Rc引用计数技术这种对内存安全的严格把控在提升稳定性的同时也带来了额外的代码复杂度框架生态方面Leptos依赖于WASM环境的特殊性开发者必须筛选能适配WASM的crate例如reqwest替代request而gloo则提供了对浏览器API的模拟实现当尝试用TimeoutFuture实现延迟请求时需要同时处理异步编程与生命周期管理的双重挑战这种开发体验既展现了Rust系统级语言的优势也暴露了其在Web开发场景中的独特挑战当开发者在享受Leptos带来的高性能渲染和强类型安全时是否应该为陡峭的学习曲线付出代价当最小粒度更新带来的性能优势足以抵消Rust复杂语法的代价时Web开发的范式是否正在发生根本性转变而那些被React生态吸引的开发者们又是否愿意为性能突破重新学习一门系统级语言？--Qwen3

Rust Leptos rust-programming web development Component Framework Ownership Rules
14
JAN

滑动窗口最大值

滑动窗口最大值问题要求在数组中动态获取固定大小窗口内的最大值看似简单却暗藏复杂陷阱。常规暴力解法通过子数组排序获取最大值却面临O(n²)时间复杂度的瓶颈而最大堆方案虽能优化至O(n log n)却仍非最优解。文章揭示了题解中精妙的双向队列策略其通过维护降序队列结构实现O(n)时间复杂度的关键在于将数组下标与值解耦——当新元素进入窗口时持续移除队列尾部所有小于该元素的值确保队列始终保存潜在最大值候选。这种设计巧妙利用单调性让队列头部自动指向当前窗口最大值同时通过下标范围判断自动移除超出窗口的无效值。这种数据结构的创新运用不仅打破了暴力解法的思维定式更展现了算法设计中空间换时间的哲学思考。当读者看到队列如何自动维护最大值时是否会联想到其他需要动态极值的场景？在算法的世界里看似简单的窗口滑动背后究竟还藏着多少可以优化的数学规律？--Qwen3

Algorithms Sliding Window Queue Data Structure Algorithm Optimization Time Complexity Analysis Max Value Problem
14
JAN

湘伦小雨四手联弹 - 低音部分和弦走向分析

《湘伦小雨》四手联弹低音部分的和弦走向揭示了E小调音乐语言的深层逻辑。通过分析调性确认与和弦序列的递进关系，可以发现作曲家如何以i-V-i-iv-i的框架构建情感流动——开篇以E小调主和弦奠定阴郁基调，随后通过V级和弦的张力与旋律小调的半音过渡（如#C-#D）制造戏剧性转折，第十五小节引入iv级和弦则暗示了情感的外延。值得注意的是，这种i-V的主属关系在第九至第十二小节被刻意延长，形成悬念的积累与释放，而重复的结构设计是否意味着作曲者对记忆回环的隐喻？当第十七小节重新回归i级和弦时，平行八度的终止式选择既打破了传统和声规范，又为音乐赋予了开放性的余韵。这种在严谨结构中嵌入的非常规手法，是否暗示着创作者对传统与创新的平衡探索？当和弦走向从理性分析转化为听觉体验时，那些升高的半音与重复的乐句，是否也在听众心中播下了超越乐谱的想象种子？--Qwen3

music Four hand piano Xiang Lin Xiao Yu E minor Chord progression Piano analysis
03
JAN

Multiaddr - 面向未来的地址

Multiaddr 是一种以协议组合为核心的网络地址格式，通过斜杠分隔的层级结构将 IP 协议、地址、端口、加密方式等元素串联成可读性强的字符串。它突破了传统地址对协议的单一描述，允许如 `/ip4/1.2.3.4/tcp/1234/tls/p2p/QmFoo` 这样的嵌套表达，将网络连接的每一步协议和参数显式化。这种设计既满足了人类对地址结构的直观理解，又通过自右向左的机器解析逻辑，使程序能自动推导协议依赖关系。尽管 Multiaddr 在 JavaScript、Rust、Go 等语言中已有稳定实现，但其实际应用却面临双重挑战：程序需要自行解析复杂协议链，导致开发成本陡增；且传统参数传递方式（如直接指定 IP 和端口）往往更直接高效。当加密协议与传输协议的组合突破基础架构时，开发者不得不在抽象便利与实现复杂性间反复权衡。Multiaddr 的未来或许取决于配套工具链的完善——如果能自动处理协议拼接与解析，它是否能真正成为网络地址的“通用语言”？当网络协议不断演进时，这种灵活的组合结构能否避免成为新的技术债务？--Qwen3

network Network Address Format Multi protocol IP Versioning Cross platform Rich Functionality
28
DEC

组件化-组件的兼容性

文章探讨了组件化前端开发中如何实现兼容性设计的核心问题。传统HTML/CSS模式通过直接修改元素样式实现灵活布局，但组件化开发需建立全新思维框架——组件应通过接口暴露或父级约束实现环境适配而非被动接收样式污染。当组件开放类名传递接口时，开发者容易陷入"传染性"坏习惯，导致组件样式被外部随意篡改破坏既定设计。这种设计缺陷会引发诸如元素溢出父容器等布局问题，根源在于未正确处理盒模型计算和层级样式继承。提升组件兼容性的关键在于：对固定尺寸组件提供可控接口，对自适应组件采用父级约束策略，同时严格遵循盒模型规范（如设置box-sizing:border-box）。这种设计理念转变要求开发者突破传统HTML思维定式，建立组件边界意识——组件应像独立单元在不同环境中稳定运行，而非依赖外部样式干预。当组件能通过父级约束自动适配大小时，开发者才能真正享受组件化带来的复用价值。文章最后引发思考：在追求组件灵活性与稳定性的平衡中，如何设计既能满足多样化需求又不破坏组件内核的接口体系？--Qwen3

Javascript Component Design UI Development CSS Styling Compatibility Issues Box Model
24
DEC

组件化-使用 Cypress 测试组件

文章围绕如何利用 Cypress 实现组件化测试展开，对比了传统单测工具与可视化测试框架的差异，揭示了组件库开发中缺乏直观展示场景的痛点，并提出通过 Cypress 结合 Rollup/Vite 的打包方案优化开发体验。作者通过构建一个类苹果窗口组件的案例，完整演示了从创建组件库到配置 Cypress 的流程，重点解析了版本控制、tsconfig 配置、测试文件生成等易出错环节，同时展示了 Cypress 提供的查询断言机制如何实现组件行为验证。文章指出 Cypress 生成的默认测试代码存在类型定义缺失和必传参数缺失的问题，并给出通过修改 tsconfig.json 和引入 cypress/react18 的修复方案。在测试实践层面，强调应避免依赖易变的类名/ID定位元素，转而通过 data-cy 属性实现稳定查询，同时通过链式调用断言 API 验证组件状态。最终通过对比成功与失败的测试用例效果，直观呈现了 Cypress 的实时反馈能力。文章最后引发思考：当组件逻辑复杂度提升时，如何设计测试用例才能在保证覆盖率与维护成本之间取得平衡？--Qwen3

Javascript Cypress E2E Testing React Components Chai Assertions Data Attributes
23
DEC

在前端开发中使用 Mock

在前端开发中，真实API的不可用性或不稳定性常常成为开发的障碍，而Mock技术通过模拟请求和响应提供了解决方案。本文以msw为例，展示了如何通过拦截请求构建稳定的开发环境。通过`npm install msw --save-dev`安装核心工具后，开发者可在项目中创建mock配置文件，通过定义`handlers`数组指定需要拦截的API路径和响应逻辑，例如使用`http.get("/getSth")`搭配`HttpResponse.json()`返回预设数据。msw通过生成`mockServiceWorker.js`实现浏览器请求拦截，配合`setupWorker`和`enableMocking()`方法，使mock服务在开发环境自动启动。当点击按钮触发`fetch("/getSth")`时，msw会拦截请求并返回配置好的模拟数据，而真实环境中若未启用mock则会直接报错。这种技术不仅解决了前后端分离开发中的联调难题，更提供了灵活的测试场景。但当mock数据与真实API存在差异时，如何平衡模拟精度与开发效率？当项目规模扩大时，mock配置的维护成本又该如何控制？这些问题或许正是你深入探索前端工程化实践的起点。--Qwen3

Javascript MSW Mock API Frontend Development HTTP Mocking HTTP Requests
18
DEC

CSS 编写赛博效果的 LOGO

文章介绍了通过叠加三张SVG Logo图片并利用CSS属性实现动态视觉效果的方法。核心步骤包括使用绝对定位错开两层SVG元素的位置（如.svg2设置top:-3px/left:-5px，.svg3设置top:3px/left:5px），配合0.5透明度和mix-blend-mode:lighten混合模式增强色彩层次。通过定义两个交替动画dark-left和dark-right，利用@keyframes分别控制错位元素的fill颜色周期性变化（如#ff0054→#9dff00→#00d5ff等渐变），最终形成流动的霓虹光效。完整实现依赖SVG路径数据、CSS定位属性、混合模式及关键帧动画的组合应用，项目代码托管在GitLab的Aiursoft主页项目中。--Qwen3

css SVG CSS Animation Mix Blend Mode Logo Design Layer Effects
08
SEP

React 单元测试

本文介绍了如何使用Vitest、React Testing Library和MSW进行React组件单元测试的完整流程。通过配置测试环境安装必要依赖后，首先演示了基础交互测试方法：通过data-testid属性定位元素模拟点击事件，利用queryByRole验证组件状态变化。针对包含网络请求的场景，使用MSW构建mock服务器拦截HTTP请求，通过beforeAll和afterAll控制mock服务启停，并用waitFor处理异步渲染验证。测试过程中需注意组件残留导致的重复渲染问题，通过afterEach配合cleanup实现测试环境清理。完整示例包含两个测试用例，分别验证点击灰色按钮卸载内容元素和点击黄色按钮触发mock请求的正确行为，最终形成结构化测试代码模板，涵盖依赖导入、mock配置、测试钩子和断言逻辑的完整实现。--Qwen3

Javascript MSW Vitest React Testing Library Component Testing Node.js
08
SEP

如何开发npm包并使用rollup打包

这篇文章详细解析了如何利用Rollup构建可发布的React组件库并上传至npm，通过实际案例展示了从零到发布的完整流程。文章首先对比了Rollup与Webpack的差异，强调其基于ES6模块的摇树优化特性，能有效压缩代码体积。通过一个包含图片资源的组件示例，揭示了首次发布时因忽略多余文件导致的体积问题，并通过.npmignore文件规范解决了资源冗余问题。在进阶环节中，重点演示了如何通过Rollup配置文件实现多模块格式输出（CJS/ESM），并整合postcss、typescript2等插件处理现代前端开发中的各种资源类型。文章通过三次迭代发布过程，逐步展示了从源码发布到打包压缩的演进路径，最终实现生产环境代码混淆和体积优化。值得注意的是，文中通过两次版本更新的对比，揭示了开发库与生产包的管理差异，提出了如何平衡代码可读性与体积优化的思考。当开发者在选择打包工具时，是否真正理解了不同模块系统的适用场景？当需要同时支持ESM和CJS模块时，又该如何设计输出策略？这些关于构建工具的深层考量，或许正是每个前端开发者在组件库开发中必须面对的抉择。--Qwen3

Javascript npm packages rollup javascript bundling typescript postcss