我反對(duì)學(xué)習(xí) JavaScript 還有前端開發(fā)已經(jīng)不是秘密了。事實(shí)上，在 CSS 出現(xiàn)前我就學(xué)會(huì)了 HTML，不過(guò) JavaScript 是我做 Web 開發(fā)好久后的事情了。當(dāng)看到現(xiàn)代 Web 的發(fā)展時(shí)，我感到不寒而栗。這個(gè)生態(tài)對(duì)于脫離已久的我來(lái)說(shuō)是如此迷茫。Node, webpack, yarn, npm, frameworks, UMD, AMD，我的天啊!

目前我關(guān)注 WebAssembly 也已經(jīng)有段時(shí)間了，期望它能讓我在沒(méi)有典型 JavaScript 構(gòu)建的情況下編寫 Web 應(yīng)用程序。

當(dāng)聽到 WebAssembly(wasm) 最近支持 Go 語(yǔ)言時(shí)，我知道實(shí)驗(yàn)的時(shí)機(jī)已經(jīng)成熟，并且迫切期待嘗試。在嘗試之前我讀了些好文章，而這篇文章將記錄我的一些體驗(yàn)。

為了用 Go 來(lái)寫 wasm，你需要先下載 Go 源碼并編譯好。從 Go 1.11 開始，WebAssembly 將被原生支持，但現(xiàn)在還沒(méi)有 release。

你可以按照 這里 的步驟來(lái)編譯 Go。因?yàn)?Go 本身也是用 Go 語(yǔ)言實(shí)現(xiàn)的，所以在編譯之前你需要先有一個(gè)可以正常工作的 Go 二進(jìn)制版本來(lái)自舉自己。最終，你系統(tǒng)里會(huì)有兩個(gè)不同的 Go 版本。 注意：如果你后面忘了你系統(tǒng)里安裝了兩個(gè)版本的 Go，那可能會(huì)給你造成一些困擾。 可以使用 direnv 來(lái)管理 Go 版本，這樣你就可以為不同的項(xiàng)目來(lái)配置不同的 Go 了。

安裝***的 Go 后，就可以體驗(yàn) WebAssembly 了。你需要一個(gè) HTML 文件和一個(gè) JavaScript 腳本來(lái)加載生成的 wasm 文件。這些都包含在 Go 安裝路徑下的 misc/wasm 目錄里。你可以復(fù)制它們到項(xiàng)目目錄，修改它們以加載你的 wasm 文件。

我的***個(gè)項(xiàng)目有點(diǎn)雄心勃勃，我打算用 Go 語(yǔ)言構(gòu)建一個(gè)看起來(lái)像 Web 組件 的東西，編譯成 WebAssembly。我并沒(méi)有把整件事做完，因?yàn)槲冶幻考乱绾味甲龅煤门眯臒┮鈦y。

首先，我將 GOROOT/misc/wasm 中的 HTML 和 JavaScript 文件復(fù)制到一個(gè)新目錄中，并添加了一個(gè) main.go 文件。根據(jù)我預(yù)先想好的計(jì)劃，我把 HTML 放進(jìn) DOM 的一個(gè)現(xiàn)有節(jié)點(diǎn)，這個(gè) DOM 要在 HTML 中聲明。所以我創(chuàng)建了一個(gè)帶有 thing 作為 ID 的 HTML section 標(biāo)簽。

<section class="main" id="thing" >Please wait...</section> 

我在 HTML 文件底部的腳本標(biāo)簽上面插入了這個(gè)。接下來(lái)，我知道我想程序化地替換這個(gè)節(jié)點(diǎn)，所以我查找了 Go 的 wasm 庫(kù)中與 DOM 交互的語(yǔ)法。為 Go 添加了一個(gè) syscall/js 包，允許與 DOM 進(jìn)行交互。我使用了這段 Go 代碼得到了一個(gè) HTML 帶有 thing 作為 ID 的節(jié)點(diǎn)的引用：

el := js.Global.Get("document").Call("getElementById", "thing") 

現(xiàn)在我有一個(gè)空DOM節(jié)點(diǎn)的引用，我可以使用渲染的HTML來(lái)填充。因此下一步其實(shí)就是創(chuàng)建一些HTML并將其填充進(jìn)去。

我將著名的TodoMVC應(yīng)用作為靈感。首先我創(chuàng)建兩個(gè)文件：todo.go和todolist.go。這些文件包含一些Go結(jié)構(gòu)來(lái)表示Todo事項(xiàng)，和Todo事項(xiàng)列表。

type Todo struct { 
    Title     string 
    Completed bool 
    //Root      js.Value 
    tree *vdom.Tree 
} 
 
type TodoList struct { 
    Todos []Todo 
    Component 
} 
 
type Component struct { 
    Name     string 
    Root     js.Value 
    Tree     *vdom.Tree 
    Template string 
} 

我也有點(diǎn)自大，開始將東西提取到Component類型中，并認(rèn)為我可以將它嵌入到我的自定義類型中，以便向它們提供Web 組件功能。 我沒(méi)有完成這個(gè)想法。。。在后文你會(huì)看到原因。

這些自定義Go類型每一個(gè)都有一個(gè)Render()方法和模板：

var todolisttemplate = `<ul> 
{{range $i, $x := $.Todos}}  
    {{$x.Render}}  
{{end}} 
</ul>` 
 
