简体中文

WebAssembly 教程

WebAssembly - WASM：初学者的指南

你好啊，未来的编程超级巨星！我很高兴能成为你进入WebAssembly世界的导游，简称WASM。别担心你之前从未写过一行代码——我们将从最基础的知识开始，一起逐步学习。所以，拿起你最喜欢的饮料，坐舒适些，让我们开始吧！

WebAssembly - WASM

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))
)

别慌！我知道这现在看起来像外星语言，但让我们分解一下：

  1. (module): 这就像说“这是一本新的食谱书”。
  2. (func $add ...): 我们正在定义一个名为"add"的新函数（或食谱）。
  3. (param $a i32) (param $b i32): 我们的函数需要两个食材（参数），都是32位整数。
  4. (result i32): 结果也将是一个32位整数。
  5. local.get $a: 把第一个数字放在我们盘子堆的顶部。
  6. local.get $b: 把第二个数字放在第一个数字的上面。
  7. i32.add: 把顶部的两个数字相加，并用结果替换它们。

所以，如果我们用5和3调用这个函数，我们的栈看起来会像这样：

  1. 从一个空的栈开始：[]
  2. 执行local.get $a后：[5]
  3. 执行local.get $b后：[5, 3]
  4. 执行i32.add后：[8]

就这样！我们用WebAssembly的栈机模型加了两数。

为什么使用WebAssembly？

你可能想知道，“这看起来很复杂。为什么不用JavaScript？”好问题！WebAssembly有一些超能力，使它变得特别：

  1. 速度：对于某些任务，WebAssembly可以比JavaScript运行得更快。
  2. 效率：它使用更少的内存和处理能力。
  3. 语言灵活性：你可以用像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))
)

这可能看起来很熟悉——它和我们的前一个例子非常相似！这是它做什么的：

  1. 定义一个模块（我们的程序）。
  2. 创建一个名为$add的函数，它接受两个32位整数并返回一个。
  3. 获取第一个数字（$left）并将其放在栈上。
  4. 获取第二个数字（$right）并将其放在第一个数字的上面。
  5. 在栈上添加两个数字。
  6. 导出这个函数，以便我们可以在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

上一教程:
WebAssembly - 简介
下一教程:
WebAssembly - 安装