vecty.js

vecty.js 介绍

gopherjs 是把 go 编译为 js 的工具。 vecty 是基于 gopherjs 的一种类似 react 的开发框架。

安装 gopherjs 和 vecty

go get -u github.com/gopherjs/gopherjs

go get -u github.com/gopherjs/vecty

vecty 自带的例子在 example 目录，有 todomvc 和 markdown 编辑器。

简单的例子

package main

import (

"strconv"

v "github.com/gopherjs/vecty"

"github.com/gopherjs/vecty/elem"

"github.com/gopherjs/vecty/event"

)

func main() {

v.SetTitle("title message swt")

v.RenderBody(&MyComponent{})

}

type MyComponent struct {

v.Core

btnCount int

}

func (mc *MyComponent) onButtonClick(e *v.Event) {

println("click my component button")

mc.btnCount++

v.Rerender(mc)

}

func (mc *MyComponent) Render() v.ComponentOrhtml {

return elem.Body(

elem.Button(

v.Markup(

event.Click(mc.onButtonClick),

),

v.Text("btn"+strconv.Itoa(mc.btnCount)),

)

}

运行它

在 $GOPATH/src/ele/gopherjs/t1 文件写下这个文件，命名为 t1.go。然后 cd 到 t1 文件夹，运行命令 gopherjs serve，将会在 localhost:8080 运行服务，使用浏览器访问 http://localhost:8080/ ，则可以查看运行结果。

解释

这个例子中，定义了组件 MyComponent，需要内嵌 vecty.Core 结构，实现 vecty.Component 接口要求的 Render 方法。

Render 方法负责构建代表组件的 html。

再看 main 方法，调用 vecty.SetTitle 方法设置标题，调用 vecty.RenderBody(&MyComponent{}) 方法把 MyCompoent 组件渲染为文档的 body。

回到 MyComponent 的 Render 方法，在 Button 内包含 Markup， Markup 内包括 event.Click，给 Button 附加了 click 事件处理函数 onButtonClick。

事件处理函数 onButtonClick 修改了此组件的 btnCount 字段，然后调用 vecty.Rerender 方法重新渲染此组件，界面上就能看到按钮上的文字被改变了。

GitHub:https://github.com/gopherjs/vecty

网站描述:基于 gopherjs 的一种类似 React 的开发框架

vecty.js

官方网站：