WebAssembly - 模块

你好，有抱负的程序员們！今天，我們將踏上一段令人興奮的旅程，探索WebAssembly模塊的世界。別擔心如果你是編程新手——我將成為你的友好導遊，我們會一步步來。在本課結束時，你將對WebAssembly模塊及其工作原理有堅實的了解。讓我們開始吧！

WebAssembly - Modules

WebAssembly是什麼？

在我們討論模塊之前，讓我們快速了解一下WebAssembly是什麼。想像你正在建造沙堡。WebAssembly就像是一個特別的桶，讓你建造的城堡比以往更快、更坚固。在網頁開發的世界裡，WebAssembly是一種低級語言，它在瀏覽器中運行，實現接近本地性能的運行。

步驟1：了解WebAssembly模塊

WebAssembly模塊是WebAssembly應用的積木。把它們想像成樂高積木——每個模塊都是一個自包含的單元，可以與其他模塊組合，創造出令人驚奇的事物。

關鍵概念

二進制格式：模塊通常以二進制格式（.wasm文件）分發。
編譯：這些模塊從如C、C++或Rust等語言編譯而來。
導入和導出：模塊可以導入功能並導出它們自己的函數。

步驟2：創建和使用WebAssembly模塊

現在，讓我們走過創建和使用WebAssembly模塊的過程。

2.1 寫作WebAssembly模塊

首先，我們需要寫我們的模塊。我們將使用一個簡單的C函數作為例子：

// add.c
int add(int a, int b) {
return a + b;
}

這個函數將兩個數字相加。簡單吧？但我們如何將這個轉換成WebAssembly模塊呢？

2.2 編譯到WebAssembly

為了將這個編譯到WebAssembly，我們使用一個叫做Emscripten的工具。這裡是命令：

emcc add.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -o add.js

這個命令創建了兩個文件：

add.wasm：我們的WebAssembly模塊
add.js：加載和使用我們模塊的JavaScript粘合代碼

2.3 在JavaScript中加載模塊

現在，讓我們看看我們如何在網頁中使用這個模塊：

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly Add Function</title>
</head>
<body>
<h1>WebAssembly Add Function</h1>
<p>結果: <span id="result"></span></p>
<script src="add.js"></script>
<script>
Module.onRuntimeInitialized = async _ => {
const result = Module._add(5, 3);
document.getElementById('result').textContent = result;
};
</script>
</body>
</html>

代碼解釋

讓我們分解一下這段代碼中發生了什麼：

我們包含了add.js文件，它加載我們的WebAssembly模塊。
我們使用Module.onRuntimeInitialized來確保在使用的模塊已經加載。
我們調用我們的add函數使用Module._add(5, 3)。
結果顯示在頁面上。

示例：一個更複雜的模塊

現在，我們已經看到了一個簡單的例子，讓我們嘗試一些更複雜的東西。我們將創建一個計算數字階乘的模塊。

// factorial.c
int factorial(int n) {
if (n <= 1) return 1;
return n * factorial(n - 1);
}

以相同的方式編譯：

emcc factorial.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_factorial"]' -o factorial.js

現在，讓我們在HTML中使用它：

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly Factorial</title>
</head>
<body>
<h1>WebAssembly Factorial Calculator</h1>
<input type="number" id="input" value="5">
<button onclick="calculateFactorial()">計算</button>
<p>結果: <span id="result"></span></p>
<script src="factorial.js"></script>
<script>
function calculateFactorial() {
const n = document.getElementById('input').value;
const result = Module._factorial(n);
document.getElementById('result').textContent = result;
}

Module.onRuntimeInitialized = async _ => {
calculateFactorial();
};
</script>
</body>
</html>

輸出

當你在瀏覽器中運行這個時，你會看到一個輸入字段，你可以在其中輸入一個數字。點擊"計算"按鈕會顯示該數字的階乘，全部使用我們的WebAssembly模塊計算！

結論

恭喜你！你剛剛踏入了WebAssembly模塊世界的第一步。我們已經介紹了創建、編譯和在使用WebAssembly模塊在網頁應用中的基本知識。記住，這只是開始——WebAssembly為網頁開發打開了一個全新的世界，讓你能夠將高性能計算帶到瀏覽器中。

隨著你繼續你的旅程，你將發現WebAssembly可以用於從遊戲到複雜數據處理的一切。持續實驗，並不要害怕推動瀏覽器可能的邊界！

方法	描述
Module.onRuntimeInitialized	確保WebAssembly模塊完全加載後再使用
Module._functionName	调用从WebAssembly模塊导出的函数
emcc	Emscripten编译器命令，用于创建WebAssembly模塊

記住，學習WebAssembly就像學習騎自行車一樣——起初可能會有些棘手，但隨著練習，你會很快馳騁。快樂編程！

Credits: Image by storyset

上一教程:

WebAssembly - 「你好，世界"

下一教程:

WebAssembly - 驗證