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