WebAssembly - Modüller

Bir .wasm dosyasını c / c ++ kodundan nasıl alacağımızı gördük. Bu bölümde, wasm'yi bir WebAssembly modülüne dönüştürecek ve aynısını tarayıcıda çalıştıracağız.

C ++ Faktör kodunu aşağıda gösterildiği gibi kullanalım -

int fact(int n) {
   if ((n==0)||(n==1))
      return 1;
   else
      return n*fact(n-1);
}

Şu adreste bulunan Wasm Explorer'ı açın https://mbebenita.github.io/WasmExplorer/ as shown below −

İlk sütun C ++ faktöriyel işlevine sahiptir, 2. sütun WebAssembly metin biçimine ve son sütun x86 Assembly koduna sahiptir.

WebAssembly Metin biçimi -

(module
   (table 0 anyfunc)
   (memory $0 1)
   (export "memory" (memory $0))
   (export "_Z4facti" (func $_Z4facti))
   (func $_Z4facti (; 0 ;) (param $0 i32) (result i32)
      (local $1 i32)
      (set_local $1
         (i32.const 1)
      )
      (block $label$0
         (br_if $label$0
            (i32.eq
               (i32.or
                  (get_local $0)
                  (i32.const 1)
               )
               (i32.const 1)
            )
         )
         (set_local $1
            (i32.const 1)
         )
         (loop $label$1
            (set_local $1
               (i32.mul
                  (get_local $0)
                  (get_local $1)
               )
            )
            (br_if $label$1
               (i32.ne
                  (i32.or
                     (tee_local $0
                        (i32.add
                           (get_local $0)
                           (i32.const -1)
                        )
                     )
                     (i32.const 1)
                  )
                  (i32.const 1)
               )
            )
         )
      )
      (get_local $1)
   )
)

C ++ işlevi fact "_Z4facti"WebAssembly Metin formatında.

Wasm kodunu indirmek ve dosyayı factorial.wasm olarak kaydetmek için indirme düğmesine tıklayın.

Şimdi .wasm kodunu modüle dönüştürmek için aşağıdakileri yapmalıyız -

Aşama 1

.Wasm'ı kullanarak arraybuffer'a dönüştürün ArrayBuffer. ArrayBuffer nesnesi size sabit uzunlukta bir ikili veri arabelleği döndürür.

Adım 2

ArrayBuffer'dan gelen baytlar kullanılarak bir modülde derlenmelidir. WebAssembly.compile(buffer) işlevi.

WebAssembly.compile() işlevi, verilen baytlardan bir WebAssembly.Module derler ve döndürür.

Adım 1 ve 2'de tartışılan Javascript kodu burada.

<script type="text/javascript">
   let factorial;
   fetch("factorial.wasm")
      .then(bytes => bytes.arrayBuffer())
      .then(mod => WebAssembly.compile(mod))
      .then(module => {return new WebAssembly.Instance(module) })
      .then(instance => {
      
      factorial = instance.exports._Z4facti;
      console.log('Test the output in Brower Console by using factorial(n)');
   });
</script>

Kod Açıklama

Javascript tarayıcı API getirmesi factorial.wasm içeriğini almak için kullanılır.
İçerik, arrayBuffer () kullanılarak baytlara dönüştürülür.
Modül, WebAssembly.compile (mod) çağrılarak baytlardan oluşturulur.
Bir modülün örneği new kullanılarak oluşturulur
WebAssembly.Instance(module)
Export _Z4facti faktöriyel fonksiyonu, WebAssembly.Module.exports () kullanılarak değişken faktöriyeline atanır.

Misal

Modül.html, javascript koduyla birlikte burada -

module.html

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>WebAssembly Module</title>
   </head>
   <body>
      <script>
      let factorial;
      fetch("factorial.wasm")
      .then(bytes => bytes.arrayBuffer())
      .then(mod => WebAssembly.compile(mod))
      .then(module => {return new WebAssembly.Instance(module) })
      .then(instance => {
         factorial = instance.exports._Z4facti;
         console.log('Test the output in Browser Console by using factorial(n)');
      });
      </script>
   </body>
</html>

Çıktı

Çıktıyı görmek için tarayıcıda module.html dosyasını çalıştırın -