func (todoList *TodoList) Render() error { 
 
    tmpl, err := template.New("todolist").Parse(todoList.Template) 
    if err != nil { 
        return err 
    } 
    // Execute the template with the given todo and write to a buffer 
    buf := bytes.NewBuffer([]byte{}) 
    if err := tmpl.Execute(buf, todoList); err != nil { 
        return err 
    } 
    // Parse the resulting html into a virtual tree 
    newTree, err := vdom.Parse(buf.Bytes()) 
    if err != nil { 
        return err 
    } 
 
    if todoList.Tree != nil { 
        // Calculate the diff between this render and the last render 
        //  patches, err := vdom.Diff(todo.tree, newTree) 
}       //  if err != nil { 
        //      return err 
        //  } 
 
        // Effeciently apply changes to the actual DOM 
        //      if err := patches.Patch(todo.Root); err != nil { 
        //          return err 
        //      } 
    } else { 
 
        todoList.Tree = newTree 
    } 
    // Remember the virtual DOM state for the next render to diff against 
    todoList.Tree = newTree 
 
    todoList.Root.Set("innerHTML", string(newTree.HTML())) 
    return nil 
} 

我的想法是用我找到的 vdom 包來(lái)做這些渲染，這樣的話渲染的效率會(huì)更高一些。這就是我遇到的***個(gè)問(wèn)題。

GopherJS和Go/wasm之間的區(qū)別

vdom包專為GopherJS而寫，而 GopherJS 是一個(gè)從Go到Javascript的轉(zhuǎn)譯器?；诒憬?，GopherJS使用js.Object類型。Go的新wasm庫(kù)syscall/js使用js.Value類型。它們精神上是相似的，但在實(shí)現(xiàn)上大為不同。這意味著我使用vdom渲染的想法是行不通的，除非我將vdom使用的js.Object移植到使用js.Value。盡管vdom的tree.HTML()函數(shù)在不用修改的情況下就可以運(yùn)行，因此我可以將HTML節(jié)點(diǎn)的內(nèi)部HTML設(shè)置為vdom解析出的內(nèi)容。Render()函數(shù)解析Go結(jié)構(gòu)模板，將Go結(jié)構(gòu)的實(shí)例作為上下文來(lái)傳值。然后它用vdom庫(kù)創(chuàng)建一個(gè)解析dom樹，而且在函數(shù)的***一行渲染樹：

todoList.Root.Set("innerHTML", string(newTree.HTML())) 

此時(shí)，我已經(jīng)有了一個(gè)可以運(yùn)行的Go/wasm原型，沒(méi)有連接任何事件。但是它確實(shí)可以渲染成dom并顯示在瀏覽器。這是巨大的一步;我當(dāng)時(shí)很興奮。

我創(chuàng)建了一個(gè)Makefile，這樣我就不用一次又一次的輸入冗長(zhǎng)的編譯命令：

wasm2: 
    GOROOT=~/gowasm GOARCH=wasm GOOS=js ~/gowasm/bin/go build -o example.wasm markdown.go 
 
wasm: 
    GOROOT=~/gowasm GOARCH=wasm GOOS=js ~/gowasm/bin/go build -o example.wasm . 
 
build-server: 
    go build -o server-app server/server.go 
 
run: build-server wasm 
    ./server-app 

基于現(xiàn)在的Web Assembly狀態(tài)，這個(gè)makefile也指出了一個(gè)至關(guān)重要的問(wèn)題。新型瀏覽器會(huì)忽略WASM文件，除非給他們提供合適的MIME類型。 這篇文章 有一個(gè)簡(jiǎn)單的HTTP文件服務(wù)器，它為web assembly文件設(shè)置了正確的MIME類型。我將其復(fù)制到我的項(xiàng)目，并將其用于應(yīng)用中。如果你的web服務(wù)器確實(shí)為.sasm文件配置好了，那么你就不需要自定義服務(wù)器。

提出挑戰(zhàn)

在這一點(diǎn)上，我意識(shí)到Web Assembly可以正常運(yùn)行，而也許更重要的是：GopherJS的很多代碼很少甚至不用修改就可以在Web Assembly可以正常運(yùn)行。我給自己提出挑戰(zhàn)( nerd sniped )。我嘗試的下一件事情是找一個(gè) vecty 應(yīng)用并編譯它。由于vecty是專為GopherJS所寫，而且使用了js.Object類型而不是js.Vaule，因此要想失敗很困難。為了讓vecty在wasm中編譯，我 fork了vecty ，然后做了一些修改，一些處理，并注釋了很多代碼。

最終的結(jié)果就是放在在vecty/example目錄中的markdown編輯器可以在Web Assembly中***運(yùn)行。本文有點(diǎn)冗長(zhǎng)，因此我會(huì)讓你 在這 看源碼?？偨Y(jié)：它與GopherJS版本幾乎完全相同，但是在main()退出的時(shí)候web assembly也會(huì)退出，因此為了阻止退出并保持應(yīng)用運(yùn)行，我在main()結(jié)尾添加了一個(gè)空的通道接收。

事件

Go 的 syscall/js 使用了一個(gè)非常不同的方法來(lái)進(jìn)行事件注冊(cè)，我不得不修改 vecty 的事件 注冊(cè)代碼 才能使用 wasm 新的回調(diào)注冊(cè)，在這里我花了非常多的時(shí)間。不過(guò)直到現(xiàn)在，這個(gè)方法工作的還不錯(cuò)。

結(jié)論

通過(guò)對(duì)這些事件課程的學(xué)習(xí)，我認(rèn)定 WebAssembly 就是 Web 開發(fā)的未來(lái)。它可以使用任何語(yǔ)言作為“前端語(yǔ)言”來(lái)進(jìn)行 Web 開發(fā)，然后編譯為 wasm 就可以了。這給像我一樣并不想再學(xué)習(xí) Javascript，而可以使用自己喜歡的語(yǔ)言來(lái)進(jìn)行 Web 開發(fā)的人帶來(lái)了很多好處。