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 目录，有 t odo mvc 和 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官方网站
官方网站：
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。