WebAssembly也叫瀏覽器字節碼技術 這里就不過多的解釋了網上很多介紹

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

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

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

c代碼

1 int add (int x, inty) {2 return x +y;3 }4

5 int square (intx) {6 return x *x;7 }

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

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

這種方式比較推薦，也是讓js能直接調用比較方便

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

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

有了math.wasm文件后就該用js調用它了

新建math.html加入調用的方法如下：

1

2

3

4

5

6

7

Document

8

9

10

11

12

13

14 /**15 * @param {String} path wasm 文件路徑16 * @param {Object} imports 傳遞到 wasm 代碼中的變量17 */

18 functionloadWebAssembly (path, imports={}) {19 returnfetch(path)//加載文件

20 .then(response=>response.arrayBuffer())//轉成 ArrayBuffer

21 .then(buffer=>WebAssembly.compile(buffer))22 .then(module=>{23 imports.env=imports.env||{}24

25 //開辟內存空間

26 imports.env.memoryBase=imports.env.memoryBase|| 0

27 if(!imports.env.memory) {28 imports.env.memory= newWebAssembly.Memory({ initial:256})29 }30

31 //創建變量映射表

32 imports.env.tableBase=imports.env.tableBase|| 0

33 if(!imports.env.table) {34 //在 MVP 版本中 element 只能是 "anyfunc"

35 imports.env.table= newWebAssembly.Table({ initial:0, element:'anyfunc'})36 }37

38 //創建 WebAssembly 實例

39 return newWebAssembly.Instance(module, imports)40 })41 }42 //調用

43 loadWebAssembly('./math.wasm')44 .then(instance=>{45 const add=instance.exports._add//取出c里面的方法46 const square=instance.exports._square//取出c里面的方法47

48 console.log('10 + 20 =', add(10,20))49 console.log('3*3 =', square(3))50 console.log('(2 + 5)*2 =', square(add(2 + 5)))51 })52

53

54

55

總結

以上是生活随笔為你收集整理的js怎么调用wasm_对于WebAssembly编译出来的.wasm文件js如何调用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。