我可以在 golang 中定义/拼凑一个 javascript 类吗？

Question

我有 Go 方面的经验，但对于 Javascript 完全是新手。我已经开始尝试 Go 的 js/wasm 目标。我想知道是否可以在 golang 中定义 JS 类。该syscall/js包没有提供直接的方法来做到这一点，但根据教程，JS 类本质上只是一个构造函数和一个原型。所以我尝试Rectangle用 Go 构建教程中的玩具示例：

\n

package main\n\nimport (\n    "syscall/js"\n)\n\n// Attempt to create a simple javascript class:\n//\n// class Rectangle {\n//   constructor(height, width) {\n//     this.height = height;\n//     this.width = width;\n//   }\n//\n//   // Method\n//   area() {\n//     return this.height * this.width;\n//   }\n// }\n\nfunc rectangleArea(this js.Value, args []js.Value) interface{} {\n    height := this.Get("height").Float()\n    width := this.Get("width").Float()\n    return height * width\n}\n\nfunc rectangleConstructor(this js.Value, args []js.Value) interface{} {\n    this.Set("height", args[0])\n    this.Set("width", args[1])\n    return this\n}\n\nfunc main() {\n    const name = "Rectangle"\n    rectangle := js.FuncOf(rectangleConstructor)\n    rectangle.Set("prototype", map[string]interface{}{\n        "constructor": rectangle,\n        "area":        js.FuncOf(rectangleArea),\n    })\n    js.Global().Set(name, rectangle)\n    select {}\n}\n

\n

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

\n

> Rectangle\nfunction _makeFuncWrapper()\n\xe2\x80\x8b  length: 0\n\xe2\x80\x8b  name: ""\n\xe2\x80\x8b  prototype: Object { constructor: _makeFuncWrapper(), area: _makeFuncWrapper() }\n\xe2\x80\x8b\xe2\x80\x8b    area: function _makeFuncWrapper()\xe2\x80\x8b\xe2\x80\x8b\n    constructor: function _makeFuncWrapper()\xe2\x80\x8b\xe2\x80\x8b\n    <prototype>: Object { \xe2\x80\xa6 }\n\xe2\x80\x8b  <prototype>: function ()\n\n> Rectangle2\nclass Rectangle2 { constructor(height, width) }\n  length: 2\n  name: "Rectangle2"\n  prototype: Object { \xe2\x80\xa6 }\n    area: function area()\n    constructor: class Rectangle2 { constructor(height, width) }\n    <prototype>: Object { \xe2\x80\xa6 }\n  <prototype>: function ()\n

\n

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

\n

长话短说，我的问题是：我正在做的事情是在 Go 中定义 JS 类的合理方法吗？如果没有，有更好的方法吗？

\n

Answer 1

浏览器特定的东西，比如创建一个带有类的标签，您将像下面的代码一样与浏览器交互。

\n

然而，不特定于浏览器的事情在原生中继续。

\n

//go:build js\n\npackage main\n\nimport (\n    "strconv"\n    "syscall/js"\n)\n\n//native go code\ntype Retangle struct {\n    width  int64\n    height int64\n}\n\nfunc (r *Retangle) Init(width, height int64) {\n    r.width = width\n    r.height = height\n}\n\nfunc (r Retangle) Area() int64 {\n    return r.width * r.height\n}\n\nfunc main() {\n    var class = //"<![CDATA[\\n"+\n    "div {\\n" +\n    "color: red;\\n" +\n    "}\\n"\n    //"]]>",\n    \n    rect := Retangle{}\n    rect.Init(10, 20)\n    \n    //browser js code\n    var tagStyle js.Value\n    tagStyle = js.Global().Get("document").Call("createElement", "style")\n    tagStyle.Set("innerHTML", class)\n    \n    js.Global().Get("document").Get("body").Call("appendChild", tagStyle)\n    \n    var tagDiv js.Value\n    tagDiv = js.Global().Get("document").Call("createElement", "div")\n    tagDiv.Set("innerHTML", "\xc3\xa1rea: "+strconv.FormatInt(rect.Area(), 10))\n    \n    js.Global().Get("document").Get("body").Call("appendChild", tagDiv)\n}\n

\n

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

\n

生成文件：

\n

GO ?= go\n\n.PHONY: help\n## this help command\nhelp:\n    @printf "Op\xc3\xa7\xc3\xb5es de comandos\\n\\n"\n    @awk '/^[a-zA-Z\\-\\_0-9]+:/ { \\\n        helpMessage = match(lastLine, /^## (.*)/); \\\n        if (helpMessage) { \\\n            helpCommand = substr($$1, 0, index($$1, ":")-1); \\\n            helpMessage = substr(lastLine, RSTART + 3, RLENGTH); \\\n            printf "make %-30s ## %s\\n", helpCommand, helpMessage; \\\n        } \\\n    } \\\n    { lastLine = $$0 }' $(MAKEFILE_LIST)\n\n.PHONY: build\n## build this example\nbuild:\n    $(GO) mod tidy\n    GOARCH=wasm GOOS=js $(GO) build -o main.wasm\n

\n

html输出：

\n

<style>\ndiv {\n    color: red;\n}\n</style>\n<div>\xc3\xa1rea: 200</div>\n

\n