将函数导出到 JS

现在我们已经对 JS 对象以及它们的工作原理有了很好的理解，让我们来看看 `wasm-bindgen` 的另一个功能：使用比数字更丰富的类型导出功能。

使用更丰富的类型导出功能的基本思想是，wasm 导出实际上不会被直接调用。相反，生成的 `foo.js` 模块将为 wasm 模块中的所有导出函数提供垫片。

这里最有趣的转换发生在字符串上，所以让我们来看看它。

#![allow(unused)]
fn main() {
#[wasm_bindgen]
pub fn greet(a: &str) -> String {
    format!("Hello, {}!", a)
}
}

这里我们想定义一个看起来像这样的 ES 模块

// foo.d.ts
export function greet(a: string): string;

为了了解发生了什么，让我们来看看生成的垫片

import * as wasm from './foo_bg';

function passStringToWasm(arg) {
  const buf = new TextEncoder('utf-8').encode(arg);
  const len = buf.length;
  const ptr = wasm.__wbindgen_malloc(len, 1);
  let array = new Uint8Array(wasm.memory.buffer);
  array.set(buf, ptr);
  return [ptr, len];
}

function getStringFromWasm(ptr, len) {
  const mem = new Uint8Array(wasm.memory.buffer);
  const slice = mem.slice(ptr, ptr + len);
  const ret = new TextDecoder('utf-8').decode(slice);
  return ret;
}

export function greet(arg0) {
  const [ptr0, len0] = passStringToWasm(arg0);
  try {
    const ret = wasm.greet(ptr0, len0);
    const ptr = wasm.__wbindgen_boxed_str_ptr(ret);
    const len = wasm.__wbindgen_boxed_str_len(ret);
    const realRet = getStringFromWasm(ptr, len);
    wasm.__wbindgen_boxed_str_free(ret);
    return realRet;
  } finally {
    wasm.__wbindgen_free(ptr0, len0, 1);
  }
}

哇，真多！不过如果我们仔细观察，就能大致了解发生了什么

字符串通过两个参数传递给 wasm：一个指针和一个长度。现在我们必须将字符串复制到 wasm 堆上，这意味着我们将使用 `TextEncoder` 来进行实际的编码。完成此操作后，我们将使用 `wasm-bindgen` 中的内部函数为字符串分配空间，然后稍后将该 ptr/len 传递给 wasm。
从 wasm 返回字符串有点棘手，因为我们需要返回一个 ptr/len 对，但 wasm 目前只支持一个返回值（多个返回值正在标准化）。为了解决这个问题，我们实际上返回一个指向 ptr/len 对的指针，然后使用函数来访问各个字段。
wasm 中会发生一些清理。`__wbindgen_boxed_str_free` 函数用于在将 `greet` 的返回值解码到 JS 堆上（使用 `TextDecoder`）后释放它。然后，`__wbindgen_free` 用于释放我们为传递字符串参数而分配的空间，一旦函数调用完成。

接下来，我们也来看看 Rust 方面的代码。这里我们将看到一个简化的版本，可以理解为它编译后的结果。

#![allow(unused)]
fn main() {
pub extern "C" fn greet(a: &str) -> String {
    format!("Hello, {}!", a)
}

#[export_name = "greet"]
pub extern "C" fn __wasm_bindgen_generated_greet(
    arg0_ptr: *const u8,
    arg0_len: usize,
) -> *mut String {
    let arg0 = unsafe {
        let slice = ::std::slice::from_raw_parts(arg0_ptr, arg0_len);
        ::std::str::from_utf8_unchecked(slice)
    };
    let _ret = greet(arg0);
    Box::into_raw(Box::new(_ret))
}
}

这里我们可以再次看到，我们的 greet 函数没有修改，并且有一个包装器来调用它。这个包装器将接收指针/长度参数并将其转换为字符串切片，而返回值则被包装成一个指针，然后通过 __wbindgen_boxed_str_* 函数返回给 was 进行读取。

因此，一般来说，导出函数需要在 JS 和 Rust 中都使用一个 shim，每一方都将 wasm 参数转换为各自语言的原生类型。wasm-bindgen 工具负责连接所有这些 shim，而 #[wasm_bindgen] 宏则负责 Rust 侧的 shim。

大多数参数都有一个相对清晰的转换方式，但如果您有任何问题，请告诉我！

`wasm-bindgen` 指南

将函数导出到 JS