介绍
这篇文章运用简单易懂的例子给大家介绍利用WebAssembly编译的。wasm文件如何使用JavaScript实现调用,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
WebAssembly也叫浏览器字节码技术这里就不过多的解释了网上很多介绍
主要是让大家知道在js里面如何调用执行它,我之前看WebAssemblyAPI时候反正是看得一脸懵逼
也是为了大家能更快的入手这个比较新的技术吧
这边写的一个dom是官方推荐的c/c++编译的
c代码
& lt; !DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt;元名称=皏iewport"内容=翱矶?设备宽度,初始=1.0,比;
& lt;元http-equiv=癤-UA-Compatible"内容=癷e=edge"比;
& lt; title> Document
& lt;/head>
& lt; body>
& lt; h2>
& lt;/h2>
& lt; script>/* *
* @param{字符串}路径wasm文件路径
* @param{对象}进口传递到wasm代码中的变量
*/函数loadWebAssembly(路径,进口={}){
返回获取(路径)//加载文件
不要犹豫(反应=比;response.arrayBuffer())//转成ArrayBuffer
不要犹豫(缓冲=比;WebAssembly.compile(缓冲))
不要犹豫(模块=比;{
进口。env=进口。env | | {}//开辟内存空间
imports.env。memoryBase=imports.env。memoryBase | | 0
如果(! imports.env.memory) {
imports.env。内存=new WebAssembly。初始内存({:256})
}//创建变量映射表
imports.env。tableBase=imports.env。tableBase | | 0
如果(! imports.env.table) {//在MVP版本中元素只能是“anyfunc"
imports.env。表=new WebAssembly。表({初始:0,元素:& # 39;anyfunc # 39;})
}//创建WebAssembly实例
返回新WebAssembly。实例(模块,进口)
})
}//调用
loadWebAssembly (& # 39;。/math.wasm& # 39;)
不要犹豫(实例=比;{
const添加=instance.exports._add//取出c里面的方法
const平方=instance.exports._square//取出c里面的方法
console.log(& # 39; 10 + 20=& # 39;,添加(10、20))
console.log(& # 39; 3 * 3=& # 39;,平方(3))
console.log(& # 39;(2 + 5) * 2=& # 39;,广场(添加(2 + 5)))
})
& lt;/script>
& lt;/body>
& lt;/html> 我这里的路径math.html和数学。wasm是同级的
现在就可以打开浏览器查看了但是获取方法在本地是不能使用的它是网络请求所有这里需要来个web服务器
打开终端之间键入<代码> npm安装- g为
下载web服务器
然后服务。启动
有点的。
启动完成效果:
关于利用WebAssembly编译的.wasm文件如何使用JavaScript实现调用就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
