今天，要给前端造点儿福利
浏览器中能调用javascript，曾经我们以为够用了，够强大了，但是事实上是完全不够
还好，mozilla的工程师提出了webassembly，目前是利用emsctripten把c/c++代码编译为wasm(web汇编)文件，供javascript调用。
哈哈，想一想，你在历史上的C模块要在web浏览器上运行了，兴奋吧！
*********************************************************************************************************************************
因为浏览器前端自然windows为主战场，所以，以下过程我都是在windows上来做的。
1. 安装WebAssembly SDK
这个，网上都说麻烦，都没有按步骤细说，哈哈，我也不细说，因为也不是很懂啦，但我会给你详细的步骤，比
他们厚道多了。哈哈哈哈
1.1 下载windows git
https://git-scm.com/
单击这个图标去下载吧，然后就是安装了，这只要不是班上最后那个拉稀的家伙，我想都应该会吧，哈
1.2 下载windows CMake
https://cmake.org/download/
下载，安装，没问题吧，哈哈哈
1.3 下载windows python
https://www.python.org/downloads/windows/
你还行吧？
行
那好，我们继续
2. 编译器安装
2.1 Emscripten
按网上说的，我也曾经安装包安装过，但我的经验告诉你，让他见鬼去吧
下面，我们源码安装
git clone https://github.com/juj/emsdk.git
cd emsdk
emsdk install sdk-incoming-64bit binaryen-master-64bit
2.2 配置编译环境变量
好吧，网上说的和管网上的说教，嘿嘿，那对对Linux的啦
Windows上的环境就是保存不了啦，对了，也不叫保存不了，就是配置项太多了，没必要往长久环境里
写了，我认为，编译前，先配置它一下，又有何妨
所以，我给你提供了env.bat文件，你把它放到你的emsdk目录下吧
//env.bat
emsdk activate sdk-incoming-64bit binaryen-master-64bit
emsdk_env.bat
记住，编译前，先env.bat一下，当然，你要不退出，下次编译就免了
2.3 开始我们的编程之旅
我噻，你有环境了耶！
嘻嘻！
2.3.1
一个网上的C代码
// math.c
int add (int x, int y){
return x + y;
}
int square (int x) {
return x * x;
}
编译吧
emcc math.c -Os -s WASM=1 -s SIDE_MODULE=1 -o math.wasm
没错吧？
没有
那就好，我们继续
下面是web端的东西了，你离成功好近了，哈哈哈
2.3.2
一个js文件
//loader.js
function loadWebAssembly (path, imports = {}) {
return fetch(path)
.then(response => response.arrayBuffer())
.then(buffer => WebAssembly.compile(buffer))
.then(module => {
imports.env = imports.env || {}
// 开辟内存空间
imports.env.memoryBase = imports.env.memoryBase || 0
if (!imports.env.memory) {
imports.env.memory = new WebAssembly.Memory({ initial: 256 })
}
// 创建变量映射表
imports.env.tableBase = imports.env.tableBase || 0
if (!imports.env.table) {
// 在 MVP 版本中 element 只能是 "anyfunc"
imports.env.table = new WebAssembly.Table({ initial: 0, element: 'anyfunc' })
}
// 创建 WebAssembly 实例
return new WebAssembly.Instance(module, imports)
})
}
一个html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Compile C to WebAssembly</title>
<script src="loader.js"></script>
</head>
<body>
<h1>Compile C to WebAssembly</h1>
<p>The test result can be found in console.</p>
<script>
loadWebAssembly('math.wasm')
.then(instance => {
const square = instance.exports._square
console.log('2^2 =', square(2))
console.log('3^2 =', square(3))
console.log('(2 + 5)^2 =', square(2 + 5))
})
</script>
</body>
</html>
2.3.3 执行
2.3.3.1 web服务器
你的有web服务器，好了，不多说了，tomcat有吧？
没有，去死
有，我们继续
把math.wasm, loader.js, index.html都拷贝到tomcat工作目录下
2.3.3.2
下载最新的chrome浏览器，我下的是ChromeStandalone_60.0.3112.113_Setup.exe，我噻，名字够长啊，看来本事够大，哈哈
然后，在地址栏里输入http://localhost:8080/math/index.html
好了，我把结果给你看吧，哈哈哈
以上，就是你想要的吧，哈哈
Finally：
这世界变化快啊，我要说的是这是一个非常非常新的技术，你值得拥有。
你要是看不出这个技术有个球用，那就当我没说这件事，再会！