Dvorak
Dvorak

Dvorak Chen

All Posts


Leptos - CSR & SSR

这篇文章探讨了 Leptos 框架在处理服务器端渲染(SSR)和客户端渲染(CSR)方面的实现细节。Leptos 通过“脱水”、“浸泡”和“湿润”三个阶段实现了高效的 SSR 流程:“脱水”阶段生成适合搜索引擎抓取的静态 HTML,“浸泡”阶段将 JavaScript 脚本插入到静态 HTML 中,“湿润”阶段则通过执行 JavaScript 将页面转换为功能齐全的现代应用。文章还详细介绍了 Leptos 的代码组织方式,包括使用 `main.rs` 和 `lib.rs` 文件分别处理服务器端和客户端代码,并通过 Rust 的特性(features)机制实现了环境分离。此外,Leptos 提供了 Server Functions 功能,允许在组件中调用服务器端代码,但需要注意引用规则和依赖管理。文章最后指出 Leptos 在 SSR 方面的创新性,但也提到其复杂性和潜在问题,并对比了 React 的易用性优势。--DeepSeek

Rust Leptos Server Side Rendering Actix web Hydration Server Functions

Rust 和经典语言在习惯上的差异

本文介绍了作者在学习Rust编程语言过程中遇到的一些挑战。首先,文章讨论了Rust的所有权模型、借用检查器和并发机制带来的复杂性,以及如何通过单元结构体(struct D;)和实现trait来提供更好的抽象。接着,文章重点描述了Rust中常见的“包装”(wrap)模式,例如使用Box<dyn trait>来进行动态分配,Arc<Mutex<Box<dyn D>>>来处理多线程共享数据,并解释了这些包装的原因和必要性。最后,作者提到可以使用type关键字定义自定义类型名称以简化复杂的嵌套结构。文章总结了Rust编程中一些基础但重要的概念,尽管这些内容在熟练后看起来简单,但对于初学者来说可能需要较长时间适应。--DeepSeek

Rust memory-management Ownership System Smart Pointers Concurrency Thread Safety

Leptos - 撸一只赛博猫猫

这篇文章展示了如何使用 Leptos 框架结合 Rust 语言来创建一个互动的赛博猫动画,完全摒弃了传统的 JavaScript 开发方式。通过借助 crates 提供的 BOM API 和时间函数库,作者实现了从猫猫不同动作状态到用户交互的全部逻辑。文章详细介绍了如何利用数组存储猫猫的不同动作字符画,并通过 Interval 函数实现周期性切换来模拟尾巴摇动的效果。此外,作者还探讨了如何在组件卸载时清理 Interval 定时器以避免资源泄漏的问题。最终,这只用 HTML 渲染界面、Rust 控制逻辑的赛博猫不仅能够在点击时发出“喵喵叫”,还能在鼠标按住时发出咕噜声,展现出令人惊喜的互动效果。项目代码已开源,感兴趣的读者可以前往 GitHub 仓库查看详细实现。通过这篇文章,作者不仅展示了 Rust 在前端开发中的潜力,还提出了一个问题:你是否也想尝试用 Rust 来构建自己的 Web 应用,并创造更多有趣的效果?不妨从这篇博客开始,探索 Leptos 的无限可能!--DeepSeek

Rust Leptos gloo Cyber Cat Interval MouseEvent

从实现 Iterator 来窥探 Rust

这篇文章介绍了如何为一个自定义的`Nums`结构体实现迭代器功能。首先,`Nums`结构体包含一个长度为10的整数数组,并通过`new()`方法初始化。接着,`iter()`方法返回一个`NumsIter`迭代器,该迭代器持有对`Nums`实例的引用。为了确保引用的有效性,`NumsIter`带有生命周期标注`'a`。实现`Iterator` trait时,指定了返回类型为`usize`,并在`next()`方法中实现了遍历逻辑:当索引在有效范围内时返回当前元素,否则返回`None`。这样,用户可以通过标准的`for`循环轻松遍历`Nums`实例的值。--DeepSeek

