Rust 编译为WebAssembly 在前端项目中使用( 五 ) _Rust

export function __wbg_alert_9ea5a791b0d4c7a3() { return logError(function (arg0, arg1) {alert(getStringFromWasm0(arg0, arg1));}, arguments) };这是wasm-bindgen提供的「粘合部分」，帮助我们在WebAssembly中使用JavaScript函数或DOM 。
最后，让我们看看wasm-bindgen生成的其他文件。
hello_world.d.ts这个.d.ts文件包含JavaScript粘合的TypeScript类型声明，如果我们的现有JavaScript应用程序正在使用TypeScript，它会很有用。我们可以对调用WebAssembly函数进行「类型检查」，或者让我们的IDE提供自动完成。如果我们不使用TypeScript，可以安全地忽略这个文件。
package.jsonpackage.json文件包含有关生成的JavaScript和WebAssembly包的元数据。它会自动从我们的Rust代码中填充所有npm依赖项，并使我们能够发布到npm 。
4. 内容拓展再次看一下以下代码：
hello_world_bg.jsfunction helloworld(name) {const ptr0 = passStringToWasm0(name, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);const len0 = WASM_VECTOR_LEN;wasm.helloworld(ptr0, len0);}该代码用于分配和释放内存，这一切都是「由程序自动处理」的。不需要垃圾回收器或完整的框架引擎，使得使用Rust编写的WebAssembly应用程序或模块变得小巧且优化。其他需要垃圾回收器的语言将需要包含用于其底层框架引擎的wasm代码。因此，无论它们有多么优化，其大小都不会小于Rust提供的大小。这使得Rust WebAssembly成为一个不错的选择，如果我们需要将小型WebAssembly模块集成或注入到JavaScript Web应用程序中。
除了Hello World之外，还有一些其他需要注意的事项：
web-sys使用wasm-bindgen，我们可以通过使用extern在Rust WebAssembly中调用JavaScript函数。请记住src/lib.rs中的以下代码：
#[wasm_bindgen]extern "C" {fn alert(s: &str);}Web具有大量API，从DOM操作到WebGL再到Web Audio等等。因此，如果我们的Rust WebAssembly程序增长，并且我们需要对Web API进行多次不同的调用，我们将需要花时间编写大量的extern代码。

?
web-sys充当wasm-bindgen的前端，为所有Web API提供原始绑定。
?

这意味着如果我们使用web-sys，可以节省时间，而不必编写extern代码。

文章插图
图片
引入web-sys将web-sys添加为Cargo.toml的依赖项：
[dependencies]wasm-bindgen = "0.2"[dependencies.web-sys]version = "0.3"features = []为了保持构建速度非常快，web-sys将每个Web接口都封装在一个Cargo特性后面。在API文档中找到我们要使用的类型或方法；它将列出必须启用的特性才能访问该API 。
例如，如果我们要查找window.resizeTo函数，我们会在API文档中搜索resizeTo 。我们将找到web_sys::Window::resize_to函数，它需要启用Window特性。要访问该函数，我们在Cargo.toml中启用Window特性：
[dependencies.web-sys]version = "0.3"features = ["Window"]调用这个方法：

use wasm_bindgen::prelude::*;use web_sys::Window;#[wasm_bindgen]pub fn make_the_window_small() {// 调整窗口大小为500px x 500px 。let window = web_sys::window().unwrap();window.resize_to(500, 500).expect("无法调整窗口大小");}

这段代码的目的是调整浏览器窗口的大小为500x500像素，并演示了如何使用web-sys和启用的Cargo特性来调用Web API 。