前端Web框架WebAssembly【免费下载链接】go-appA package to build progressive web apps with Go programming language and WebAssembly.项目地址https://gitcode.com/gh_mirrors/go/go-app点击查看免费下载导读go-app 是一个用 Go 语言与 WebAssembly 构建渐进式 Web 应用PWA的开源框架。由于 WebAssembly 是浏览器端技术部分场景不可避免需要直接访问 DOM 或调用 JavaScript。本文以官方文档 docs/web/documents/js.md 为主线结合仓库源码系统讲解在 go-app 中引入第三方 JS 库、操作window全局对象、创建 JS 对象、取消事件默认行为以及读取输入值等常见交互的完整方案。读完本文你将掌握 go-app 封装 JavaScript 互操作层的设计原理Value接口与BrowserWindow接口并能在自己的组件中安全、高效地完成 JS 集成。go-app 为什么包装 JavaScript 标准库WebAssembly 环境下Go 官方通过syscall/js包提供与 JavaScript 互操作的能力。但 go-app 出于**兼容性与工具链tooling**两方面的考虑对该标准包做了一层包装兼容性通过构建标签区分运行环境使同一份代码既能跑在浏览器wasm中也能跑在服务器端非 wasm。仓库中 pkg/app/js_wasm.gowasm构建标签实现真实交互而 pkg/app/js_nowasm.go!wasm构建标签提供空实现占位保证程序在非浏览器环境下不会因调用 JS API 而崩溃。工具链go-app 将 DOM 操作、事件绑定、组件渲染等能力统一收敛到自己的Value接口抽象中方便上层框架管理与测试。与 JavaScript 交互的统一入口是Value接口其定义位于 pkg/app/js.go。它提供了与syscall/js.Value几乎一一对应的能力Go 方法对应 JavaScript 语义Get(p string)读取对象属性v.pSet(p, x)设置属性v.p xCall(m, args...)调用方法v.m(args...)Invoke(args...)调用函数值v(args...)New(args...)以v为构造函数执行new v(args...)Index(i)/SetIndex(i, x)按索引读写数组元素Length()读取length属性Bool()/Int()/Float()/String()类型化取值Type()返回 JS 类型见 pkg/app/js.go 中的TypeUndefined…TypeFunction枚举Truthy()/IsNull()/IsUndefined()/IsNaN()真假与特殊值判断Equal(w)/InstanceOf(t)与instanceof判断Then(f)当值为 Promise 时解析后回调f此外还有两个与值互转的关键函数ValueOf(x)将 Go 值映射为 JS 值。按 pkg/app/js.go 的注释nil→null、bool→ 布尔、整型/浮点 →number、string→ 字符串、[]any→ 新数组、map[string]any→ 新对象。FuncOf(fn)将 Go 函数包装为可被 JS 调用的函数Func接口调用完成后须调用Release()释放资源见 pkg/app/js.go。引入 JavaScript 文件构建 UI 时经常需要第三方 JavaScript 库。go-app 提供两种引入方式页面级Page 作用域与组件内联Component 作用域。页面级引入Handler 的 Scripts 字段在app.Handler中通过Scripts字段列出页面需要加载的 JS 文件本地脚本与远程脚本均可handler : app.Handler{ Name: My App, Scripts: []string{ /web/myscript.js, // 本地脚本 https://foo.com/remoteScript.js, // 远程脚本 }, }该字段定义于 pkg/app/http.go。从源码看它支持在路径后以空格追加crossorigin、async、defer等属性渲染页面时Scripts中的资源会通过parseHTTPResource解析并调用toScript()见 pkg/app/http.go生成对应的script标签。本地脚本若以/web/或web/开头会被 go-app 视为静态资源并由Resources解析器默认LocalDir()提供服务/web/前缀的静态资源还会被 Service Worker 默认缓存供离线访问使用。另外Scripts中列出的资源与Styles、Icon一样默认即被缓存见 pkg/app/http.go 对CacheableResources的说明。页面级引入RawHeaders 直接写入 HTML 头RawHeaders字段允许把任意 HTML 片段直接注入页面的head区域见 pkg/app/http.go。典型的用法是嵌入需要内联 JS 的第三方跟踪代码例如 Google Analyticshandler : app.Handler{ Name: My App, RawHeaders: []string{ !-- Global site tag (gtag.js) - Google Analytics -- script async srchttps://www.googletagmanager.com/gtag/js?idUA-xxxxxxx-x/script script window.dataLayer window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag(js, new Date()); gtag(config, UA-xxxxxx-x); /script , }, }渲染时RawHeaders中的内容通过Range(h.RawHeaders).Slice(...)逐条以Raw(...)原样输出见 pkg/app/http.go。项目自身在文档站点中也使用同类机制例如 docs/src/http.go 即负责站点相关 HTTP 资源的组装。组件内联引入Render() 中的 Script 元素如果某个 JS 文件只在特定组件中需要可以在组件的Render()方法里直接使用app.Script()元素对应script标签构造器位于 pkg/app/html_gen.go并支持Src、Async、Defer、CrossOrigin、Type等链式方法。下面的例子在组件内异步加载 YouTube iframe API并渲染一个视频播放容器type youtubePlayer struct { app.Compo } func (p *youtubePlayer) Render() app.UI { return app.Div().Body( app.Script(). Src(//www.youtube.com/iframe_api). Async(true), app.IFrame(). ID(yt-container). Allow(autoplay). Allow(accelerometer). Allow(encrypted-media). Allow(picture-in-picture). Sandbox(allow-presentation allow-same-origin allow-scripts allow-popups). Src(https://www.youtube.com/embed/LqeRF_0DDCg), ) }Async(true)会为script标签设置async属性见 pkg/app/html_gen.go使脚本异步加载、不阻塞组件其余部分的渲染。使用 window 全局对象window是浏览器中的全局对象。go-app 通过Window()函数返回其封装后的引用类型为BrowserWindow接口app.Window()Window()的实现位于 pkg/app/app.go实际返回的是基于js.Global()构建的browserWindow对象见 pkg/app/js_wasm.go。BrowserWindow接口在 pkg/app/js.go 中定义除了继承Value的全部能力外还额外提供URL()读取window.location.href返回*url.URLSize()返回窗口宽高优先读取innerWidth/innerHeight回退到documentElement与body的clientWidth/clientHeight见 pkg/app/js_wasm.goCursorPosition()返回当前鼠标/触摸位置GetElementByID(id)按 ID 获取 DOM 元素ScrollToID(id)将指定 ID 的元素滚动到可视区域内部调用scrollIntoView见 pkg/app/js_wasm.go。按 ID 获取 DOM 元素GetElementByID()用于从文档中按 ID 取出 DOM 元素// JS 版本 let elem document.getElementById(YOUR_ID);// Go 等价写法 elem : app.Window().GetElementByID(YOUR_ID)该方法是纯粹的语法糖其实现等价于直接对window链式调用Get与Call见 pkg/app/js_wasm.goelem : app.Window(). Get(document). Call(getElementById, YOUR_ID)创建 JS 对象要从某个 JS 库创建对象先通过Window()取得库的名字再调用New()函数。New()在底层对应 JavaScript 的new运算符见 pkg/app/js_wasm.go参数会按ValueOf规则映射为 JS 值。以下示例演示如何创建一个 YouTube 播放器// JS 版本 let player new YT.Player(yt-container, { height: 390, width: 640, videoId: M7lc1UVf-VE, });// Go 等价写法 player : app.Window(). Get(YT). Get(Player). New(yt-container, map[string]interface{}{ height: 390, width: 640, videoId: M7lc1UVf-VE, })这里map[string]interface{}会通过syscalJSValueOf递归转换为 JS 对象见 pkg/app/js_wasm.go[]any则会转换为 JS 数组。取消事件的默认行为在实现事件处理器EventHandler时可以通过调用PreventDefault()取消事件。Event类型定义于 pkg/app/event.go它包装了底层 JS 事件对象PreventDefault()内部即e.Call(preventDefault)与浏览器原生event.preventDefault()语义一致。事件处理器总是运行在 UI goroutine 上见 pkg/app/event.go 对EventHandler的说明。下面的组件在内容上绑定了onchange事件阻止右键菜单弹出配合contextmenu的典型场景type foo struct { app.Compo } func (f *foo) Render() app.UI { return app.Div(). OnChange(f.onContextMenu). Text(Dont copy me!) } func (f *foo) onContextMenu(ctx app.Context, e app.Event) { e.PreventDefault() }需要注意OnChange绑定的是change事件若要拦截右键菜单应将绑定改为OnContextMenu(f.onContextMenu)这样右键点击时浏览器默认的菜单行为才会被PreventDefault()阻止。除PreventDefault()外Event还提供StopImmediatePropagation()见 pkg/app/event.go用于阻止后续监听器被调用。获取输入值输入框通常用于获取用户输入的值。在事件处理器中可以通过ctx.JSSrc()拿到触发事件的 UI 元素对应的 JS 表示再读取其value属性type foo struct { app.Compo } func (f *foo) Render() app.UI { return app.Input().OnChange(f.onInputChange) } func (f *foo) onInputChange(ctx app.Context, e app.Event) { v : ctx.JSSrc().Get(value).String() }ctx.JSSrc()返回事件源元素src所指 UI 元素的 JS 值其实现为ctx.sourceElement.JSValue()见 pkg/app/context.go。这里的.Get(value).String()等价于原生event.target.valueString()是Value接口中少数不会因类型不匹配而 panic 的取值方法非字符串类型会返回T或T: V形式的描述见 pkg/app/js.go。进阶让 Go 函数被 JavaScript 调用虽然原文档未展开但作为 JS 互操作的常用补充仓库通过FuncOf支持把 Go 函数暴露给 JS 调用见 pkg/app/js.goJS 事件循环触发的包装函数运行在额外的 goroutine 上因此阻塞操作会阻塞事件循环阻塞型函数应显式启动新 goroutine不再使用时必须调用Release()释放资源从 Go 发起的调用中触发的包装函数在同一 goroutine 上同步执行。go-app 内部大量使用该机制例如在 pkg/app/browser.go 中通过FuncOf包装点击处理函数并挂载到window.onclick用于拦截a链接点击、实现单页应用内部导航ctx.Navigate(...)同时还会向window注入onpopstate、onresize等全局处理函数见 pkg/app/browser.go。非浏览器环境的降级行为go-app 通过构建标签让 JS 互操作代码在服务器端安全降级非 wasm 构建!wasm下pkg/app/js_nowasm.go 中所有Value方法都返回空值或零值Type()甚至直接 panic 并抛出带有required-architecturewasm、current-architectureGOARCH标签的错误见 pkg/app/js_nowasm.go。这意味着涉及 JS 的类型判断逻辑应只在 wasm 环境执行而 go-app 的整体架构服务端渲染 HTML、客户端 WASM 接管保证了页面在两种环境下都能正常输出。总结在 go-app 中与 JavaScript 交互的核心路径可归纳为引入外部 JS页面级用Handler.Scripts/Handler.RawHeaderspkg/app/http.go组件级用app.Script()元素pkg/app/html_gen.go操作 DOM 与全局对象统一通过app.Window()pkg/app/app.go返回的BrowserWindow接口配合Get/Call/New等方法完成属性读写、函数调用与对象创建事件处理实现EventHandler用e.PreventDefault()取消默认行为用ctx.JSSrc()读取事件源元素的值pkg/app/event.go、pkg/app/context.go。掌握了这些能力你就可以在 Go 中自由调用任何浏览器 API 与第三方 JS 库同时保持代码在 wasm 与非 wasm 环境下的可移植性。如需继续深入可进一步阅读 Concurrency 了解 go-app 的并发模型或查阅 Reference 获取Value、Window、Script、Event等完整 API 说明。赞分享前端Web框架WebAssembly【免费下载链接】go-appA package to build progressive web apps with Go programming language and WebAssembly.项目地址https://gitcode.com/gh_mirrors/go/go-app点击查看免费下载相关推荐Vue Vben Admin 5.0从零构建企业级中后台的现代解决方案Vue Vben Admin 5.0从零构建企业级中后台的现代解决方案 在当今快速迭代的前端开发领域你是否曾为搭建一个既美观又功能完善的中后台系统而头疼面前端Obsidian中文社区两个文件的仓库凭什么等来官方接棒Obsidian中文社区两个文件的仓库凭什么等来官方接棒 一个开源仓库目录里只有 README.md 和 LICENSE 两个文件。没有一行代码却撑起深入 DOM 操作与事件处理JavaScript 网页交互实战指南curriculum 课程精讲深入 DOM 操作与事件处理JavaScript 网页交互实战指南curriculum 课程精讲 本文基于开源课程仓库 curriculum 中归档的 a文档教程教育上一篇如何在本地设备上运行类ChatGPT的AI助手alpaca.cpp完整指南下一篇AWX 工作流作业模板Workflow Job Template启动 API 实战指南从 GET 预检到 POST 触发创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考