在 golang 中能够编写/构建一个 javascript 类吗？

你在学习Golang相关的知识吗？本文《在 golang 中能够编写/构建一个 javascript 类吗？》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

我有 go 方面的经验，但对于 javascript 完全是新手。我已经开始尝试 go 的 js/wasm 目标。我想知道是否可以在 golang 中定义 js 类。 syscall/js 包没有提供直接的方法来执行此操作，但根据教程，js 类本质上只是一个构造函数和原型。因此，我尝试根据 go 教程构建 rectangle 玩具示例：

package main

import (
    "syscall/js"
)

// attempt to create a simple javascript class:
//
// class rectangle {
//   constructor(height, width) {
//     this.height = height;
//     this.width = width;
//   }
//
//   // method
//   area() {
//     return this.height * this.width;
//   }
// }

func rectanglearea(this js.value, args []js.value) interface{} {
    height := this.get("height").float()
    width := this.get("width").float()
    return height * width
}

func rectangleconstructor(this js.value, args []js.value) interface{} {
    this.set("height", args[0])
    this.set("width", args[1])
    return this
}

func main() {
    const name = "rectangle"
    rectangle := js.funcof(rectangleconstructor)
    rectangle.set("prototype", map[string]interface{}{
        "constructor": rectangle,
        "area":        js.funcof(rectanglearea),
    })
    js.global().set(name, rectangle)
    select {}
}

它似乎可以在我的浏览器的javascript控制台中工作：我可以实例化一个rectangle，扩展该类，等等。凉爽的。让我担心的一件事是，我的 rectangle 类和 js 控制台中定义的相同 rectangle2 类之间的直接比较会产生差异：

> Rectangle
function _makeFuncWrapper()
​  length: 0
​  name: ""
​  prototype: Object { constructor: _makeFuncWrapper(), area: _makeFuncWrapper() }
​​    area: function _makeFuncWrapper()​​
    constructor: function _makeFuncWrapper()​​
    <prototype>: Object { … }
​  <prototype>: function ()

> Rectangle2
class Rectangle2 { constructor(height, width) }
  length: 2
  name: "Rectangle2"
  prototype: Object { … }
    area: function area()
    constructor: class Rectangle2 { constructor(height, width) }
    <prototype>: Object { … }
  <prototype>: function ()

当然，这些差异可能都是由于特殊的 go/wasm 魔法造成的。

长话短说，我的问题是：我正在做的事情是在 go 中定义 js 类的合理方法吗？如果不行的话有更好的办法吗？

正确答案

特定于浏览器的内容，例如创建内部包含类的标记，您将像下面的代码一样与浏览器交互。

但是，不特定于浏览器的事情将在原生中继续。

//go:build js

package main

import (
    "strconv"
    "syscall/js"
)

//native go code
type retangle struct {
    width  int64
    height int64
}

func (r *retangle) init(width, height int64) {
    r.width = width
    r.height = height
}

func (r retangle) area() int64 {
    return r.width * r.height
}

func main() {
    var class = //"<![cdata[\n"+
    "div {\n" +
    "color: red;\n" +
    "}\n"
    //"]]>",
    
    rect := retangle{}
    rect.init(10, 20)
    
    //browser js code
    var tagstyle js.value
    tagstyle = js.global().get("document").call("createelement", "style")
    tagstyle.set("innerhtml", class)
    
    js.global().get("document").get("body").call("appendchild", tagstyle)
    
    var tagdiv js.value
    tagdiv = js.global().get("document").call("createelement", "div")
    tagdiv.set("innerhtml", "área: "+strconv.formatint(rect.area(), 10))
    
    js.global().get("document").get("body").call("appendchild", tagdiv)
}

你能理解何时使用其中之一吗？

生成文件：

go ?= go

.phony: help
## this help command
help:
    @printf "opções de comandos\n\n"
    @awk '/^[a-za-z\-\_0-9]+:/ { \
        helpmessage = match(lastline, /^## (.*)/); \
        if (helpmessage) { \
            helpcommand = substr($$1, 0, index($$1, ":")-1); \
            helpmessage = substr(lastline, rstart + 3, rlength); \
            printf "make %-30s ## %s\n", helpcommand, helpmessage; \
        } \
    } \
    { lastline = $$0 }' $(makefile_list)

.phony: build
## build this example
build:
    $(go) mod tidy
    goarch=wasm goos=js $(go) build -o main.wasm

html 输出：

<style>
div {
    color: red;
}
</style>
<div>área: 200</div>

以上就是《在 golang 中能够编写/构建一个 javascript 类吗？》的详细内容，更多关于的资料请关注golang学习网公众号！