iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 5
2
Modern Web

謙虛,踏實的Web Assembly練習系列 第 5

[練習 04] 使用Web Assembly的Javascript API

  • 分享至 

  • xImage
  •  

WebAssembly物件

首先來看一下...WebAssembly物件有哪些東西

函數

WebAssembly定義了幾個函數,用來把Binary編譯成模組、實例化來使用、或是驗證Binary資料是否有問題

  • WebAssembly.compile
  • WebAssembly.compileStreaming
  • WebAssembly.instantiate
  • WebAssembly.instantiateStreaming
  • WebAssembly.validate

簡單地說明一下...

compile(TypedArray or ArrayBuffer)

把一個讀取好的wasm資料(TypedArray或ArrayBuffer)傳給他,就會回傳一個Promise物件,用他取得編譯好的Module。

compileStream(Promise)

把一個會傳遞讀取好的wasm資料(TypedArray或ArrayBuffer)的Promise物件傳給他,就會回傳一個Promise物件,用他取得編譯好的Module。

instantiate(TypeArray or ArrayBuffer[, importObjects])

類似compile,但是會同時產生一個Instance。他會一個Promise,這個Promise會傳遞一個{module, instance},透過module可以取得編譯好的Module物件,透過instance可以取得產生的Instance物件。額外的參數,可以透過他傳遞要輸入到Instance的函數。

instantiateStreaming(Promise[, importObjects])

類似compileStreaming,回傳跟instantiate一樣。

物件的Constructor

WebAssembly裡面定義了幾種物件類型:

  • WebAssembly.Instance
  • WebAssembly.Memory
  • WebAssembly.Module
  • WebAssembly.Table
  • 錯誤類型
    • WebAssembly.CompileError
    • WebAssembly.LinkError
    • WebAssembly.RuntimeError

Module是編譯好的模組,要使用時需要取得一個Instance。Memory以及Table,是溝通的機制,可以將外界的資料透過Memory丟給WebAssembly處理,然後也透過Memory取回。Table裡面目前是可以把Javascript函數傳給WebAssembly呼叫。

WebAssembly.Module

WebAssembly.Module是一個Constructor,可以把wasm的binary(TypedArray或ArrayBuffer)傳給他,產生一個Module的實例。

Module的實例沒有method或property。

Module有幾個靜態方法,用來取得程式的一些資訊:

  • Module.customSection:取得程式自訂區段的資訊
  • Module.exports:取得程式export區段的資訊
  • Module.imports:取得程式import區段的資訊

WebAssembly.Instance

WebAssembly.Instance是一個Constructor,可以把Module的實例傳給他(需要的話,還可以給他輸入的函數),他就會產生一個用來執行的Instance物件。

Instance物件有一個exports物件property,可以透過他呼叫wasm程式輸出的函數。

WebAssembly.Memory

WebAssembly.Memory是一個Constructor,傳入一個memoryDescriptor物件,產生一個Memory物件。

這個memoryDescriptor物件結構如下:

{
    initial: N,
    maximum: M
}

其中N及M都是正整數,N指定初始的Memory大小,M則指定最大的大小。maximum是可選的參數,也可以不定義。

記憶體大小的單位是Page,每個Page有65,535 bytes。

Memory物件的實例有一個property:

  • buffer:可以取得Memory的內容,或是設定Memory的內容,透過TypedArray來操作。

Memroy物件的實例有一個方法:

  • grow:可以把Memory的容量加大,單位是Page。例如inital指定是1,那呼叫memory.grow(1),就會變成2

WebAssembly.Table

WebAssembly.Table是一個Constructor,傳給他一個tableDescriptor物件,他會產生一個Table的實例。

tableDescriptor物件結構如下:

{
    element: "anyfunc",
    initial: N,
    maximum: M
}

N跟M都是正整數,指定Table初始時可以有的元素數量,以及最大的元素數量。element指定的是元素種類,不過目前版本只定義了anyfunc一種。

Table的實例有一個property:length,可以取得目前裡面的元素數量。

Table的實例有三種方法可以呼叫:

  • grow:如果initial指定的大小不夠用,可以呼叫grow方法來增大
  • get:參數是一個索引,用來取得索引所參考的元素
  • set:第一個參數是索引,第二個參數是值。元素類型是anyfunc時,這個值必須是由WebAssembly輸出的函數的參考。

本來想先寫個例子,不過回頭看了一下,東西有點多,所以還是明天再開始吧(懶~~)。

明天先來練習Module、Instance相關的使用,至於Memory及Table,就在之後吧。


上一篇
[練習 03] 了解Web Assembly的語言要素
下一篇
[練習 05] 透過Javascript API取得Module及Instance物件
系列文
謙虛,踏實的Web Assembly練習20
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言