InfoQ|5分钟看懂WebAssembly( 二 )
好的 ， 下面我们该来点实战了 。
Show me the code首先 ， 我们需要一小段 C++ 代码来编译 。 有些人会给你看这个运行在浏览器中的完整版暗黑破坏神 1 游戏的例子：
intadd(intfirstNumber,intsecondNumber){ returnfirstNumber + secondNumber; } 下面转到你选择的 Linux 发行版 。 第一步是下载并安装 emscripten 。# 安装依赖项（是的 ， 你可以使用 python 的较新版本） sudoapt-get install python2.7 git # 通过一个 git 克隆获取 emscripten gitclone https://github.com/emscripten-core/emsdk.git # 下载 ， 安装并激活 sdk cdemsdk ./emsdkinstall latest ./emsdkactivate latestl source./emsdk_env.sh # 确认安装的内容可以正常运行 emcc--version # 将这个 c++ 文件编译到一个 webassembly 模板 emcchelloWebassembly.cpp -s WASM=1 -o helloWebassembly.html # 启动 HTML 并观察结果 上面是极客处理 wasm 的路子 。 还有一种更简单的方法 。 你可以转到这个站点：
将你的 C++ 代码放在左侧 。 然后 ， 你将在 WAT 部分中获得导出函数的名称 。 使用我之前提到的 add 函数代码：“_Z3addii”作为函数名称 ， 我们会在稍后使用它 。 你只需点击 download 按钮 ， 就可以获取 WASM 文件 。 非常简单！
现在 ， 我们就可以让 WebAssembly 直接运行在浏览器中了 ， 没有那么多麻烦的事情 。<title>WASM test</title> <linkrel="stylesheet"href="http://news.hoteastday.com/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ésultat du C++</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 的更多信息 ， 并且有充足的空闲时间：我推荐你阅读这篇出色的文章 ， 更深入地探讨这个话题：
推荐阅读
- InfoQ|Google早已看到未来多容器的挑战，利用Anthos能否实现多集群统一管理？
- iQOO手机|iQOO黑科技来了！120W超快闪充，15分钟就能充满电
- iQOO手机|15分钟电量100%！iQOO颠覆你的认知，120W超快闪充技术有多牛？
- 新机发布,iQOO手机|15分钟充满手机电量，iQOO新品将搭载120W超快闪充技术
- 手机大魔王|OPPO发布125W超级闪充，仅5分钟可充至41%的电
- AMD|选购技巧来了：荣耀多款AMD新锐龙笔记本上市，一文看懂区别
- iQOO手机|15分钟充满电+超强安全性，iQOO 120W超快闪充技术令人心动
- |OPPO搞出了125W手机快充：5分钟从0到41%，20分钟充满
- InfoQ|25岁网安CEO被判刑12年，技术隔离后，顶尖黑客被out了？
- iQOO手机|iQOO 120W超快闪充真机即将到来，5分钟充电50％，绝了