JSはどうやってWebAsssembleを呼び出しますか？

3223 ワード

js。 WebAssembly

WebAssemblyもブラウザのバイトコード技術と言っています。ここでは多くの説明をしました。
主にみんなにjsの中でどのようにそれを実行するように呼びかけますかを知っているので、私は前にWebAssemble APIを見た時、どのみちぼんやりした顔をしていました。
みんなが早くこれを手に入れるための新しい技術でしょう。
こちらに書いてあるdomはオフィシャルおすすめのc/c+コンパイルです。
cコード


 int add (int x, int y) {
 return x + y;
 }
 
 int square (int x) {
 return x * x;
 }

属性cはバイトコードに詳しくない友達が理解できないかもしれません。なぜメール関数がないですか？
ここでは主にこのcコードをモジュールとして使っていますが、自分で実行する必要はありませんので、公的にもmain関数があります。直接jsとhtmlを生成することができます。
このような方式がオススメです。jsを直接呼んでもらうのも便利です。
その後、emscriptenを使ってemcc mart.1-Os-s WASM=1-s SIDE_をコンパイルします。MODULE=1-o math.wasm
それからmatch.wasmファイルがあります。もしemscriptenを入れていないなら、私のブログの中にインストールに関するものがあります。
match.wasmファイルがあれば、jsで呼び出すべきです。
新しいmash.が呼び出される方法は以下の通りです。


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <h1>

 </h1>
 <script>
 /**
 * @param {String} path wasm     
 * @param {Object} imports     wasm       
 */
  function loadWebAssembly (path, imports = {}) {
   return fetch(path) //     
   .then(response => response.arrayBuffer()) //    ArrayBuffer
   .then(buffer => WebAssembly.compile(buffer))
   .then(module => {
    imports.env = imports.env || {}

    //       
    imports.env.memoryBase = imports.env.memoryBase || 0
    if (!imports.env.memory) {
    imports.env.memory = new WebAssembly.Memory({ initial: 256 })
    }

    //        
    imports.env.tableBase = imports.env.tableBase || 0
    if (!imports.env.table) {
    //   MVP     element     "anyfunc"
    imports.env.table = new WebAssembly.Table({ initial: 0, element: 'anyfunc' })
    }

    //    WebAssembly   
    return new WebAssembly.Instance(module, imports)
   })
  }
  //  
  loadWebAssembly('./math.wasm')
  .then(instance => {
   const add = instance.exports._add//  c     
   const square = instance.exports._square//  c     

   console.log('10 + 20 =', add(10, 20))
   console.log('3*3 =', square(3))
   console.log('(2 + 5)*2 =', square(add(2 + 5)))
  })

 </script>
</body>
</html>

ここの経路はmatch.wasmと同じです。
今はブラウザを開けて見ることができますが、fetchメソッドはローカルでは使えません。ここではウェブサーバが必要です。
端末間の入力を開くnpm install -g serveウェブサーバをダウンロード
そしてserve.起動
ちょっと
起動完了効果:

ウェブサーバを通じてアクセスすると、cメソッドを呼び出した後の計算結果が見えます。

ここでWebAsmbleについてコンパイルしました。wasmファイルjsはどうやって起動するかについての記事を紹介します。もっと関連するjs呼出しをします。wasmファイルの内容は以前の文章を検索してください。または下記の関連記事を引き続きご覧ください。これからもよろしくお願いします。

Shellスクリプトは現在のディレクトリとファイルの数を統計します。

NFgixとPHP-FPMの起動、再起動、停止スクリプト共有