WebAssembly - JavaScript API：初學者指南

你好啊，未來的編程超新星！? 今天，我們將踏上一段令人興奮的旅程，進入 WebAssembly 和它的 JavaScript API 的世界。別擔心如果你之前從未寫過一行代碼——我將成為你的友好導遊，我們會一步一步地進行。在這個教學結束時，你將對你能夠使用 WebAssembly 來做的事情感到驚奇！

WebAssembly 是什麼？

在我們深入 JavaScript API 之前，讓我們快速了解一下 WebAssembly 是什麼。想像你有一輛超級快速的賽車（那就是 WebAssembly），它能在你的網頁浏览器中飛馳，讓你的網頁應用程序以閃電般的速度運行。但要想開這輛車，你需要一個特別的鑰匙——那就是 JavaScript API 的用處。它就像一個接口，讓 JavaScript（你經常在網頁開發中使用的語言）能夠與 WebAssembly 通信和控制。

現在，讓我們探索這個 API 的不同部分，從我們如何將 WebAssembly 代碼放入我們的網頁開始。

fetch() Browser 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