江苏龙网

  1. 首页 > 人文 > >

InfoQ 5分钟看懂WebAssembly( 二 )


将你的C++代码放在左侧 。 然后 ， 你将在WAT部分中获得导出函数的名称 。 使用我之前提到的add函数代码：“_Z3addii”作为函数名称 ， 我们会在稍后使用它 。 你只需点击download按钮 ， 就可以获取WASM文件 。 非常简单！
现在 ， 我们就可以让WebAssembly直接运行在浏览器中了 ， 没有那么多麻烦的事情 。 <title>WASMtest</title><linkrel="stylesheet"href="https://pcff.toutiao.jxnews.com.cn/stylesheets/style.css"/></head><body><script>constgetRandomNumber==>Math.floor(Math.random*10000);WebAssembly.instantiateStreaming(fetch("https://012q1.sse.codesandbox.io/wasm/add.wasm")).then(obj=>obj.instance.exports._Z3addii).then(add=>{document.getElementById("addTarget").textContent=add(getRandomNumber,getRandomNumber);});</script><h1>RésultatduC++</h1><pid="addTarget"></p></body></html>这样就搞定了 。 这个html网页允许你使用编译成WebAssembly的C++！这里我们跳过所有HTML和简单易懂的部分 ， 直接看第11行的InstantiateStreaming函数 。 正如Mozilla文档所说 ， 这个函数使你可以通过一个简单的fetch来编译和实例化我们的WebAssembly模块 。 然后 ， 我通过前面获取的函数名称来使用add函数 ， 并用它替换一段DOM 。 看到了吗 ， 在你的浏览器内通过Javascript成功实现了C++！多了不起的事情啊 ， 我甚至还给你做了一个带有可运行演示的codesandbox：
https://codesandbox.io/s/webassembly-en-5-minutes-012q1?fontsize=14&hidenavigation=1&module=%2Fpublic%2Findex.html&theme=dark
你肯定会说 ， 怎么这么简单的东西做起来都这么复杂？没错 。 他们正在努力 ， 准备在将来用一个简单的import替换掉instantiation的JavaScript部分 。 因此请耐心等待 ， 不用太久的 。
结语我们已经聊够了五分钟 ， 所以就到这里吧 。 如果你想了解关于WebAssembly的更多信息 ， 并且有充足的空闲时间：我推荐你阅读这篇出色的文章 ， 更深入地探讨这个话题：
最后 ， 我期待着看到Web对其他语言敞开大门后能带来怎样的变化 。 WebAssembly背后的潜力是不可小觑的 ， 我等不及要用上速度更快的Web了！
作者介绍：我是一名开发人员 。 现在我在蒙特利尔从事后端开发/DevOps工作 。 开发是我的一项爱好 ， 我也会随便写点东西 。 我每天会发些Twitter（https://www.twitter.com/jesuisundev/） 。 你也可以给我发邮件（admin@jesuisundev.com） ， 或者订阅我的newsletter（https://mailchi.mp/024d0ebb03ba/jesuisundev）！
参考阅读：
为你推荐【InfoQ 5分钟看懂WebAssembly】InfoQPro是InfoQ专为技术早期开拓者和乐于钻研的技术探险者打造的专业媒体服务平台 。 扫描下方二维码关注InfoQPro ， 即可在【充电计划】中获取技术PPT下载链接 ， 每周更新哟~持续关注我们 ， 还有更多技术分享活动与干货资料 ， 就等你来！
点个在看少个bug


推荐阅读


上一篇：央视|埃及海军挫败一起海上毒品走私案件

下一篇：萧郎看球|35岁国脚新下家浮现，能力仅次于郜林，亚洲杯曾为国足力挽狂澜