[譯]在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資源。你如今能夠調用它的方法。

在接下來的兩篇文章中，咱們將深刻研究內存導入和表格導入。