18 WebAssembly与JavaScript交互之从WebAssembly返回值

在前一篇文章中，我们探讨了如何从JavaScript调用WebAssembly函数，并介绍了基本的调用机制和示例。在本篇中，我们将重点关注如何将值从WebAssembly返回给JavaScript。这一步是实现WebAssembly与JavaScript交互的重要环节，让我们通过详细的步骤和示例来深入理解这个过程。

WebAssembly返回值基础

WebAssembly支持基本值（如整数、浮点数等）作为返回值。我们需要明白的是，这些返回值在操作和存储时要经过一定的转换，以便JavaScript可以处理。

WebAssembly函数返回值类型

WebAssembly支持多种基本类型的返回值，主要有：

• i32：32位整数
• i64：64位整数
• f32：32位浮点数
• f64：64位浮点数

当前我们将以一个简单的示例为基础，显示如何定义一个返回值的WebAssembly函数，并将其结果传递回JavaScript。

创建WebAssembly模块

首先，我们需要创建一个WebAssembly模块，我们将使用WasmTextFormat（.wat文件）编写代码。以下是一个简单的WebAssembly模块示例，它将返回两个数的和。

示例：Wasm文本格式

(module
  (func $add (param $a i32) (param $b i32) (result i32)
    ;; 返回两个参数的和
    local.get $a
    local.get $b
    i32.add)
  
  ;; 导出函数 $add
  (export "add" (func $add))
)

在这个模块中，我们定义了一个名为$add的函数，它接受两个i32类型的参数并返回它们的和。

编译WebAssembly模块

接下来，我们需要将这个.wat文件编译为.wasm文件。可以使用wat2wasm工具进行转换：

wat2wasm add.wat

JavaScript代码调用WebAssembly函数并获取返回值

一旦我们有了编译好的.wasm模块，我们接下来就可以在JavaScript中加载它并调用返回值的函数。

示例：JavaScript代码

// 加载WebAssembly模块
async function loadWasm() {
    const response = await fetch('add.wasm');
    const bytes = await response.arrayBuffer();
    const { instance } = await WebAssembly.instantiate(bytes);

    // 调用WebAssembly函数并获取返回值
    const a = 10;
    const b = 20;
    const result = instance.exports.add(a, b);

    console.log(`The sum of ${a} and ${b} is ${result}`);
}

loadWasm();

在上面的代码中，我们通过fetch加载add.wasm文件，使用WebAssembly.instantiate函数将其实例化。随后，我们调用了add函数，并将两个参数传递给它。最终，我们将结果输出到控制台。

注意事项

1. 数据类型匹配：确保传递给WebAssembly的参数与定义的类型匹配。如果类型不匹配，可能导致错误或未定义的行为。
2. 转换数值：在交互中，如果需要处理不同类型的值（如f32和f64），请确保正确转换。
3. 异步加载：WebAssembly的加载通常是异步的，因此需要使用async/await来处理。

总结

在本篇文章中，我们详细探讨了如何从WebAssembly返回值至JavaScript。我们创建了一个简单的WebAssembly模块，通过JavaScript加载并调用它，成功获取了返回值。这为继续深入讨论调试及性能优化奠定了基础。在下一篇中，我们将研究如何使用浏览器调试工具对WebAssembly模块进行调试和性能优化，敬请期待！

通过对WebAssembly与JavaScript交互的理解，我们可以更有效地利用WebAssembly来提升性能，同时保持良好的用户体验。