WebAssembly 很简单——一个 Hello World 示例

介绍

WASM 中的第一个“Hello World”

如何运行它

结论

视频

介绍

我喜欢把WebAssembly理解为Assembly。它提供了一些简单的积木，你可以排列和组合它们来创建几乎任何东西。这有点像玩乐高积木。

然而，作为一项新技术，它存在一些入门门槛，可能会让那些想要尝试的人望而却步。通常被称为 WASM 和 JS 之间“粘合剂”的代码并不美观，需要你对 WASM 有更深入的了解才能理解或整合。

但是有一些方法可以让 WebAssembly 开发变得轻松有趣。我将在下面讨论这些方法。

WASM 中的第一个“Hello World”

尝试用一门新语言编写一个“Hello World”应用程序已经成为一种传统。通常，这会将这些单词打印到标准输出或其他可视化方式。

不过，在 WASM 中情况略有不同。“Hello World”的对应代码通常是一个加法函数，它接受两个整数参数并返回它们的和。我们不尝试打印字符串是有充分理由的。字符串在 WebAssembly 中不存在。我们可以在内存中存储一​​个字节字符串，该字符串经过了编码，但任何操作都必须在字节级别进行。
这是我们在 WASM（文本格式）中的加法函数：

(module
  (func (export "add") (param $n1 i32) (param $n2 i32) (result i32)
    get_local $n1
    get_local $n2
    i32.add
  )
)

让我们快速分解一下，逐行看看发生了什么：

1. 我们声明一个新模块。所有 WebAssembly 代码都必须包含在该模块中。
2. 声明一个以 为名导出的函数add。这样我们就可以在 JS 中使用 来调用它add()。然后，我们指定它有两个 32 位整数类型的参数，分别为$n1和$n2。最后，我们指定我们的函数将返回另一个 32 位整数。
3. $n1从本地内存放入堆栈。
4. $n2从本地内存放入堆栈。
5. 内置i32.add函数将从堆栈中取出最后两个值，将它们相加并返回总和。

差不多就是这样了。语法不像 C/JS，但很容易理解。每个元素都是一个节点，我们可以将节点嵌套在其他节点中，这些节点充当参数。

如何运行它

现在您已经有了第一个 WebAssembly 应用程序，您需要一种快速简便的方法来测试它。而这正是人们经常遇到的问题。

为了测试此函数，您需要将 WASM 代码加载到 JavaScript 中并从中调用它。我们的目标是能够使用add()两个参数调用函数并读取输出数字。

据我所知，最简单的方法是使用inline-webassembly NPM 包。最终你会得到如下的 JS 文件：

const iw = require('inline-webassembly');

iw(`
  (module
    (func (export "add") (param $n1 i32) (param $n2 i32) (result i32)
      get_local $n1
      get_local $n2
      i32.add
    )
  )`
).then((wasmModule) => {
  const sum = wasmModule.add(44, 99);
  console.log(`Sum = ${sum}`); // 143
});

结论

现在您知道如何轻松创建和使用 WebAssembly 代码，没有什么可以阻止您使用 WASM 重构代码中性能关键部分。

组装愉快！

视频