JS如何調(diào)用WebAssembly編譯出來的.wasm文件

更新時間：2020年11月05日 11:20:09 作者：y-y-y-y

這篇文章主要介紹了關(guān)于WebAssembly編譯出來的.wasm文件js如何調(diào)用,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

WebAssembly也叫瀏覽器字節(jié)碼技術(shù) 這里就不過多的解釋了網(wǎng)上很多介紹

主要是讓大家知道在js里面如何調(diào)用執(zhí)行它，我之前看WebAssemblyAPI時候反正是看得一臉懵逼

也是為了大家能更快的入手這個比較新的技術(shù)吧

這邊寫的一個dom是官方推薦的c/c++編譯的

c代碼

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

屬性c但是對字節(jié)碼不熟悉的朋友可能會不理解，為什么沒有main函數(shù)

這里主要是把這個c代碼當成一個模塊調(diào)用不需要它自己執(zhí)行所以沒有，官方也有有main函數(shù)的能直接生成js和html但是太過雍于，

這種方式比較推薦，也是讓js能直接調(diào)用比較方便

之后使用 emscripten進行編譯 emcc math.c -Os -s WASM=1 -s SIDE_MODULE=1 -o math.wasm

然后就有math.wasm文件了，如果沒裝emscripten的話我博客里面有一篇是關(guān)于安裝的

有了math.wasm文件后就該用js調(diào)用它了

新建math.html加入調(diào)用的方法如下：

<!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()) // 轉(zhuǎn)成 ArrayBuffer
   .then(buffer => WebAssembly.compile(buffer))
   .then(module => {
    imports.env = imports.env || {}

    // 開辟內(nèi)存空間
    imports.env.memoryBase = imports.env.memoryBase || 0
    if (!imports.env.memory) {
    imports.env.memory = new WebAssembly.Memory({ initial: 256 })
    }

    // 創(chuàng)建變量映射表
    imports.env.tableBase = imports.env.tableBase || 0
    if (!imports.env.table) {
    // 在 MVP 版本中 element 只能是 "anyfunc"
    imports.env.table = new WebAssembly.Table({ initial: 0, element: 'anyfunc' })
    }

    // 創(chuàng)建 WebAssembly 實例
    return new WebAssembly.Instance(module, imports)
   })
  }
  //調(diào)用
  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>

我這里的路徑math.html和math.wasm是同級的

現(xiàn)在就可以打開瀏覽器查看了但是fetch方法在本地是不能使用的它是網(wǎng)絡(luò)請求所有這里需要來個web服務(wù)器

打開終端之間鍵入 npm install -g serve

下載web服務(wù)器

然后serve . 啟動

有點的 .

啟動完成效果: