WASM-BINDGEN 搭起 Rust 与 JavaScript 的桥梁

随着WebAssembly（以下简称WASM）的兴起，各种高级语言都在探索如何将自己的生态系统与现代Web技术结合在一起。在这样的探索中，Rust语言凭借其安全性和性能成为了一个突出的选手。 wasm-bindgen 库和命令行工具是Rust在这方面的关键成果之一，它大大简化了Rust与JavaScript之间的相互操作。

什么是 WASM-BINDGEN？

wasm-bindgen 是一个旨在促进Rust和JavaScript高级互操作的工具。它通过生成的代码层，让两种语言像本地调用一样轻松交流。开发者可以直接从Rust调用JavaScript API，反之亦然，而不需要深入了解底层细节。对于开发者而言，这意味着他们可以专注于应用逻辑的实现，而不是被底层的复杂性所困扰。

wasm-bindgen的工作原理

wasm-bindgen 的核心功能是生成一层互操作代码，这一层代码能够「翻译」JavaScript和Rust之间的语义。它处理内存表示和调用语义上的差异，尤其是对于字符串和对象等复杂数据类型。

Rust to JavaScript:

当从Rust调用JavaScript函数时， wasm-bindgen 负责将Rust数据类型转换为JavaScript可以理解的类型。举例来说，如果你有一个Rust函数返回一个字符串， wasm-bindgen 将负责将这个Rust字符串转换为JavaScript字符串。

#[wasm_bindgen]
extern"C" {
#[wasm_bindgen(js_namespace = console)]
fnlog(s: &str);
}
#[wasm_bindgen]
pubfngreet(name: &str) {
log(&format!("Hello, {}!", name));
}

上面的代码展示了如何通过 wasm-bindgen 将Rust函数暴露给JavaScript，并调用JavaScript的 console.log 函数。

JavaScript to Rust:

反过来， wasm-bindgen 也支持从JavaScript调用Rust代码。它能够将JavaScript的数据类型转换为Rust理解的类型，并处理可能发生的任何内存管理任务。

import * as wasm from"./pkg/your_wasm_package";
wasm.greet("World");

上面的JavaScript代码导入了由 wasm-pack 打包的Rust项目，并调用了一个Rust函数。

使用wasm-bindgen的步骤

1. 编写Rust代码，并使用 #[wasm_bindgen] 标注需要暴露给JavaScript的函数。

2. 使用 wasm-pack build 构建项目，生成WASM二进制文件和必要的JavaScript绑定。

3. 在Web项目中导入生成的JavaScript模块，并像调用本地JavaScript函数一样使用Rust函数。

wasm-bindgen的高级特性

示例：Rust结构体与JavaScript对象的互操作

考虑这样一个Rust结构体，我们希望在JavaScript中作为一个对象使用。

#[wasm_bindgen]
pubstructPoint {
x: u32,
y: u32,
}
#[wasm_bindgen]
impl Point {
pubfnnew(x: u32, y: u32) -> Point {
Point { x, y }
}
pubfnx(&self) -> u32 {
self.x
}
pubfny(&self) -> u32 {
self.y
}
pubfnmove_by(&mutself, dx: u32, dy: u32) {
self.x += dx;
self.y += dy;
}
}




在JavaScript中，使用这个结构体会像下面这样：

import * as wasm from"./pkg/your_wasm_package";
const point = wasm.Point.new(10, 10);
console.log(point.x(), point.y()); // 输出: 10 10
point.move_by(5, 7);
console.log(point.x(), point.y()); // 输出: 15 17


通过上述的示例，我们可以看到 wasm-bindgen 的强大之处：轻松在Rust和JavaScript之间进行复杂类型的转换和互操作。

结语

wasm-bindgen 是一把锐利的工具，它打破了传统Web开发的边界，将Rust的安全性和性能带到了前端世界。随着这项技术的成熟，无疑将会有更多的开发者受益，用以构建更高效、安全的Web应用。

WASM-BINDGEN不仅解决了内存管理和类型转换的问题，还提供了一个便捷的接口来利用JavaScript的生态系统，这为Rust在Web领域的应用带来了新的可能性。随着WASM的生态系统不断发展，Rust加上 wasm-bindgen 的组合将会在未来的Web开发中占据一席之地。

有了这样深入且详细的理解，希望能够助您在使用 wasm-bindgen 进行WebAssembly开发时更加得心应手。

文章精选

点 击 关 注 并 扫 码 添 加 进 交 流 群

领 取 「Rust 语 言 」 学 习 资 料