Vugu：Go + WebAssembly的现代UI库

时间 2019-11-10

标签 vugu webassembly 现代繁體版

原文原文链接

翻译：疯狂的技术宅
来源：https://www.vugu.org/css

未经容许严禁转载html

Vugo 是什么

Vugu 是一个 Go语言开发库，能够很容易地使用 Go 语言编写 Web 用户界面。前端

其基本思路以下：vue

在 .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。git

在任何你喜欢的地方建立一个新的空文件夹。咱们将用名称 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 文件有三个部分：标记、样式和代码github

标记是 HTML 元素，它是文件的显示部分。一般它是一个简单的 div 标签，例如：golang

<div class="some-name">
  <!-- ... -->
</div>

它显示在文档中的适当位置。根组件（默认名为 “root” 而且位于 root.vugu 中）一般位于页面的 <body> 标记内。除 <script> 或 <style> 以外，该元素能够是任何类型。面试

样式是一个常规的 <style> 标记，包含使用此组件输出的 CSS。为了不冲突，样式应该适当地加上前缀（对应于上面顶级标记元素上的 id 或类）。segmentfault

代码是 Go 语言代码，会被逐字复制到最终的 .go 文件中。它被放入具备特定内容类型的脚本标记中，以下所示：

<script type="application/x-go">
// Go code here
</script>

注意：不支持 JavaScript，只支持 Go 代码。只能够有一种语言。

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...