如何从 JS 调用 Rust 并能够获取返回值？

在 JavaScript 中调用 Rust 并获取返回值的通常做法是通过使用 WebAssembly (Wasm)。WebAssembly 允许你在几乎所有现代浏览器中以接近本地性能运行编译好的代码，而 Rust 是生成 WebAssembly 代码的流行选择之一。

操作步骤：

1. 编写 Rust 代码：首先，创建一个 Rust 项目，并编写你想要从 JavaScript 调用的函数。

2. 编译为 WebAssembly：使用 wasm-pack、cargo-wasm 或其他工具将 Rust 代码编译为 WebAssembly 模块。

3. 集成至 JavaScript 项目：在你的 JavaScript 代码中，使用 WebAssembly 的 API 加载编译好的 .wasm 文件。

4. 调用 Rust 函数：一旦加载了 WebAssembly 模块，你就可以像调用普通的 JavaScript 函数一样调用 Rust 函数，并获取返回值。

下面是一个详细的步骤示例：

第一步：编写 Rust 代码

假设我们有一个简单的 Rust 函数，它计算两个数字的和。

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

#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}

第二步：编译为 WebAssembly

在 Rust 项目目录中，使用 wasm-pack 构建项目。如果你还没有安装 wasm-pack，可以从其官方网站下载并安装。

sh
wasm-pack build --target web

这个命令会生成一个包含 .wasm 文件和一个帮助你加载 Wasm 模块的 JS 脚本的目录。

第三步：集成至 JavaScript 项目

将编译得到的 Wasm 代码和生成的 JS 脚本包含在你的 JavaScript 项目中。

html
<!-- index.html -->
<script type="module">
  import init, { add } from './pkg/your_project_name.js';

  async function run() {
    await init(); // 初始化 Wasm 模块
    const sum = add(2, 3); // 调用 Rust 函数
    console.log(sum); // 输出: 5
  }

  run();
</script>

这个例子假设生成的 JS 和 Wasm 文件位于 './pkg/' 目录下，并且你的项目名为 'your_project_name'。init 函数负责初始化 Wasm 模块，然后你就可以像调用普通 JavaScript 函数一样调用 add 函数了。

注意事项：

• 你需要有一定的 Rust 和 JavaScript 开发背景。
• 确保 Rust 工具链和 wasm-bindgen 已经安装在你的机器上。
• 在某些情况下，可能需要对生成的 Wasm 和 JavaScript 代码进行额外的配置或优化。
• 如果你的模块比较大，或者涉及到复杂的数据类型，可能需要使用 WebAssembly 的内存和表格API来进行更复杂的操作。