实战项目

第32课：WASM

🎯 本课目标

掌握Rust编译为WebAssembly：wasm-pack、wasm-bindgen和浏览器交互。

1. 创建WASM项目

// 安装wasm-pack
$ cargo install wasm-pack

// 创建项目
$ cargo new --lib my-wasm
$ cd my-wasm

// Cargo.toml
[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

// src/lib.rs
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("你好, {}! 来自Rust/WASM!", name)
}

#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u64 {
    if n <= 1 { return n as u64; }
    let mut a = 0; let mut b = 1;
    for _ in 2..=n { let t = b; b = a + b; a = t; }
    b
}

✅ 编译验证通过

2. 调用JavaScript

use wasm_bindgen::prelude::*;

// 调用JS函数
#[wasm_bindgen(extern_crate)]
extern "C" {
    fn alert(s: &str);
    fn console_log(s: &str);
}

// 导出给JS调用
#[wasm_bindgen]
pub fn show_alert() {
    alert("来自Rust的问候!");
}

// 操作DOM
#[wasm_bindgen(extern_crate)]
extern "C" {
    type Document;
    fn document() -> Document;
    #[wasm_bindgen(method)]
    fn getElementById(this: &Document, id: &str) -> Element;
}

3. 构建与部署

// 构建
$ wasm-pack build --target web

// 输出
pkg/
├── my_wasm.js        // JS绑定
├── my_wasm_bg.wasm   // WASM二进制
├── my_wasm.d.ts      // TypeScript类型
└── package.json

// 在HTML中使用
<script type="module">
  import init, { greet } from './pkg/my_wasm.js';
  await init();
  console.log(greet('World'));
</script>

WASM运行模型：浏览器 ┌──────────────────────────┐ │ JavaScript引擎 │ │ ┌──────────────────┐ │ │ │ JS代码 │ │ │ └────────┬─────────┘ │ │ │ wasm-bindgen │ │ ┌────────▼─────────┐ │ │ │ WASM模块 │ │ │ │ ┌──────────────┐ │ │ │ │ │ Rust编译产物 │ │ │ │ │ │ 线性内存 │ │ │ ← 共享ArrayBuffer │ │ └──────────────┘ │ │ │ └──────────────────┘ │ └──────────────────────────┘ WASM优势： - 接近原生性能 - 内存安全 - 可移植

📝 练习题

练习1：图像处理

用WASM实现灰度/模糊等图像处理。

练习2：游戏逻辑

将游戏逻辑用Rust实现，前端Canvas渲染。

练习3：npm发布

将WASM包发布到npm。

🏆

成就解锁：跨平台战士

掌握WASM——Rust在浏览器中运行

⬅ 上一课 🏠 目录下一课 ➡

🔬 深度理解：Rust工程实践

从学习到生产的桥梁——工程实践的关键要素：

1. 项目组织

Rust项目遵循workspace模式：核心逻辑在lib crate，二进制在bin crate，测试在独立目录。这确保了可测试性和可复用性。

2. 错误处理策略

库代码用Result传播错误，应用层用anyhow简化处理，CLI用自定义错误类型提供友好信息。

3. 配置管理

用serde解析配置文件，环境变量覆盖，合理默认值。十二因素应用方法论。

📊 Rust生产案例

公司/项目	用途	效果
Cloudflare	边缘计算	无GC停顿
Discord	消息服务	延迟降低40倍
Dropbox	文件同步	替代Go/Python
Linux内核	驱动开发	内存安全驱动
Amazon	Firecracker VM	125μs启动
Microsoft	Windows内核	安全改进

🚀 进阶方向

完成本课程后，你可以选择以下进阶方向：

系统编程深入：操作系统内核、驱动开发
分布式系统：用Rust构建分布式存储/计算
数据库开发：存储引擎、查询优化器
编译器/工具链：语言实现、静态分析
嵌入式/IoT：实时系统、固件开发
Web3/区块链：Solana、Polkadot等
游戏引擎：Bevy引擎开发

🧪 实战练习补充

以下练习帮助你将本课知识应用到实际场景：

练习A：代码审查

阅读以下代码片段，找出潜在问题并改进：

// 仔细阅读，思考有什么问题
fn process(data: Vec) -> Vec {
    let mut result = Vec::new();
    for i in 0..data.len() {
        result.push(data[i] * 2);
    }
    result
}

改进建议：使用迭代器、预分配容量、考虑溢出。

练习B：性能对比

用criterion基准测试对比以下实现的性能差异：

for循环 vs 迭代器
String拼接 vs write!宏
Vec::push vs Vec::with_capacity

练习C：API设计

为以下场景设计Rust API：一个支持过期时间的缓存系统。考虑所有权、错误处理和泛型。

📌 本课要点总结

通过本课的学习，你应该掌握以下核心要点：

理解Rust核心概念背后的设计哲学
能够将所学知识应用到实际编码中
知道何时选择哪种工具和模式
具备阅读和审查Rust代码的能力
能够独立解决编译器报告的问题

如果某个要点还不够清晰，回顾本课的代码示例和内存图，动手编写代码验证你的理解。

🔗 相关资源

The Rust Book — 官方教程
Rust by Example — 示例驱动学习
Rust Playground — 在线编写运行Rust
crates.io — Rust包仓库
docs.rs — 自动生成的文档
This Week in Rust — 社区周报
Rust用户论坛 — 问答社区

📚 扩展阅读

以下资源帮助你深入学习本课主题：

The Rust Programming Language — 官方教程，Rust圣经
Rust by Example — 通过示例学习Rust
Rust Reference — 语言参考手册
Rustnomicon — Unsafe Rust黑魔法指南
Too Many Lists — 用Rust实现各种链表

🔑 关键术语回顾

本课涉及的核心概念，确保你理解每一个：

术语	说明
所有权	Rust内存管理的核心机制，每个值有唯一所有者
借用	通过引用访问数据，不获取所有权
生命周期	引用有效的范围，编译期分析工具
trait	Rust的接口/抽象机制，类似其他语言的接口
泛型	参数化类型，零成本抽象
模式匹配	强大的数据解构和分支机制
零成本抽象	高层抽象不引入运行时开销
fearless concurrency	编译器保证线程安全

💬 学习建议

动手编码 — 每个代码示例都在本地运行一遍
修改实验 — 故意改错代码，看编译器报什么错
完成练习 — 每课的练习题是巩固知识的关键
阅读源码 — 看标准库和优秀开源项目的实现
写项目 — 真正掌握需要构建真实项目

🤔 常见问题

Q: Rust学习曲线真的很陡吗？

A: 前期确实需要适应所有权和借用检查器，但一旦理解了，这些概念会让你的代码更可靠。大多数人2-4周就能上手。

Q: Rust适合什么项目？

A: 系统编程、Web服务、CLI工具、嵌入式、WASM、网络服务、数据库等。基本上需要性能和安全的地方都适合。

Q: 遇到编译错误怎么办？

A: Rust编译器的错误信息非常友好！仔细阅读，通常会指出问题所在和修复建议。也可以用cargo clippy获取更多提示。