WebAssembly - 模块

你好，有抱负的程序员们！今天，我们将踏上一段激动人心的旅程，探索WebAssembly模块的世界。如果你是编程新手，不用担心——我将作为你的友好向导，我们会一步步地进行。在本课结束时，你将拥有关于WebAssembly模块及其工作方式的坚实基础。让我们开始吧！

WebAssembly - Modules

WebAssembly是什么？

在我们讨论模块之前，让我们快速了解一下WebAssembly是什么。想象你正在建造一座沙堡。WebAssembly就像一个特殊的桶，让你能够比以前更快、更坚固地建造城堡。在网页开发的世界中，WebAssembly是一种在浏览器中运行的低级语言，允许接近本地性能的运行。

第一步：理解WebAssembly模块

WebAssembly模块是WebAssembly应用程序的构建块。可以把它们想象成乐高积木——每个模块都是一个独立的单元，可以与其他模块组合，创造惊人的东西。

关键概念

二进制格式：模块通常以二进制格式（.wasm文件）分发。
编译：这些模块从诸如C、C++或Rust等语言编译而来。
导入和导出：模块可以导入功能，并导出它们自己的函数。

第二步：创建和使用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 加法函数</title>
</head>
<body>
<h1>WebAssembly 加法函数</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来确保在调用之前模块已经加载完毕。
我们使用Module._add(5, 3)调用我们的add函数。
结果显示在页面上。

示例：一个更复杂的模块

现在我们已经看到了一个简单的示例，让我们尝试一个更复杂的。我们将创建一个计算数字阶乘的模块。

// 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 阶乘</title>
</head>
<body>
<h1>WebAssembly 阶乘计算器</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 - 验证