访问 DOM API

我会带大家做一个小案例，这里案例会使用 go 的 crypto/rand 库生成 0-10 万之间的真随机数，并将它放置到 p 标签中输入到页面上。

首先实现一个 myRand 函数，用来生成随机数。

func myRand() (*big.Int, error) {
	n, err := rand.Int(rand.Reader, big.NewInt(100000))
	return n, err
}

然后实现包裹函数。

func randWrapper() js.Func {
	return js.FuncOf(func(this js.Value, args []js.Value) interface{} {
		jsDoc := js.Global().Get("document")
		if !jsDoc.Truthy() {
			return "document is not defined"
		}
		containerEl := jsDoc.Call("getElementById", "rand-container")
		if !containerEl.Truthy() {
			return "rand-container is not find"
		}
		p := jsDoc.Call("createElement", "p")
		n, err := myRand()
		if err != nil {
			return "unable to generate random number"
		}
		p.Set("innerText", n.Text(10))
		containerEl.Call("append", p)
		return nil
	})
}

包裹函数中的代码主要就是在 Go 中访问 DOM API 的代码，我在这里给大家解释一下。

js.Global()：该方法的返回值对应的是 JavaScript 的全局对象，也就是浏览器的 window 对象。
obj.Get("prop")：obj 代表 JavaScript 中的某个对象，Get 方法可以访问它的 key。就像是 JavaScript 中的 obj.prop。
obj.Truthy()：该方法和 obj == true 类似，用来判断是否为 nil。
obj.Call("method")：该方法用来调用某个对象身上的方法，类似于 JavaScript 中的 obj.method()。我们也可以在后面传递其他参数，作为实际被调用方法的参数。
obj.Set("prop", value)：obj 代表 JavaScript 中的某个对象，Set 方法可以设置它的属性。就像是 JavaScript 中的 obj.prop = value。值得一提的是，如果想获取或者设置全局变量，都可以通过 jsGlobal().Get/jsGlobal().Set 来操作。

解释完，上面的代码就不难理解了。

我们首先获取 document 对象，然后再去获取一个 id 为 rand-container 的元素。

再去创建一个 p 元素，调用 rand 方法获取随机数，把随机数设置为 p 的内容。

最后把 p 添加到 rand-container 元素中。

实现好这两个函数后，在 main 方法中将这个方法加入到全局对象中。

	js.Global().Set("addRand", randWrapper())

然后将代码编译为 wasm 模块。

来到 index.html 中，添加两个元素。

<div id="rand-container"></div>
<button onclick="addRand()">add rand</button>

启动服务器。

go run main.go

来到浏览器中看一下效果。

大功告成！

Go WASM：如何在 Go 中访问 DOM API？

访问 DOM API