今天，要給前端造點兒福利
瀏覽器中能調用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：
這世界變化快啊，我要說的是這是一個非常非常新的技術，你值得擁有。
你要是看不出這個技術有個球用，那就當我沒說這件事，再會！