Rust Iterator Pattern Lifetime Management Ownership and Borrowing Memory Safety Code Structure

Leptos 初探 - 序言

这篇文章介绍了基于Rust的前端框架Leptos的一些特性和开发经验。文章提到Leptos将代码编译为WASM在浏览器中运行,因此需要选择支持WASM环境的Crate(如`reqwest`用于HTTP请求),并使用模拟JavaScript API的Crate(如`gloo`)来实现特定功能。文中还详细讨论了Rust语言的特点及其对Leptos开发的影响,包括严格的语法规则、所有权规则以及如何通过引用计数(`Rc`)解决多个事件处理程序共享资源的问题。文章最后提到未来可能会继续编写更多关于Leptos的教程内容。--DeepSeek

Rust Leptos rust-programming web development Component Framework Ownership Rules

滑动窗口最大值

这篇文章介绍了一种高效求解滑动窗口最大值问题的方法。作者首先提到暴力枚举的时间复杂度较高,然后转向更优方法,提出利用双端队列存储可能的最大值索引,并确保队列中元素为当前窗口内的降序排列。具体思路是:在将新元素加入队列前,移除所有比其小的元素;当窗口滑动时,检查队列头部元素是否仍在窗口内,如不在则移出。这样可保证队列首部始终为当前窗口最大值。文中通过举例和代码示例详细说明了这一过程,并解释了如何维护队列结构以确保时间复杂度为 O(n)。--DeepSeek

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

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

本文对《湘伦小雨》四手联弹低音部分进行了详细的和弦走向分析,带你解析这首曲子的调性、和声结构及音乐情感。文章首先通过调号和开头结尾和弦确定了曲子为E小调,并详细拆解了前二十个小节的和弦变化:从i级(E小调)到V级(B大调),再到iv级(A小调),最后回归i级,形成了完整的终止式。文章还特别指出,旋律中Ⅵ、Ⅶ级音的半音升高体现了旋律小调的特点,并分析了部分小节中的过渡音和和声色彩变化。后半部分则重复了前二十个小节的和弦走向,形成结构上的呼应。这篇文章不仅展示了作曲家对和声语言的独特运用,也揭示了E小调音乐色彩如何通过和弦进行传递情感。你是否也在思考:这些和弦的变化是如何影响整首曲子的情感表达的?后半部分的重复结构是否带来了新的音乐体验?这些问题或许能激发你对这首作品更深层次的理解与探索。--DeepSeek

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

Multiaddr - 面向未来的地址

Multiaddr 是一种高可读性的网络地址格式,支持多种协议和复杂的网络配置,但其实现和使用带来较高的程序复杂性和耦合度。尽管有多语言的 Multiaddr 库实现,但在实际开发中仍需自行解析其中的协议信息,增加了工作量。作者认为目前没有配套工具支持,导致使用成本较高,因此不推荐广泛采用。--DeepSeek

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

组件化-组件的兼容性

文章讨论了组件化开发中兼容性设计的重要性,指出传统HTML思维与组件化思维的区别,并提出通过暴露必要接口和依赖父级元素限制大小来提高组件兼容性的方法。文章强调样式编写需细致,如设置`box--sizing: border-box;`以避免尺寸计算问题,总结UI开发需注重声明式写法的稳定性和灵活性。--DeepSeek

Javascript Component Design UI Development CSS Styling Compatibility Issues Box Model

组件化-使用 Cypress 测试组件

Cypress是一款强大的端到端和组件测试框架,支持React、Vue等前端框架的组件级测试。通过安装cypress及其Bundler插件(如vue-cypress-components或react-cypress),开发者可轻松编写组件测试用例,并在可视化界面中实时查看执行结果。测试时需处理常见问题如类型错误和打包影响,并掌握查询API(如cy.get())与断言库Chai的使用,以确保测试稳定性和可靠性。最佳实践包括避免存储查询结果、不依赖易变属性,而推荐通过data-cy属性定位元素。--DeepSeek

Javascript Cypress E2E Testing React Components Chai Assertions Data Attributes