[译]在JavaScript中建立WebAssembly模块实例

---

title: 在JavaScript中建立WebAssembly模块实例

date: 2018-3-22 23:58:00

categories: WebAssembly, 翻译

tags: WebAssembly

source: 原文地址

auther: Lin Clark

---

在JavaScript中建立WebAssembly模块实例

---

这是此系列的第一篇文章：

• Creating a WebAssembly module instance with JavaScript
• Memory in WebAssembly (and why it’s safer than you think)
• WebAssembly table imports… what are they?

---

WebAssembly是在Web上运行代码的新方法。有了它，你能够用 C/C++ & Rust 等语言编写模块，并在浏览器中运行它们。

可是，目前模块没法独立运行。随着浏览器对ES模块化的支持，预计会发生变化。一旦到位，WebAssembly模块将或许能够可以与其余ES模块使用相同的方式加载，例如，使用<script type="module">。

可是到目前为止，要在浏览器中使用WebAssembly仍是须要使用JavaScript包装的。这将会建立一个模块的实例，以后你的JavaScript就可以调用在WebAssembly模块中定义的方法。

举个栗子，咱们能够看看如何在React中实例化一个WebAssembly模块。 (您能够在此视频中了解更多关于React如何应用WebAssembly的相关内容。)

当用户加载页面时，它会以相同的方式启动。

浏览器会先下载JS文件，此外.wasm文件也会被Fetch，这个.wasm文件中包含了WebAssembly的二进制代码

咱们须要加载文件中的代码才能运行它。 首先是.js文件，该文件承载了React的JavaScript部分。而后，JavaScript将建立一个WebAssembly模块的实例————调解器。

为此，JS将调用WebAssembly.instantiate。

让咱们深刻一点探究到底发生了什么。

咱们传入WebAssembly.instantiate的第一个参数将是咱们在.wasm文件中得到的二进制代码。这就是模块代码。

因此咱们将二进制文件提取到缓冲区中，而后做为参数传入

这使主线程能够回到其余工做。主线程知道，一旦编译器编译完这个模块，它就会经过promise回调来通知。Promise的resolve会携带解析好的模块胜利归来。

但通过编译的模块并非建立实例惟一所需的东西。我认为这个模块就像一本说明书。

这个实例就像是一个试图用指令书作点什么的人。为了作到这一点，他们也须要原材料。他们须要可以与之配合的东西。

这就是WebAssembly.instantiate的第二个参数出场的地方————imports对象。

我将这些进口物品看做是一箱原材料，就像你从宜家那里获得的那样。实例使用这些原材料和这些导入的资源，再 按照指令说明构建一个东西。正如说明手册所预期的某些原材料同样，每一个模块都须要一组特定的导入资源。

因此，当你实例化一个模块时，你须要传递一个imports对象和附加在imports上的其余东西。每一个导入均可以是如下四种imports中的一种：

• values
• function closures
• memory
• tables

** Values ** 它能够是原始全局变量的值。 WebAssembly如今支持的惟一类型是整数和浮点数，因此值必须是这两种类型之一。这将随着WebAssembly规范中添加更多类型而改变。

** Function Closures ** 它也能够有函数闭包。这意味着您能够传递JavaScript函数，而后WebAssembly能够调用该函数及闭包中的变量。

这会特别有用！由于目前WebAssembly不能直接调用DOM方法。直接访问DOM在WebAssembly路线图上，但并无成为规范的一部分。

同时你能够作的是传递一个JavaScript函数，它能够包含你所须要的DOM操做。而后WebAssembly能够调用该JS函数。

** Memory ** 另外一种导入资源是内存对象。该对象使WebAssembly代码能够模拟手动内存管理。内存对象的概念容易让人产生困惑，因此我在下一篇文章中进行了深刻探讨

** Tables ** 最后的类型与安全有关。它被称为Tables。它使你可使用被称为函数指针的东西。Again，这有点复杂，因此我在本系列的第三部分中解释它。

下面就是你能够装载进你的实例的不一样种类的imports资源

当 WebAssembly.instantiate 完成了解析，promise状态转换为resolved，promise回调就会进入microtask queue，它携带两件东西：实例和独立的编译完成的模块。

返回已编译的模块的好处是能够快速建立同一模块的其余实例。你所须要作的只是将模块做为源参数传入。模块自己没有任何状态(状态在实例上)。这意味着实例能够共享已编译的模块代码。

你的实例如今已经装备齐全并准备好了。它是已编译的代码, 有它的指令手册，以及它全部的mports资源。你如今能够调用它的方法。

在接下来的两篇文章中，咱们将深刻研究内存导入和表格导入。