[译]使用JavaScript建立一个WebAssembly模块的实例

原文连接：https://fanmingfei.com/posts/...

这是系列文章第一篇：

• 使用 JavaScript 建立一个 WebAssembly 模块的实例。

• WebAssembly 中的 Memory

• 什么是 WebAssembly table？

---

WebAssembly是在Web上运行代码的新途径。使用它，你可使用C/C++编写一些模块，并在浏览器上运行

目前，模块不能自动运行。随着ES模块的发展，浏览器逐步开始支持ES模块。WebAssembly 模块将会像加载 ES 模块同样被加载。好比：<script type="module">。

不过如今，你须要使用 JavaScript 来加载运行 WebAssembly 模块。首先建立一个 WebAssembly 模块的实例。而后，JavaScript 能够调用 WebAssembly 实例上的方法。

例如，咱们来看看React 如何实例化 WebAssembly模块。（能够看这个视频来了解 React 如何实例化 WebAssembly 模块。）

用户加载页面这个过程都是相同的。

页面加载之后，浏览器开始下载JS文件。而后，一个 .wasm 文件将会被请求。这个文件里包含了二进制的 WebAssembly 代码。

咱们学要加载这些代码文件才能运行它们。首先是 .js 文件，使用 React 的 JavaScript 文件。JavaScript 将会建立 WebAssembly 模块的实例。

须要使用 WebAssembly.instantiate 方法来建立实例。

咱们来仔细看看这个。

第一步，.wasm 文件里的代码其实就是模块代码，咱们将从 .wasm 文件中的二进制代码传递给WebAssembly.instantiate。

因此咱们须要将二进制代码转换成buffer，而且传递给 WebAssembly.instantiate 方法。

而后，引擎就会将这个模块编译成当前的机器所能运行的东西。

可是咱们不想让它在主线程运行。主进程已经很是忙了，由于它要处理 JavaScript、DOM、layout。咱们不想占用主线程，因此，WebAssembly.instantiate 返回一个 promise。

这样，主进程就能够去作一些别的事情了。一旦模块实例化完成，主进程就会拿到 promise 返回的实例。

若是建立一个实例，你还须要其它的参数。我以为模块就像是王者荣耀的装备合成图谱。

实例就像是合成后的装备。若是想合成一个高级装备，须要一些低级装备。因此咱们须要一些其它的东西才能实例化一个 WebAssembly 模块。

也就是WebAssembly.instantiate的第二个参数。这是一个须要导入到 WebAssembly 实例的对象：import object。

咱们将 import object 当作低级装备。使用这些低级装备（这些import object）来构建实例。就像装备打造图谱同样，每个 WebAssembly 模块都须要特殊的 imports。

因此，若是你想实例化一个模块的话，你须要传入这个对象。传入的对象的属性值能够是一下几种类型：

• values

• function closures

• memory

• tables

Values

它能够是一个变量。WebAssembly 的数据类型只有两种，int 类型和 float 类型，因此 values 必须是这两种类型中的一种。固然 WebAssembly 规范若是增长了其它类型，这里就会变化。

Function closures

咱们也能够传递函数闭包。也就是说，你传递一个 JavaScript 函数过去，WebAssembly 能够调用。

这很是的有用，由于当前版本的 WebAssembly 不能直接调用 DOM 方法。直接修改 DOM 在 WebAssembly 的规划中，不过如今规范里尚未。

你能够经过传递 JavaScript 函数过去，让 WebAssembly 调用，达到修改DOM的目的。因此 WebAssembly 能够调用一个 JS 函数

Memory

另一个类型是 memory 对象。这个对象可让 WebAssembly 模拟手动内存管理。Memory 对象的概念让人感到困惑，因此我在另外一篇文章中进一步深刻了解，这是本系列的下一篇文章。

Tables

最后能够导入的类型和安全有关。它叫作 table。它可让你使用叫作函数指针。这个东西比较复杂，将会在这个系列文章中的第三篇中讲述。

这是全部你能够导入 WebAssembly 实例的类型。

WebAssembly.instantiate 的状态变为 resolved。它返回了两个内容：一个实例，和一个编译后的模块。

返回一个编译后的模块的好处是你能够随时拿它来生成一个新的实例。你只须要将 WebAssembly.instantiate 的source 这个参数替换成拿到的 module 来生成实例。模块自己没有任何状态。也就是说，编译后的模块能够生成不少实例。

你的实例已经整装待发。你能够调用它的方法。

下一篇将会深刻去讲解memory import和table import。

About

Lin Clark

Lin 是Mozilla Developer Relations团队的工程师。她使用 JavaScript、WebAssembly、Rust 和 Servo，也画一些漫画。