文档章节

go 前端框架 vecty 学习

electricface
 electricface
发布于 04/30 09:06
字数 736
阅读 54
收藏 1

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 方法重新渲染此组件,界面上就能看到按钮上的文字被改变了。

定义组件结构

type Comp1 struct {
	v.Core
	A int `vecty:"prop"`
}

加上 vecty:"prop" 才是一个合格的组件属性。如果不给 A 字段加这个 tag,那么在 Comp1 的上级组件被重新渲染时,就不会考虑 Comp1 的 A 属性值,就认为 Comp1 没有任何改变,不会重新渲染 Comp1,不会改变 Comp1 的 HTML,不会调用 Comp1 的 Rerender 方法。

如果给 A 字段加上这个 tag,那么在 Comp1 的上级被重新渲染时,就会考虑 Comp1 的 A 的值,与之前的 Comp1 的 A 值对比,如果不同,则认为需要重新渲染 Comp1。

引用底层的 javascript 元素

在事件处理函数中引用组件渲染出的某个 javascript 节点

例子

type AddTodoView struct {
	v.Core
	store vstore.Store
}

func (atv *AddTodoView) Render() v.ComponentOrHTML {
	input := elem.Input()
	return elem.Div(
		elem.Form(
			v.Markup(
				event.Submit(func(e *v.Event) {
				}).PreventDefault(),
			),

			input,
			elem.Button(
				v.Markup(
					prop.Type("submit"),
					event.Click(func(e *v.Event) {
						println("btn click")
						node := input.Node()
						value := strings.TrimSpace(node.Get("value").String())
						if value != "" {
							atv.store.Dispatch(addTodo(value))
							node.Set("value", "")
						}
					}),
				),

				v.Text("Add Todo"),
			),
		),
	)
}

以上代码中,为了简单,直接把按钮的 click 事件处理函数定义在组件的 Render 方法中,在事件处理函数内引用了外部变量 input,调用它的 Node 方法获取底层的输入框 javascript 对象,类型为 *js.Object,就能直接对输入框进行操作,比如获取输入框的内容和清空输入框内容。

© 著作权归作者所有

上一篇: fstab 选项
下一篇: gopherjs xhr 学习
electricface

electricface

粉丝 2
博文 38
码字总数 33248
作品 0
武汉
私信 提问
vecty vstore 学习

vstore 是用于 vecty 框架的类似 redux 的状态管理库。 安装 代码仓库: https://github.com/marwan-at-work/vstore 定义 action 一般使用结构定义,比如 和 定义 state 和 reducer 比如 to...

electricface
04/28
17
0
WebAssembly 和 Go语言:对未来的观望

我反对学习 JavaScript 还有前端开发已经不是秘密了。事实上,在 CSS 出现前我就学会了 HTML,不过 JavaScript 是我做 Web 开发好久后的事情了。当看到现代 Web 的发展时,我感到不寒而栗。这...

程序师
2018/08/01
0
0
为什么前端工作越来越难找了?(精品学习资料限时限额免费放送)

在互联网的发展下,新生出一大批互联网公司,不断有传统企业也深受其影响开始逐渐互联网化,IT行业也逐渐成为大家追捧的“高薪”行业。 前端作为热门职业之一,它在技术上的发展也是有目共睹...

uw63zqpkxwlrl1
2018/05/29
0
0
前端学习之路(从入门到入坑...)

学习前端两年多了,拿了阿里巴巴实现offer,想结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考...

阿小庆
2018/06/14
0
0
2019年应该如何学习前端开发?

近两年来,前端开发工程师越来越火了,2019年已经到来了,很多准备入行前端开发工程师的小伙伴们,不知道准备得怎么样了呢? 有的朋友在想方设法的学习,争取在年后的金三银四能靠实力找到一...

WEB开发阿靖
02/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

前端技术之:Prisma Demo服务部署过程记录

安装前提条件: 1、已经安装了docker运行环境 2、以下命令执行记录发生在MackBook环境 3、已经安装了PostgreSQL(我使用的是11版本) 4、Node开发运行环境可以正常工作 首先需要通过Node包管...

popgis
今天
5
0
数组和链表

数组 链表 技巧一:掌握链表,想轻松写出正确的链表代码,需要理解指针获引用的含义: 对指针的理解,记住下面的这句话就可以了: 将某个变量赋值给指针,实际上就是将这个变量的地址赋值给指...

code-ortaerc
今天
4
0
栈-链式(c/c++实现)

上次说“栈是在线性表演变而来的,线性表很自由,想往哪里插数据就往哪里插数据,想删哪数据就删哪数据...。但给线性表一些限制呢,就没那么自由了,把线性表的三边封起来就变成了栈,栈只能...

白客C
今天
43
0
Mybatis Plus service

/** * @author beth * @data 2019-10-20 23:34 */@RunWith(SpringRunner.class)@SpringBootTestpublic class ServiceTest { @Autowired private IUserInfoService iUserInfoS......

一个yuanbeth
今天
5
0
php7-internal 7 zval的操作

## 7.7 zval的操作 扩展中经常会用到各种类型的zval,PHP提供了很多宏用于不同类型zval的操作,尽管我们也可以自己操作zval,但这并不是一个好习惯,因为zval有很多其它用途的标识,如果自己...

冻结not
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部