js WebAssembly · PHP/Python/前端/Linux 等等學習筆記

[TOC] ## 注意事項要支持 wasm ,需要對中間件繼續進行配置,否則無法識別 wasm apache ``` AddType application/wasm wasm ``` nginx ``` // 在 nginx.conf 的http段中添加以下行： types { application/wasm wasm; } ``` ## 語法 ``` //js Uint8Array 與go 數組轉換 func CopyBytesToGo(dst []byte, src Value) int func CopyBytesToJS(dst Value, src []byte) int func ValueOf(x interface{}) Value type Value func Global() Value // 返回 js的全局對象,通常是 "window" func Null() Value func Undefined() Value func ValueOf(x interface{}) Value func (v Value) Bool() bool func (v Value) Call(m string, args ...interface{}) Value // 調用 Value 中的函數,并傳入參數 func (v Value) Delete(p string) func (v Value) Equal(w Value) bool func (v Value) Float() float64 func (v Value) Get(p string) Value // 獲取 value 的元素或方法,還可以通過id 的值,直接獲取對應的DOM func (v Value) Index(i int) Value func (v Value) InstanceOf(t Value) bool func (v Value) Int() int func (v Value) Invoke(args ...interface{}) Value //調用Value 函數,并傳參 func (v Value) IsNaN() bool func (v Value) IsNull() bool func (v Value) IsUndefined() bool func (v Value) JSValue() Value func (v Value) Length() int func (v Value) New(args ...interface{}) Value // new 一個對象 func (v Value) Set(p string, x interface{}) // 設置屬性,或添加函數 func (v Value) SetIndex(i int, x interface{}) func (v Value) String() string func (v Value) Truthy() bool func (v Value) Type() Type ``` ValueOf 的映射關系 ``` | Go | JavaScript | | ---------------------- | ---------------------- | | js.Value | [its value] | | js.Func | function | | nil | null | | bool | boolean | | integers and floats | number | | string | string | | []interface{} | new array | | map[string]interface{} | new object | ``` ## 快速入門在有golang 的環境中查找 wasm_exec.js 文件,并拷貝到web 目錄下 ``` cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" . ``` 編寫go代碼 <details> <summary>main.go</summary> ``` package main import ( "fmt" "syscall/js" ) var sum=0 func sayHello(this js.Value, args []js.Value) interface{}{ sum++ fmt.Printf("sum: %+v\n", sum) return nil } func main() { // 注冊到window中 js.Global().Set("sayHello",js.FuncOf(sayHello)) // 防止 go 退出,不然會報錯,Go program has already exited c:=make(chan struct{},1) <-c } ``` </details> <br/> 編譯 ``` set GOOS=js set GOARCH=wasm go build -o main.wasm main.go ``` <details> <summary>index.html</summary> ``` <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Title</title> <script src="wasm_exec.js"></script> </head> <body> <script> const go=new Go(); WebAssembly.instantiateStreaming(fetch("main.wasm"),go.importObject).then(async (result)=>{ await go.run(result.instance) }) window.onload=function (){ sayHello(); } </script> </body> </html> ``` </details> <br/> 在瀏覽器中訪問,即可在控制臺查看輸出 ### 更好的 js 導入 wasm ``` <script> // This is a polyfill for FireFox and Safari if (!WebAssembly.instantiateStreaming) { WebAssembly.instantiateStreaming = async (resp, importObject) => { const source = await (await resp).arrayBuffer() return await WebAssembly.instantiate(source, importObject) } } // Promise to load the wasm file function loadWasm(path) { const go = new Go() return new Promise((resolve, reject) => { WebAssembly.instantiateStreaming(fetch(path), go.importObject) .then(result => { go.run(result.instance) resolve(result.instance) }) .catch(error => { reject(error) }) }) } // Load the wasm file loadWasm("main.wasm").then(wasm => { console.log("main.wasm is loaded ??") }).catch(error => { console.log("ouch", error) }) </script> ```