WebAssembly - WASM：初學者指南
Hello there, future coding superstar! I'm thrilled to be your guide on this exciting journey into the world of WebAssembly, or WASM for short. Don't worry if you've never written a line of code before – we're going to start from the very beginning and work our way up together. So, grab a cup of your favorite beverage, get comfortable, and let's dive in!
什麼是WebAssembly？
WebAssembly就像是一種網絡浏览器理解的秘密语言。它被设计成让网页应用程序运行得更快、更高效。想象一下你在网站上尝试玩一个复杂的视频游戏。没有WebAssembly，它可能会很慢且操作不流畅。但是有了WebAssembly，它就可以运行得非常平滑，几乎就像在游戏机上玩一样！
简短历史
WebAssembly诞生于让网页应用程序更强大的愿望。它最初在2015年宣布，到2017年，所有主流网络浏览器都支持它。这在技术世界里是非常快的——就像你喜欢的社交媒体应用更新新功能一样快！
栈机模型
现在，让我们来谈谈一些听起来有点技术性但实际上分解后非常简单的概念：栈机模型。这就是WebAssembly工作的心脏。
什麼是栈？
想象一下栈就像是一堆盘子。你只能从堆的顶部添加或移除盘子。在计算机术语中，我们称向栈中添加为“推入”，从栈中移除为“弹出”。
WebAssembly如何使用栈
WebAssembly使用这个栈的概念来执行操作。就像一个非常高效的厨师在厨房里，总是知道下一个要用哪个食材（或者在我们的例子中是数字）。
让我们看一个简单的例子：
(module
(func $add (param $a i32) (param $b i32) (result i32)
local.get $a
local.get $b
i32.add)
(export "add" (func $add))
)别紧张！我知道这现在看起来像外星语言，但让我们分解一下：
-
(module): 这就像说“这里是一本新的食谱书”。 -
(func $add ...): 我们正在定义一个名为“add”的新函数（或食谱）。 -
(param $a i32) (param $b i32): 我们的函数接受两个参数（食材），都是32位整数。 -
(result i32): 结果也将是一个32位整数。 -
local.get $a: 把第一个数字放在我们的盘子堆栈顶部。 -
local.get $b: 把第二个数字放在顶部。 -
i32.add: 把顶部的两个数字相加并用结果替换它们。
所以，如果我们用5和3调用这个函数，我们的栈看起来会是这样：
- 从一个空栈开始：
[] - 执行
local.get $a后：[5] - 执行
local.get $b后：[5, 3] - 执行
i32.add后：[8]
就这样！我们使用WebAssembly的栈机模型添加了两个数字。
为什麼使用WebAssembly？
你可能在想，“这看起来很复杂。为什么不直接使用JavaScript？”好问题！WebAssembly有一些超级能力，让它变得特别：
- 速度：对于某些任务，WebAssembly可以比JavaScript运行得更快。
- 效率：它使用更少的内存和处理能力。
- 语言灵活性：你可以用像C++或Rust这样的语言编写代码，并将其转换为WebAssembly。
想象一下你在建造沙堡。JavaScript就像是用手——它灵活且容易上手。WebAssembly就像拥有一套专用工具——它可能需要更多的设置，但你可以建造更复杂、更坚固的城堡！
你的第一个WebAssembly程序
让我们写一个简单的程序来添加两个数字。我们将使用一种叫做WAT（WebAssembly文本格式）的语言，它是WebAssembly的一种人类可读的版本。
(module
(func $add (param $left i32) (param $right i32) (result i32)
local.get $left
local.get $right
i32.add)
(export "add" (func $add))
)这看起来可能很熟悉——它和我们的前一个例子非常相似！这是它所做的：
- 定义一个模块（我们的程序）。
- 创建一个名为
$add的函数，接受两个32位整数并返回一个。 - 获取第一个数字（
$left）并将其放在栈上。 - 获取第二个数字（
$right）并将其放在第一个数字的上面。 - 将栈上的两个数字相加。
- 导出函数，以便我们可以在JavaScript中使用它。
要在网页中使用它，我们需要一点JavaScript：
fetch('add.wasm')
.then(response => response.arrayBuffer())
.then(bytes => WebAssembly.instantiate(bytes))
.then(results => {
const add = results.instance.exports.add;
console.log(add(5, 3)); // 输出：8
});这段代码加载我们的WebAssembly模块，创建一个其实例，然后调用我们的add函数，传入数字5和3。
结论
恭喜你！你已经踏入了WebAssembly的世界。我们介绍了WebAssembly是什么，它是如何使用栈机模型的，甚至写了我们的第一个WebAssembly程序。
记住，学习编码就像学习一门新语言或乐器——它需要练习和耐心。如果一切不是立刻就能理解，不要气馁。继续尝试，继续学习，不久之后，你将用WebAssembly构建惊人的东西！
在我们的下一课中，我们将深入了解更多复杂的WebAssembly概念，并开始构建一些非常酷的项目。在此之前，祝你编码愉快！
Credits: Image by storyset