GopherJS - 将Go代码编译为JavaScript的编译器

GopherJS是一个将Go代码编译为纯JavaScript代码的编译器。它的主要目的是让你能够用Go编写前端代码，这些代码仍然可以在所有浏览器中运行。

帮助改进GopherJS！

通过填写简短的15个问题的GopherJS用户调查帮助我们做出更好的决策
报告和讨论问题
通过文章和文档分享你的知识和经验
为其他库编写GopherJS绑定或贡献GopherJS本身

在线体验

你可以在GopherJS Playground上尝试GopherJS。

支持的功能

几乎所有的Go功能都支持，包括Goroutines（详见兼容性文档）。在大多数情况下性能相当不错，参见HTML5游戏引擎基准测试。不支持Cgo。

安装和使用

GopherJS需要Go 1.19或更新版本。如果你需要更旧的Go版本，可以使用旧版的GopherJS发布版本。

使用go install安装GopherJS：

go install github.com/gopherjs/gopherjs@v1.19.0-beta1  # 或用其他版本替换'v1.19.0-beta1'

如果你的本地Go版本比Go 1.19新，需要设置GOPHERJS_GOROOT环境变量：

go install golang.org/dl/go1.19.13@latest
go1.19.13 download
export GOPHERJS_GOROOT="$(go1.19.13 env GOROOT)"  # 也可以把这行添加到.profile或等效文件中

现在你可以使用gopherjs build [package]、gopherjs build [files]或gopherjs install [package]，这些命令的行为类似于go工具。

示例代码

与DOM交互

github.com/gopherjs/gopherjs/js包提供了与原生JavaScript API交互的函数。例如：

package main

import "github.com/gopherjs/gopherjs/js"

func main() {
    js.Global.Get("document").Call("write", "Hello world!")
}

提供JavaScript库函数

package main

import "github.com/gopherjs/gopherjs/js"

func main() {
    js.Global.Set("pet", map[string]interface{}{
        "New": New,
    })
}

type Pet struct {
    name string
}

func New(name string) *js.Object {
    return js.MakeWrapper(&Pet{name})
}

func (p *Pet) Name() string {
    return p.name
}

func (p *Pet) SetName(name string) {
    p.name = name
}

使用Goroutines

js.Global.Get("myButton").Call("addEventListener", "click", func() {
    go func() {
        [...]
        someBlockingFunction()
        [...]
    }()
})

性能提示

使用-m命令行标志生成压缩代码
应用gzip压缩
使用int而不是(u)int8/16/32/64
使用float64而不是float32

架构

GopherJS模拟了一个32位环境。这意味着int、uint和uintptr有32位的精度。但是，显式的64位整数类型int64和uint64是支持的。

这个环境的GOOS值是js，GOARCH值是ecmascript。你可以在编写平台特定代码时在构建约束中使用这些值。

开发GopherJS

如果你想对GopherJS编译器进行更改，请参阅开发者指南获取更多开发者信息。

更多关于golang将Go代码编译为JavaScript的跨平台插件库gopherjs的使用的实战教程也可以访问 https://www.itying.com/category-94-b0.html

sinazl 1楼

更多关于golang将Go代码编译为JavaScript的跨平台插件库gopherjs的使用的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html

GopherJS: 将Go代码编译为JavaScript的跨平台插件库

GopherJS是一个将Go代码编译为JavaScript的工具，允许你在浏览器或Node.js环境中运行Go程序。下面我将详细介绍GopherJS的使用方法和示例。

安装GopherJS

首先需要安装GopherJS工具：

go get -u github.com/gopherjs/gopherjs

基本使用

1. 简单示例

创建一个简单的Go文件 main.go:

package main

import "fmt"

func main() {
	fmt.Println("Hello, GopherJS!")
}

编译为JavaScript:

gopherjs build main.go -o main.js

然后在HTML中引入生成的JS文件:

<!DOCTYPE html>
<html>
<head>
    <title>GopherJS Example</title>
    <script src="main.js"></script>
</head>
<body>
</body>
</html>

2. 与DOM交互

GopherJS提供了github.com/gopherjs/gopherjs/js包来与JavaScript/DOM交互:

package main

import (
	"github.com/gopherjs/gopherjs/js"
	"time"
)

func main() {
	// 获取DOM元素
	document := js.Global.Get("document")
	body := document.Get("body")
	
	// 创建标题元素
	h1 := document.Call("createElement", "h1")
	h1.Set("innerHTML", "GopherJS DOM Example")
	body.Call("appendChild", h1)
	
	// 创建按钮
	button := document.Call("createElement", "button")
	button.Set("innerHTML", "Click me!")
	button.Call("addEventListener", "click", func() {
		js.Global.Call("alert", "Button clicked at "+time.Now().String())
	})
	body.Call("appendChild", button)
}

3. 使用Go的并发特性

GopherJS支持Go的goroutine和channel:

package main

import (
	"github.com/gopherjs/gopherjs/js"
	"time"
)

func main() {
	document := js.Global.Get("document")
	body := document.Get("body")
	
	// 创建显示区域
	display := document.Call("createElement", "div")
	body.Call("appendChild", display)
	
	// 创建一个channel
	ch := make(chan string)
	
	// 启动goroutine
	go func() {
		for i := 1; i <= 5; i++ {
			time.Sleep(1 * time.Second)
			ch <- fmt.Sprintf("Message %d", i)
		}
		close(ch)
	}()
	
	// 在主goroutine中接收消息
	go func() {
		for msg := range ch {
			display.Set("innerHTML", display.Get("innerHTML").String()+"<br>"+msg)
		}
	}()
}

高级用法

1. 与现有JavaScript库交互

package main

import (
	"github.com/gopherjs/gopherjs/js"
)

func main() {
	// 调用jQuery
	jQuery := js.Global.Get("$")
	
	// 等价于 jQuery("#myElement").hide()
	jQuery.Invoke("#myElement").Call("hide")
	
	// 使用JSON
	data := map[string]interface{}{
		"name":  "Gopher",
		"score": 100,
	}
	js.Global.Get("console").Call("log", data)
}

2. 导出Go函数供JavaScript调用

package main

import (
	"github.com/gopherjs/gopherjs/js"
)

func Add(a, b int) int {
	return a + b
}

func main() {
	// 导出Add函数到全局作用域
	js.Global.Set("goAdd", js.MakeFunc(func(this *js.Object, args []*js.Object) interface{} {
		return Add(args[0].Int(), args[1].Int())
	}))
}

然后在JavaScript中可以这样调用:

console.log(goAdd(2, 3)); // 输出5

构建选项

GopherJS提供了一些构建选项:

# 生成最小化的JS
gopherjs build --minify main.go -o main.min.js

# 生成source map便于调试
gopherjs build --sourcemap main.go -o main.js

# 直接运行Go程序(转换为JS后在Node.js中运行)
gopherjs run main.go

注意事项

GopherJS不支持所有Go标准库，特别是与操作系统相关的包
性能不如原生Go代码，特别是在数值计算密集型任务上
生成的JS文件通常比较大，适合中小型应用
某些反射功能可能受限

替代方案

如果你需要更现代的解决方案，可以考虑:

WebAssembly (Go 1.11+原生支持)
TinyGo (针对嵌入式和小型WebAssembly目标)

GopherJS仍然是快速将现有Go代码移植到Web的好工具，特别是当需要支持旧浏览器时。

golang将Go代码编译为JavaScript的跨平台插件库gopherjs的使用