prettyJson 程序
接下来我们来实现 prettyJson 程序。
实现 prettyJson 函数
prettyJson 程序会将未格式化的 JSON 字符串作为输入参数，对其进行格式化，然后将格式化的 JSON 字符串作为输出返回。我们使用 MarshalIndent 函数来完成这个操作。
将以下代码添加到 ~/go/bin/webassembly/cmd/wasm/main.go 文件中。
func prettyJson(input string) (string, error) { var raw interface{} if err := json.Unmarshal([]byte(input), &raw); err != nil { return "", err } pretty, err := json.MarshalIndent(raw, "", " ") if err != nil { return "", err } return string(pretty), nil } 同时需要导一下包。 go 复制代码 import ( "encoding/json" "fmt" )
MarshalIndent 函数有 3 个参数。
第一个是未格式化的原始 JSON。
第二个是添加到 JSON 的每个新行的前缀。我们不添加前缀，所以是空字符串。
第三个参数是为 JSON 的每个缩进添加的字符串。我们传递两个空格字符串。
总之这段代码的含义是，对 JSON 每个新的缩进，都会添加两个空格，通过这种方式来完成 JSON 的格式化。
如果传递的 JSON 字符串是这样的：
{"user_id": "571401777717031","user_name": "代码与野兽","description": "关注real-time web、低代码、数据可视化、web3等领域。"}
那么它的输出下面这种被格式化的 JSON 字符串。\
{ "user_id": "571401777717031", "user_name": "代码与野兽", "description": "关注real-time web、低代码、数据可视化、web3等领域。" }
将 Go 中的函数暴露给 Javascript
现在我们已经实现了 prettyJSON 函数，但是我们还没有将这个函数公开给 Javascript，这样 JavaScript 没办法调用它。
Go 提供了syscall/js 包，它可以将函数从 Go 公开到 Javascript。
将 Go 的函数公开到 JavaScript 的第一步是创建一个 Func 类型的变量。
Func 是一个封装好的 Go 函数，可以被 JavaScript 调用。FuncOf 函数可以创建 Func 类型变量。
在 ~/go/bin/webassembly/cmd/wasm/main.go 中添加 jsonWrapper 函数。
func jsonWrapper() js.Func { jsonFunc := js.FuncOf(func(this js.Value, args []js.Value) interface{} { if len(args) != 1 { return "Invalid no of arguments passed" } inputJSON := args[0].String() fmt.Printf("input %s\n", inputJSON) pretty, err := prettyJson(inputJSON) if err != nil { fmt.Printf("unable to convert to json %s\n", err) return err.Error() } return pretty }) return jsonFunc }
注意需要导包。
import ( "encoding/json" "fmt" "syscall/js" )
FuncOf 函数具有两个参数。
第一个参数是 Javascript 的 this 关键字。this 指向的是 JavaScript 的 global 对象，在浏览器中就是 window 对象。
第二个参数是一个切片，[]js.Value 表示在调用 Javascript 函数时传递的参数。在我们的例子中，它是未格式化的 JSON 输入字符串。
我们首先检查在 Javascript 中是否只传递了一个参数。这个检查是必要的，因为我们只需要一个 JSON 字符串参数。如果不是，我们返回一个字符串消息。
我们使用 args[0].String() 来将参数转换为字符串类型。
获取到输入的 JSON 后，我在第 8 行调用 prettyJson 函数完成美化工作，并返回输出结果。
当从 Go 向 Javascript 返回值时，编译器会自动使用 ValueOf 函数将 Go 中的值转换为 JavaScript 中的值。我们从 Go 中返回一个 string，它被 js.ValueOf() 编译器转换为相应的 JavaScript 字符串类型的值。
我们将 FuncOf 的返回值赋值给 jsonFunc。
现在 jsonFunc 是一个可以被 Javascript 调用的函数。
在最后我们把 jsonFunc 函数返回了出去。
现在我们已经准备好可以从 Javascript 调用的函数了，还差最后一步。
我们需要公开我们刚刚创建的函数，来让 Javascript 调用它。
将 Go 函数暴露给 Javascript 的方法是将 JavaScript 的全局对象的 prettyJSON 属性设置为 jsonWrapper()。
对应的代码如下：
js.Global().Set("prettyJSON", jsonWrapper())
把这行代码添加到 main() 函数的末尾。
在上面的代码中，我们将 Javascript 的 Global 对象的 formatJSON 属性设置为 jsonWrapper 函数的返回值。
现在 jsonFunc 可以使用函数名 prettyJSON 从 JavaScript 调用。
下面是完整的代码：
package main import ( "encoding/json" "fmt" "syscall/js" ) func jsonWrapper() js.Func { jsonFunc := js.FuncOf(func(this js.Value, args []js.Value) interface{} { if len(args) != 1 { return "Invalid no of arguments passed" } inputJSON := args[0].String() fmt.Printf("input %s\n", inputJSON) pretty, err := prettyJson(inputJSON) if err != nil { fmt.Printf("unable to convert to json %s\n", err) return err.Error() } return pretty }) return jsonFunc } func prettyJson(input string) (string, error) { var raw interface{} if err := json.Unmarshal([]byte(input), &raw); err != nil { return "", err } pretty, err := json.MarshalIndent(raw, "", " ") if err != nil { return "", err } return string(pretty), nil } func main() { fmt.Println("Go Web Assembly") js.Global().Set("prettyJSON", jsonWrapper()) }
现在我们来编译和测试刚刚完成的程序。
cd ~/go/bin/webassembly/cmd/wasm/ GOOS=js GOARCH=wasm go build -o ../../assets/json.wasm cd ~/go/bin/webassembly/cmd/server/ go run main.go
上面的命令会编译 wasm 二进制文件并启动 Web 服务器。
从 JavaScript 调用 Go 函数
我们已经成功地将 Go 函数暴露给 JavaScript，现在我们来检查它是否有效。
在浏览器中打开 http://localhost:9090/，然后打开 Javascript 控制台。
在 Javascript 控制台中调用 prettyJSON 函数：
prettyJSON('{"user_id": "571401777717031","user_name": "代码与野兽","description": "关注real-time web、低代码、数据可视化、web3等领域。"}')
这时我们得到了一个错误：Error: Go program has already exited
错误的原因是我们的 Go 程序在当 Javascript 调用时已经退出了。
该如何解决这个问题呢？
其实很简单，我们只需要保证 Go 程序在 JavaScript 调用它时仍然处于运行状态。
在 Go 中实现这个需求最简单的方法就是通过 channel 来让程序一直等待。
func main() { fmt.Println("Go Web Assembly") js.Global().Set("formatJSON", jsonWrapper()) <-make(chan bool) }
重新编译程序，然后再次尝试在浏览器中调用 prettyJSON 函数。
prettyJSON('{"user_id": "571401777717031","user_name": "代码与野兽","description": "关注real-time web、低代码、数据可视化、web3等领域。"}')
现在 JSON 将会被美化。
当我们没有传入参数时，也会有正常的错误输出：
OK，通过本文的讲解，相信你已经成功地通过 JavaScript 调用了一个使用 Go 编写的函数。
