WebAssembly入门系列第4部分：WebAssembly和JavaScript的伴侣关系
在WebAssembly初学者系列的第4部分中，我们将仔细研究WebAssembly和JavaScript之间的关系。
在这里，您将学习如何在JavaScript中使用WebAssembly。此外，我们还将探索WebAssembly JavaScript API。
WebAssembly是一种二进制格式的开放标准，使开发人员能够在浏览器上以本机性能运行应用程序。如果您还没有阅读过有关它的信息，我们建议您查看我们指南中的前几部分。
- WebAssmebly for Beginners Part 1: An Introduction to WASM
- WebAssembly for Beginners Part 2: Goals, Key Concepts, and Use Cases
- WebAssembly for Beginners Part 3: How WASM Portability and Security Works
让我们开始吧。
使用JavaScript与WebAssembly
在我们的WebAssembly第1部分教程中，我们讨论了WASM的工作原理。为了为您的Web应用程序编写高性能代码，您必须在JavaScript中使用WASM的API和函数。我们还讨论了JavaScript框架如何使用WASM创建高性能应用程序。
然而，您目前不能像使用那样加载WASM模块。这就是JavaScript的作用。它帮助在浏览器上加载和编译WASM。以下是具体的步骤：
- 将.wasm字节加载到ArrayBuffer或类型化数组中。
- 使用WebAssembly.Module编译字节。
- 现在，使用导入实例化WebAssembly.Module以获得可调用的导出项
因此，您需要开始使用预编译的WASM模块。在这里，您有很多选择。您可以使用Rust，C/C++，AssemblyScript，甚至TinyGo（Go）编写代码，然后将其转换为.wasm模块。
从技术上讲，WebAssembly是一种语言的编译目标。这意味着您需要使用您选择的语言编写代码，然后在应用程序（Web或非Web）中使用生成的二进制代码。此外，如果您打算在服务器上使用它，您需要使用WASI与系统进行接口。
由于WebAssembly使用可扩展数组的线性内存，JavaScript和WASM都可以同步访问它，使您能够编写功能丰富、快速的应用程序。
WebAssembly和JavaScript示例
让我们使用示例来学习如何在JavaScript中使用WASM。
如上所述，您需要一个预编译的WASM模块。对于这个示例，我们将使用Emscripten（C/C++）。由于WASM提供了一种高性能的二进制格式，我们可以将生成的代码与JavaScript或其他语言一起运行。
工具设置
由于我们使用Emscripten，我们需要获取emsdk工具。它将允许您将C/C++代码编译为.wasm代码。
只需在终端中运行以下命令。如果您没有安装GIT，请按照我们的Open Source 101: Version Control System and Git指南进行安装。
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk#Output
nitt@nitt-laptop:~/Projects/WASM2$ git clone https://github.com/emscripten-core/emsdk.git
Cloning into 'emsdk'...
remote: Enumerating objects: 3566, done.
remote: Counting objects: 100% (62/62), done.
remote: Compressing objects: 100% (49/49), done.
remote: Total 3566 (delta 31), reused 38 (delta 13), pack-reused 3504
Receiving objects: 100% (3566/3566), 2.09 MiB | 2.24 MiB/s, done.
Resolving deltas: 100% (2334/2334), done.
nitt@nitt-laptop:~/Projects/WASM2$ cd emsdk
nitt@nitt-laptop:~/Projects/WASM2/emsdk$在emsdk文件夹中，我们调用另一个命令来获取最新的可用的Emscripten构建。
为此，您需要运行以下命令。
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh现在，我们需要通过运行以下命令生成wasm代码。
现在，我们需要通过运行以下命令生成wasm代码。
如您所见，您会得到一个“hello-yaoweibin.js”和hello-yaoweibin.wasm的输出。您可以通过在项目目录中运行dir命令来检查这些文件。
这两个文件都是必不可少的。hello-geefklare.wasm包含了编译后的代码。另一方面，hell-geefklare.js文件则包含了运行所需的JavaScript代码。由于Emscripten支持web和node.js执行，我们可以使用Node进行测试。
要运行它，请在终端中输入以下命令：
node hello-yaoweibin.js
如果您想在Web上运行它，您可以使用Emscripten生成HTML文件。要这样做，请运行以下命令：
emcc hello-yaoweibin.c -o hello-yaoweibin.html
要运行HTML文件，您可以使用Python 3的HTTPServer。只需运行以下命令：
python3 -m HTTP.server 8000
现在，转到http://localhost:8000/hello-yaoweibin.html以查看输出。
注意：大多数系统都预装了Python。如果没有，请在尝试运行Python3服务器之前轻松安装它。
使用JavaScript API处理WASM
本节将更详细地介绍JavaScript WASM API。借助它，我们将学习如何加载WASM代码并执行它。但首先，让我们看一下下面的代码。
fetch(‘hello-yaoweibin.wasm').then(response =>
response.arrayBuffer())
.then (bytes =>
WebAssembly.instantiate(bytes))
.then(result=>
alert(result.instance.exports.answer()))
上述代码使用了以下JavaScript API：
fetch()浏览器API
WebAssembly.instantiate
除此之外，还有其他值得注意的API。其中包括：
WebAssembly.compile
WebAssembly.instance
WebAssembly.instantiate
WebAssembly.instantiateStreaming
fetch()浏览器API
fetch() API用于加载.wasm网络资源。如果您尝试加载本地资源，您需要禁用跨域资源共享以加载网络资源。否则，您可以使用node服务器来完成。要安装和运行node服务器，请运行以下命令。
sudo apt install npm
接下来，运行以下命令来启动服务器。
npx http-server -o
它将打开一个网页浏览器，您可以在其中查看所有项目文件。
现在打开hello-geefklare.html并运行Web开发人员工具。在那里，打开控制台，并输入以下内容。
fetch(“hello-yaoweibin.wasm”);
它将返回以下承诺。
Promise {}
[[Prototype]]: Promise
[[PromiseState]]: “fulfilled”
[[PromiseResult]]: Response
body: (…)
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: “OK”
type: “basic”
url: “http://127.0.0.1:8080/hello-yaoweibin.wasm”
[[Prototype]]: Response
您还可以编写以下脚本并通过HTML运行它。
要在服务器上运行您的wasm模块，您需要在Node.js中使用以下代码。
const fs = require(‘fs');
const run = async() => {
const buffer = fs.readFileSync(“./hello-yaoweibin.wasm”);
const result = await WebAssembly.instantiate(buffer);
console.log(result.instance.exports.answer());
};
run();
我们建议阅读文档以了解更多信息。
JavaScript Vs. WASM
要理解WASM和JavaScript之间的关系，我们还需要进行比较。从本质上讲，WASM更快，并且具有用于目标编译的二进制格式，而JavaScript是一种高级语言。WASM的二进制代码很难学习，但有办法有效地使用WASM。
WASM和JavaScript之间的关键区别包括以下几点：
WASM是一种编译语言，而JS是一种解释语言。浏览器必须在运行时下载和解析JavaScript，而WASM代码则已经准备好执行其预编译代码。
WebAssembly是一种低级语言，而JavaScript是一种高级语言。作为高级语言，JS易于使用。但是，作为低级语言，WASM的执行速度比JavaScript快得多。
最后，JavaScript受益于其庞大的社区。因此，如果您正在寻找更好的开发体验，JS是一个明显的选择。另一方面，WebAssembly相对较新，因此资源相对较少。
作为开发人员，您无需担心选择哪个。这是因为JS和WASM可以一起工作，而不是相互对立。
因此，如果您正在编写高性能应用程序，您可能希望使用WebAssembly仅对需要性能的部分进行编码。JavaScript API可以帮助您直接从JavaScript代码中获取和使用WASM模块。
最后的思考
最后，WebAssembly是JavaScript的伟大伴侣。它邀请开发人员在Web和非Web上创建高性能应用程序。此外，它在不试图取代JavaScript的情况下实现了这一目标。
然而，WASM会发展成为一个完整的解决方案并取代JavaScript吗？嗯，考虑到WebAssembly的目标，这是有可能的，但不太可能。然而，WebAssembly在未来取代JavaScript的想法并非完全不可辩驳。
接下来，查看构建现代应用程序的最佳JavaScript (JS) UI libraries。
