技術標籤：go 程式碼實現html輸入

不安分的 Go 語言開始入侵 Web 前端領域了

從 Go 語言誕生以來，它就開始不斷侵蝕 Java 、C、C++ 語言的領地。今年下半年 Go 語言釋出了 1.11 版本，引入了 WebAssembly 技術，瀏覽器端 Javascript 的壟斷地位也開始遭遇 Go 語言的攻擊。這次不同以往，它意味著 Go 語言從後端滲透進了前端，進入了一個全新的世界。

WebAssembly 執行原理

WebAssembly 這個名字翻譯過來就是 「Web 彙編」，也就是 Web 端的組合語言。它是一段二進位制位元組碼程式，Javascript 可以將這段二進位制程式編譯成模組，然後再例項化這個模組就可以呼叫位元組碼邏輯了。WebAssembly 程式碼執行的速度很快，比 Javascript 要快很多，Javascript 可以通過 WebAssembly 技術將關鍵性耗費效能的邏輯交給 WebAssembly 來做就可以明顯提升瀏覽器端的效能。

對比顯示，使用 WebAssembly 執行斐波那契數列相比使用原生 Javascript 來實現，執行效率上能帶來 3.5 倍的提升。

WebAssembly 是一項比較新的技術，只有比較現代的瀏覽器才支援 WebAssembly，例如 Chrome、FireFox瀏覽器。

Go WebAssembly 執行原理

Go 編譯器可以將程式碼編譯成 WebAssembly 二進位制位元組碼，被瀏覽器以靜態資源的形式載入進來後轉換成 Javascript 模組。有了這個模組，瀏覽器可以直接操縱 Go 語言生成的二進位制位元組碼邏輯。同時在 Go 語言編寫的程式碼中可以直接讀寫瀏覽器裡面 Javascript 執行時物件，這樣就完成了 Javascript 和 Go 程式碼的雙向互動。

Go 語言直到 1.11 版本之後才開啟了對 WebAssembly 的支援。如需體驗，必須升級。

Go WebAssembly 初體驗

下面我們就開始體驗一下 Chrome 瀏覽器與 Go 程式碼是如何互動的。我們要實現一個功能，在瀏覽器的輸入框裡輸入一個正整數，然後呼叫 Go 程式碼的斐波那契數列，再將結果再呈現在頁面上。涉及到 4 個檔案，分別是 fib.go、main.go、index.html、wasm_exec.js。

第一步

使用 Go 程式碼編寫 WebAssembly 模組檔案 fib.go，將 Go 語言實現的斐波那契函式註冊到 Javascript 全域性環境。這需要使用內建的 syscall/js 模組，它提供了和 Javascript 引擎互動的介面。

// fib.gopackage mainimport "syscall/js"func main() {f_fib := func(params []js.Value) {var n = params[0].Int() // 輸入引數var callback = params[1] // 回撥引數var result = fib(n)// 呼叫回撥函式，傳入計算結果callback.Invoke(result)}// 註冊全域性函式js.Global().Set("fib