使用Go开发前端应用

1、使用go开发前端应用首先，你需要先下载安装一下go。下载地址：/ 安装其实很容易，这里就不说了，安装完成之后，控制台执行下如下指令，确认下go的安装是否胜利。假如能够正常输出，证实你的环境已经安装好了，是不是很容易？go在1.11版本中，加入了对 webassembly 的体验支持，目前go的版本已经到了1.14了，可以说对于 webassembly 已经支持的十分好了。关于go语言中 webassembly 的更多信息，可以查看正式的wiki： 。正由于go编写的代码可以转化为webassembly，而webassembly又是可以在任何现代扫瞄器中运行的二进制格式的语言

2、，所以，用法go来开发前端应用，也就成为了可能。挺直看代码：比如你的html页面的代码如下：页面当中，有一个button元素，button的id为test。下面来看下在go语言中怎么猎取这个元素。在上面的代码中，我们调用syscall/js包里面，提供的办法，来猎取document对象，并且调用document的getelementbyid办法来猎取我们html页面中的button元素。但是到这里，其实什么都看不出来，我们尝试猎取完button元素之后，将button的按钮文字修改为changed by go。写完之后，代码也许是上面这个样子，其他部分就不贴了。到这里，一个基本的demo算写完

3、了，那怎么来测试呢？首先我们需要将go的代码，编译成 webassembly，然后我们还需要用到go给我们提供的一个js库，这个是用来在js中，调用go编译生成的webassembly，然后执行里面的代码规律用的。首先我们复制下go提供的js库到名目中。在项目根名目下运行下面的指令：运行完之后，也许是这个样子。然后我们需要编译go代码成wasm格式。用法下面的指令，将go代码编译成wasm格式。这里需要解释一下，goos和goarch这两个环境变量的作用。 在go里面，可以将go代码编译成各个平台的目标结果。比如goos，可以指定为windows或者linux等。在这里，还可以指定为js。go

4、arch表示系统架构，比如可以指定为amd64或者386等。在这里，还可以指定为wasm。执行上面的指令之后，我们可以看到名目下多了一个wasm的文件。到这里，预备工作差不多了。我们需要在html中引入go提供的js库，然后去用法刚刚我们编译生成的main.wasm了。修改html，如下：上面的代码，webassembly.instantiatestreaming办法挺直从流式底层源编译和实例化webassembly模块。这是加载wasm代码一种十分有效的优化方式。fetch就不用说了。是一个对象，这个对象会被导入到 wasm的模块中，这样在wasm的模块中就可以拜访到js对象。在这里，go.

5、importobject也许长这样子：看go提供的js库中的源码，里面有注释。这里的importobject主要是用来在wasm文件里面调用js代码的（在wasm里面调用js提供的办法），在go里面，主要用法来处理sp（stack pointer）的变更。上面的代码预备好之后，我们可以启动一个http的服务，推举用法http-server来启动，启动完成之后，拜访可以看到，拜访之后，正确还在了我们的wasm文件，并且执行了我们之前用go写的代码，将button的文字改成了changed by go。上面的代码，我们只是在拜访的时候，修改了按钮的文字，并没有别的任何操作，下面来看下假如，给按钮添

6、加一个点击大事。首先我们需要声明一个函数，用来作为点击大事的回调函数。上面的代码中，首先，通过调用js包的funcof创建了一个用于在js里面调用的函数，在funcof的参数里面，我们可以看到定义的回调函数，这个函数有两个参数，第一个参数代表你js调用的时候的this对象，其次个参数表示调用时候的参数。添加完上面的代码之后，我们重新生成下wasm文件，然后刷新页面，点击下按钮，看下是否会输出button clicked这个字符串。点击完成之后，发觉报错了，提醒go程序已经退出，这是为啥呢？看上面的代码，我们发觉在main函数里面，执行完全部的代码之后，go的主线程就挺直退出了，而我们用法js.

7、funcof创建的回调函数，其实是在单独的一个goroutine里面执行的，主线程都退出了，那goroutine自然无法执行了。为了解决这个错误，我们需要保证主线程不退出。 修改代码如下：这里加了一个channel类型的变量，关于channel的学问，可以查看正式的文档，或者看我之前写的go学习笔记（juejin.im/post/5a2b4e这里用法channel主要用来防止go的主线程退出，在最后一句，<- signal ， 表示从这个signal的通道中猎取数据，但是我们可以看到，并没有地方给这个通道塞入数据，所以，主线程会向来堵塞在这里，这样，我们的大事回调才会正常执行。看下正常执

8、行的结果：可以发觉，我们给button注册的点击大事，可以正常触发，并且回调函数也正常执行了。假如认真看上面的代码，发觉用法go来操作dom的话，还是比较棘手的，比如每次猎取一个dom元素都需要：还有，我们只能这样调用dom的办法：这里办法名称作为了参数，很简单失误写错。全部，社区就有人将这些操作给封装了起来，比如：/honnef.co/g这个库。查看文档，这个时候发觉跟我们平常用法js操作dom的写法就比较全都了。go近些年在国内越来越流行了，特殊是上云，容器化进展之后。关键的是，go不仅性能好，而且占用内存等也十分少，目前大部分新的后台项目也都在用法go重写。由于有评论说到适用的问题，这里解释一下，