翻译:疯狂的技术宅未经允许严禁转载
Vugo 是什么
Vugu 是一个 Go语言开发库,可以很容易地使用 Go 语言编写 Web 用户界面。
其基本思路如下:
-
在
.vugu
文件中编写 UI 组件。这些文件类似于你在 JavaScript 框架中看到的 UI 组件(例如 .vue 文件)。但是它们不包含 JavaScript,而是包含用于if
、for
和其他类似的 Go 语言表达式。 -
每个 .vugu 文件都被转换为对应的 .go 文件。 Vugu 项目中有一个开发服务器,可以在页面重新加载时自动执行此操作,或者用
vugugen
命令行工具与go generate
集成。代码生成还尝试在需要时提供合理的默认值,以便 .vugu 文件包含尽可能少的样板,同时也然允许进行大量的自定义。 - 你的项目被编译为 WebAssembly 模块并在浏览器中运行。同样,开发服务器在启动项目时也很容易。随着项目的发展,你需要自定义此过程的一部分,不过这些可以轻松的完成。
- Vugu库(包:github.com/vugu/vugu)提供了在网页上将 HTML DOM 的功能有效同步到 .vugu 文件中的标记。同时支持附加 DOM 事件处理(单击等)和将大页面分解成组件等功能。
Vugo 快速上手
让我们创建一个在你的浏览器中运行的基本工作Vugu应用程序。它只需要三个小文件即可启动。确保至少安装了Go 1.12。
-
在任何你喜欢的地方创建一个新的空文件夹。我们将用名称
testapp
作为示例。你创建的每个文件都将直接放在此文件夹中,不需要子文件夹。 -
创建
go.mod
,它用来指定 Go 模块名称。首先你可以按照显示的模式选择自己喜欢的名称作为占位符。例如:
module example.org/someone/testapp
-
Create a Vugu component file. We'll put a click handler and an element that toggles to demonstrate some basic functionality. This first component should be called
root.vugu
: -
创建一个 Vugu 组件文件。我们将放置一个单击处理程序和一个切换元素来演示一些基本功能。第一个组件应该叫做
root.vugu
:
<div class="my-first-vugu-comp">
<button @click="data.Toggle()">Test</button>
<div vg-if="data.Show">I am here!</div>
</div>
<style>
.my-first-vugu-comp { background: #eee; }
</style>
<script type="application/x-go">
type RootData struct { Show bool }
func (data *RootData) Toggle() { data.Show = !data.Show }
</script>
-
创建开发服务器代码文件。注意,这个文件不会被编译为 WebAssembly。这是一个为你的程序提供服务的服务器。
devserver.go
:
// +build ignore
package main
import (
"log"
"net/http"
"os"
"github.com/vugu/vugu/simplehttp"
)
func main() {
wd, _ := os.Getwd()
l := "127.0.0.1:8844"
log.Printf("Starting HTTP Server at %q", l)
h := simplehttp.New(wd, true)
// include a CSS file
// simplehttp.DefaultStaticData["CSSFiles"] = []string{ "/my/file.css" }
log.Fatal(http.ListenAndServe(l, h))
}
-
运行服务器。在同一目录下,运行命令
go run devserver.go
片刻之后,服务器就应该启动。它在 Windows、Linux 或 Mac 上的工作方式相同。
- 访问: http://127.0.0.1:8844/
- 惊叹于你创造的奇迹。
Vugu 文件概述
Vugu 文件有三个部分:标记、样式和代码
标记是 HTML 元素,它是文件的显示部分。 通常它是一个简单的 div 标签,例如:
<div class="some-name">
<!-- ... -->
</div>
它显示在文档中的适当位置。 根组件(默认名为 “root” 并且位于 root.vugu 中)通常位于页面的 <body>
标记内。 除 <script>
或 <style>
之外,该元素可以是任何类型。
样式是一个常规的 <style>
标记,包含使用此组件输出的 CSS。 为了避免冲突,样式应该适当地加上前缀(对应于上面顶级标记元素上的 id 或类)。
代码是 Go 语言代码,会被逐字复制到最终的 .go 文件中。 它被放入具有特定内容类型的脚本标记中,如下所示:
<script type="application/x-go">
// Go code here
</script>
注意:不支持 JavaScript,只支持 Go 代码。 只可以有一种语言。
本文首发微信公众号:前端先锋
欢迎扫描二维码关注公众号,每天都给你推送新鲜的前端技术文章
欢迎继续阅读本专栏其它高赞文章:
- 深入理解Shadow DOM v1
- 一步步教你用 WebVR 实现虚拟现实游戏
- 13个帮你提高开发效率的现代CSS框架
- 快速上手BootstrapVue
- JavaScript引擎是如何工作的?从调用栈到Promise你需要知道的一切
- WebSocket实战:在 Node 和 React 之间进行实时通信
- 关于 Git 的 20 个面试题
- 深入解析 Node.js 的 console.log
- Node.js 究竟是什么?
- 30分钟用Node.js构建一个API服务器
- Javascript的对象拷贝
- 程序员30岁前月薪达不到30K,该何去何从
- 14个最好的 JavaScript 数据可视化库
- 8 个给前端的顶级 VS Code 扩展插件
- Node.js 多线程完全指南
- 把HTML转成PDF的4个方案及实现
有疑问加站长微信联系(非本文作者)