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 代碼。只能夠有一種語言。

本文首發微信公衆號：前端先鋒

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

歡迎繼續閱讀本專欄其它高贊文章：

更多文章...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。