go interface转int_Go实战--gopherjs让你的go代码在浏览器中执行

生命不止，继续 go go go !!!

今天跟大家分享gopherjs.

A compiler from Go to JavaScript for running Go code in a browser

gopherjs介绍及配置

github地址：
https://github.com/gopherjs/gopherjs/

简介：
GopherJS compiles Go code (golang.org) to pure JavaScript code. Its main purpose is to give you the opportunity to write front-end code in Go which will still run in all browsers. Give GopherJS a try on the GopherJS Playground.

文档地址：
https://godoc.org/github.com/gopherjs/gopherjs/js

获取：

go get -u github.com/gopherjs/gopherjs1

错误处理：

github.comgopherjsgopherjscompilercompiler.go:20: undefined: ___GOPHERJS_REQUIRES_GO_VERSION_1_9___github.comgopherjsgopherjscompilerpackage.go:436: o.IsAlias undefined (type *types.TypeName has no field or method IsAlias)123

由于之前使用的golang 1.8，而gopherjs是使用golang1.9编译的，所以需要我们也使用golang1.9.

安装：

go install -v github.com/gopherjs/gopherjs1

判断是否安装成功：

D:go_workspacesrcgo_gopherjsλ gopherjsGopherJS is a tool for compiling Go source code to JavaScript.Usage:  gopherjs [command]Available Commands:  build       compile packages and dependencies  doc         display documentation for the requested, package, method or symbol  get         download and install packages and dependencies  help        Help about any command  install     compile and install packages and dependencies  run         compile and run Go program  serve       compile on-the-fly and serve  test        test packages  version     print GopherJS compiler versionFlags:  -h, --help   help for gopherjsUse "gopherjs [command] --help" for more information about a command.12345678910111213141516171819202122

如果未成功，就看看golang path bin是否加入了环境变量。

Golang、JavaScript类型对比：

| Go type               | JavaScript type       | Conversions back to interface{} || --------------------- | --------------------- | ------------------------------- || bool                  | Boolean               | bool                            || integers and floats   | Number                | float64                         || string                | String                | string                          || []int8                | Int8Array             | []int8                          || []int16               | Int16Array            | []int16                         || []int32, []int        | Int32Array            | []int                           || []uint8               | Uint8Array            | []uint8                         || []uint16              | Uint16Array           | []uint16                        || []uint32, []uint      | Uint32Array           | []uint                          || []float32             | Float32Array          | []float32                       || []float64             | Float64Array          | []float64                       || all other slices      | Array                 | []interface{}                   || arrays                | see slice type        | see slice type                  || functions             | Function              | func(...interface{}) *js.Object || time.Time             | Date                  | time.Time                       || -                     | instanceof Node       | *js.Object                      || maps, structs         | instanceof Object     | map[string]interface{}          |12345678910111213141516171819

gopherjs应用

最简单例子(accessing native javascript apis in go code)

写一个golang文件，姑且命名为main.go:

package mainimport "github.com/gopherjs/gopherjs/js"func main() {    js.Global.Get("document").Call("write", "Hello world!")}12345678

运行命令行：

gopherjs build main.go -o demo.js1

此时，生成了两个文件demo.js和demo.js.map。

新建一个html文件，姑且命名为test.html，键入：

  Beginning of Gopherjs12345678910

打开test.html，查看结果。

操作DOM(honnef.co/go/js/dom)

github地址：
https://github.com/dominikh/go-js-dom

获取：
go get honnef.co/go/js/dom

浏览器播放mp3音频
main.go

package mainimport "honnef.co/go/js/dom"func main() {    d := dom.GetWindow().Document()    foo := d.GetElementByID("foo").(*dom.HTMLButtonElement)    foo.AddEventListener("click", false, func(event dom.Event) {        a := d.GetElementByID("audio").(*dom.HTMLAudioElement)        a.Play()    })}1234567891011121314

编译：
gopherjs build main.go -o demo.js

test.html

  GopherJS DOM example - Play Sound on Click EventClick Me to Play Sound  Your browser does not support this audio format.12345678910111213141516

Create and Append Element
main.go

package mainimport "honnef.co/go/js/dom"func main() {    d := dom.GetWindow().Document()    foo := d.GetElementByID("foo").(*dom.HTMLDivElement)    foo.AddEventListener("click", false, func(event dom.Event) {        div := d.CreateElement("div").(*dom.HTMLDivElement)        div.Style().SetProperty("color", "red", "")        div.SetTextContent("I am new div")        foo.AppendChild(div)    })}123456789101112131415

编译：
gopherjs build append.go -o demo.js

test.html

  GopherJS DOM example - Create and Append Element

Click me to create and add new element

123456789101112

更多例子
[Golang] GopherJS DOM Example - getElementById and Set innerHTML
[Golang] GopherJS DOM Example - Event Binding (addEventListener)
[Golang] GopherJS DOM Example - Detect Keypress (Keyboard Event)
[Golang] GopherJS DOM Example - Access Input Element Value
[Golang] GopherJS DOM Example - Access HTML Data Attribute
[Golang] Online Input Method (Pāli) by GopherJS
[Golang] Online Snake Game by GopherJS
[Golang] GopherJS DOM Example - Hide Element by display:none
[Golang] GopherJS DOM Example - Toggle (Play/Pause) Sound on Click Event
[Golang] GopherJS DOM Example - Dropdown Menu
[Golang] Draggable (Movable) Element by GopherJS
[Golang] Toggle (Show/Hide) HTML Element by GopherJS