WebAssembly - JavaScript API：初学者的指南

你好啊，未来的编程巨星！? 今天，我们将踏上一段激动人心的旅程，探索WebAssembly及其JavaScript API的世界。如果你之前从未编写过一行代码，也不用担心——我会成为你的友好向导，我们会一步步前行。在这个教程结束时，你将会对你能用WebAssembly做些什么感到惊讶！

WebAssembly是什么？

在我们深入JavaScript API之前，让我们快速了解一下WebAssembly是什么。想象你有一辆超级快速的赛车（那就是WebAssembly），它能在你的网页浏览器中飞驰，让你的网络应用程序以闪电般的速度运行。但是要驾驶这辆车，你需要一个特殊的钥匙——这就是JavaScript API的作用。它就像一个接口，让JavaScript（你经常在网页开发中使用的语言）能够与WebAssembly交谈和控制。

现在，让我们探索这个API的不同部分，从我们如何将WebAssembly代码放入我们的网页开始。

fetch()浏览器API：获取你的WebAssembly模块

使用WebAssembly的第一步是获取WebAssembly模块。把这想象成你去商店购买你的赛车。我们使用fetch()函数，这是浏览器API的一部分，来完成这个操作。

下面是一个例子：

fetch('my_wasm_module.wasm')
.then(response => response.arrayBuffer())
.then(bytes => WebAssembly.instantiate(bytes))
.then(result => {
// 在这里使用WebAssembly模块
});

让我们分解一下：

1. fetch('my_wasm_module.wasm')：这行代码告诉浏览器去获取我们的WebAssembly文件。
2. .then(response => response.arrayBuffer())：一旦我们得到响应，我们就将其转换为ArrayBuffer（可以认为是文件的原始数据）。
3. .then(bytes => WebAssembly.instantiate(bytes))：现在我们用这些字节创建一个WebAssembly实例（稍后会详细介绍）。
4. .then(result => { ... })：最后，我们可以使用我们的WebAssembly模块！

WebAssembly.compile()：准备你的模块

现在我们有了WebAssembly文件，我们需要编译它。这就好比在我们能驾驶赛车之前先组装它。

WebAssembly.compile(wasmBuffer)
.then(module => {
// 使用编译后的模块
});

在这个例子中，wasmBuffer是我们从fetch()调用中得到的ArrayBuffer。compile()函数取这个缓冲区并将其转换为一个我们可以使用的WebAssembly模块。

WebAssembly.Instance：你的即用模块

一个实例就像一辆准备好的汽车。它是一个已初始化并准备好运行的WebAssembly模块。

WebAssembly.instantiate(wasmModule)
.then(instance => {
// 使用实例
let result = instance.exports.myFunction(5, 3);
console.log(result);
});

在这里，wasmModule是我们之前编译的模块。instantiate()函数创建了这个模块的一个实例。然后我们可以使用我们的WebAssembly模块导出的函数，如这个例子中的myFunction。

WebAssembly.instantiate：一站式方法

WebAssembly.instantiate就像一个一站式商店。它可以接受二进制代码（ArrayBuffer）或编译后的模块，并返回编译后的模块和实例。

WebAssembly.instantiate(wasmBuffer, importObject)
.then(result => {
const instance = result.instance;
const module = result.module;
// 使用实例和模块
});

在这个例子中，wasmBuffer是我们的原始WebAssembly代码，importObject是一个包含要导入到WebAssembly模块中的值的对象（比如WebAssembly代码可以调用的JavaScript函数）。

WebAssembly.instantiateStreaming：速度恶魔

最后但同样重要的是，我们有instantiateStreaming。这就好比你的赛车被送到门口并组装好，准备好驾驶！

WebAssembly.instantiateStreaming(fetch('my_wasm_module.wasm'), importObject)
.then(result => {
const instance = result.instance;
// 使用实例
});

这个函数将fetch()和实例化步骤合为一，使得它成为启动你的WebAssembly模块的最快方式。

方法总结

下面是一个方便的表格，总结了我们学到的方法：

方法	描述
fetch()	获取WebAssembly文件
WebAssembly.compile()	编译WebAssembly模块
WebAssembly.Instance	代表一个WebAssembly实例
WebAssembly.instantiate	编译并实例化一个WebAssembly模块
WebAssembly.instantiateStreaming	一步完成获取、编译和实例化WebAssembly模块

就这样！你已经迈出了进入WebAssembly及其JavaScript API世界的第一步。记住，学习编程就像学习驾驶——它需要练习，但很快你就能在信息高速公路上像专业人士一样飞驰！

继续实验，继续学习，最重要的是，享受乐趣！谁知道呢？也许下一次你就是教这门课的人呢！?

Credits: Image by storyset