資訊專欄INFORMATION COLUMN
摘要：原文鏈接這是系列文章第一篇使用創(chuàng)建一個模塊的實例。將會創(chuàng)建模塊的實例。一旦模塊實例化完成，主進程就會拿到返回的實例。如果創(chuàng)建一個實例，你還需要其它的參數(shù)。使用這些低級裝備這些來構(gòu)建實例。模塊本身沒有任何狀態(tài)。
原文鏈接：https://fanmingfei.com/posts/...
這是系列文章第一篇：
使用 JavaScript 創(chuàng)建一個 WebAssembly 模塊的實例。
WebAssembly 中的 Memory
什么是 WebAssembly table？
WebAssembly是在Web上運行代碼的新途徑。使用它，你可以使用C/C++編寫一些模塊，并在瀏覽器上運行
目前，模塊不能自動運行。隨著ES模塊的發(fā)展，瀏覽器逐步開始支持ES模塊。WebAssembly 模塊將會像加載 ES 模塊一樣被加載。比如：
我們學(xué)要加載這些代碼文件才能運行它們。首先是 .js 文件，使用 React 的 JavaScript 文件。JavaScript 將會創(chuàng)建 WebAssembly 模塊的實例。
需要使用 WebAssembly.instantiate 方法來創(chuàng)建實例。
我們來仔細看看這個。
第一步，.wasm 文件里的代碼其實就是模塊代碼，我們將從 .wasm 文件中的二進制代碼傳遞給WebAssembly.instantiate。
所以我們需要將二進制代碼轉(zhuǎn)換成buffer，并且傳遞給 WebAssembly.instantiate 方法。
然后，引擎就會將這個模塊編譯成當前的機器所能運行的東西。
但是我們不想讓它在主線程運行。主進程已經(jīng)非常忙了，因為它要處理 JavaScript、DOM、layout。我們不想占用主線程，所以，WebAssembly.instantiate 返回一個 promise。
這樣，主進程就可以去做一些別的事情了。一旦模塊實例化完成，主進程就會拿到 promise 返回的實例。
如果創(chuàng)建一個實例，你還需要其它的參數(shù)。我覺得模塊就像是王者榮耀的裝備合成圖譜。
實例就像是合成后的裝備。如果想合成一個高級裝備，需要一些低級裝備。所以我們需要一些其它的東西才能實例化一個 WebAssembly 模塊。
也就是WebAssembly.instantiate的第二個參數(shù)。這是一個需要導(dǎo)入到 WebAssembly 實例的對象：import object。
我們將 import object 當做低級裝備。使用這些低級裝備（這些import object）來構(gòu)建實例。就像裝備打造圖譜一樣，每一個 WebAssembly 模塊都需要特殊的 imports。
所以，如果你想實例化一個模塊的話，你需要傳入這個對象。傳入的對象的屬性值可以是一下幾種類型：
values
function closures
memory
tables
Values它可以是一個變量。WebAssembly 的數(shù)據(jù)類型只有兩種，int 類型和 float 類型，所以 values 必須是這兩種類型中的一種。當然 WebAssembly 規(guī)范如果增加了其它類型，這里就會變化。
Function closures我們也可以傳遞函數(shù)閉包。也就是說，你傳遞一個 JavaScript 函數(shù)過去，WebAssembly 可以調(diào)用。
這非常的有用，因為當前版本的 WebAssembly 不能直接調(diào)用 DOM 方法。直接修改 DOM 在 WebAssembly 的規(guī)劃中，不過現(xiàn)在規(guī)范里還沒有。
你可以通過傳遞 JavaScript 函數(shù)過去，讓 WebAssembly 調(diào)用，達到修改DOM的目的。所以 WebAssembly 可以調(diào)用一個 JS 函數(shù)
Memory另外一個類型是 memory 對象。這個對象可以讓 WebAssembly 模擬手動內(nèi)存管理。Memory 對象的概念讓人感到困惑，所以我在另一篇文章中進一步深入了解，這是本系列的下一篇文章。
Tables最后可以導(dǎo)入的類型和安全有關(guān)。它叫做 table。它可以讓你使用叫做函數(shù)指針。這個東西比較復(fù)雜，將會在這個系列文章中的第三篇中講述。
這是所有你可以導(dǎo)入 WebAssembly 實例的類型。
WebAssembly.instantiate 的狀態(tài)變?yōu)?resolved。它返回了兩個內(nèi)容：一個實例，和一個編譯后的模塊。
返回一個編譯后的模塊的好處是你可以隨時拿它來生成一個新的實例。你只需要將 WebAssembly.instantiate 的source 這個參數(shù)替換成拿到的 module 來生成實例。模塊本身沒有任何狀態(tài)。也就是說，編譯后的模塊可以生成很多實例。
你的實例已經(jīng)整裝待發(fā)。你可以調(diào)用它的方法。
下一篇將會深入去講解memory import和table import。
AboutLin Clark
Lin 是Mozilla Developer Relations團隊的工程師。她使用 JavaScript、WebAssembly、Rust 和 Servo，也畫一些漫畫。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/84512.html
摘要：使用，您可以直接訪問原始字節(jié)碼這可能令人擔憂。可以根據(jù)索引從中拿到字符串現(xiàn)在，很多人并不知道如何在中使用字節(jié)碼。你需要將字節(jié)碼轉(zhuǎn)換為有用的內(nèi)容，比如說字符串。通過防止瀏覽器級內(nèi)存泄漏并提供內(nèi)存隔離，使事情變得更安全。 原文鏈接：https://fanmingfei.com/posts/... 這是系列文章第二篇： 使用 JavaScript 創(chuàng)建一個 WebAssembly 模塊的實...
摘要：中的什么是在第一篇文章中，我介紹了可以導(dǎo)入的四中不同的類型。可能是以某種方式插入到內(nèi)存中的惡意代碼，可能嵌入到字符串中。是存在于內(nèi)存之外的數(shù)組。如果模塊想要調(diào)用這些函數(shù)，它將該索引傳遞給一個名為的操作。 原文鏈接： https://fanmingfei.com/posts/... 這是系列文章第三篇： 使用 JavaScript 創(chuàng)建一個 WebAssembly 模塊的實例。 Web...
摘要：有哪些新特性有哪些改進學(xué)著使用這個新版本，來構(gòu)建更快的應(yīng)用吧。繼版本之后，花了將近八個月的時間來發(fā)布。的創(chuàng)始人之一，，建議用戶使用，以便使用最優(yōu)的性能，是因為源代碼使用了新特性。全新的插件系統(tǒng)配備了全新整改的插件系統(tǒng)。 本文原文地址：https://auth0.com/blog/webpac...第一次翻譯，不當之處，歡迎指正 官方已經(jīng)發(fā)布了Webpack 4.0。有哪些新特性？有哪些...
摘要：在當前階段，僅僅只是字節(jié)碼規(guī)范。如果都沒有將代碼編譯為字節(jié)碼的工具，要起步就很困難了。接下來要做的是使用將格式的代碼轉(zhuǎn)換為二進制碼。運行文件，最后就能得到瀏覽器需要的真正的二進制碼。 本文轉(zhuǎn)載自：眾成翻譯譯者：文藺鏈接：http://www.zcfy.cc/article/1031原文：http://cultureofdevelopment.com/blog/build-your-fi...
摘要：前端日報精選入門指南工作原理的新功能前端本地存儲數(shù)據(jù)庫實例教程模塊深入探究調(diào)查問卷中文譯掘金第期構(gòu)建高性能展開收縮動畫譯代碼檢查工具對比前端之旅譯年了，這么多前端框架，你會怎樣選擇掘金譯不配置，不出事那些坑其一前端面試的大 2017-07-20 前端日報 精選 CSS入門指南-1：工作原理2017 Amsterdam CSS DayWebpack 3 的新功能：Scope Hoisti...
閱讀 600·2021-10-08 10:20
閱讀 1490·2021-09-23 11:22
閱讀 3214·2019-08-30 15:55
閱讀 1582·2019-08-28 18:25
閱讀 1857·2019-08-28 18:14
閱讀 1230·2019-08-26 11:37
閱讀 2893·2019-08-26 10:18
閱讀 2420·2019-08-23 18:39
