Wasm访问DOM

Question

有没有办法在没有JavaScript的情况下获得对DOM和/或WebAPI(即全屏API)的读/写访问权限？

我正在尝试用C构建一个基本的应用程序(C源实际上是从GC语言转换的结果).我正在构建的应用程序将作为桌面应用程序运行(它不打算在"真正的"浏览器中运行)所以我可以根据需要调整环境(即布局引擎).

Answer 1

在WebAssembly Minimal Viable Product中,调用和调出WebAssembly的唯一方法是通过导入和导出.将来,WebAssembly可能会获得允许嵌入器直接公开API的功能,在浏览器中嵌入这可能包括DOM.

但是,导入和导出并不是很复杂:从C代码的角度来看,它们看起来就像一个extern调用,类似于Windows平台上的DLL.您可能使用Emscripten编译C代码,请参阅其文档"从C/C++调用JavaScript函数"以获取有关其工作原理的详细信息(因为这不是您要问的问题,但我猜它是下一个题).

你的问题不清楚你是否:

1. 想要编译C代码并在浏览器内的WebAssembly中运行它.
2. 想要编译C代码并在浏览器外的WebAssembly中运行它.

或两者.

Answer 2

这一切都取决于编译器的能力。

目前无法直接访问 DOM 或任何其他浏览器 API。也不可能在 Wasm 线性内存或 Wasm 表中存储 JavaScript 引用。也不能使用 JavaScript 引用作为函数参数或返回值。它们只是不存在于 MVP 类型系统中。然而，有参考类型提案，它可能有朝一日成为 Wasm 运行时的一部分，但没有可用的官方发布日期。

那么，Wasm 与宿主环境的交互如何完成？好吧，事实证明，具有导入和导出功能的 Wasm 模块系统可用于创建仿真层。手动创建这一层是痛苦的，因此编译器创建它是一项很好的任务。但是如何？

例如，我们要在当前浏览器窗口中设置文档标题。Wasm 需要访问当前窗口实例，选择文档，并设置它的标题属性。由于 Wasm 运行时无法访问引用，我们需要在 JS 端创建一个映射表和一些带有映射逻辑的 JS 函数，并将它们导入到 Wasm 模块中。

因此，我们创建了一个名为 getWindow 的函数。此函数获取全局窗口引用，将其放入映射表并返回表中的索引。该索引可以作为 Wasm 端的 I32 访问。这个函数被导入到 Wasm 模块中。

现在，我们创建一个名为 getDocumentFromWindow 的函数。该函数将一个索引放入映射表，并返回另一个索引。该实现从映射表中查找窗口引用并解析其文档属性，然后将此文档放入映射表并将该索引返回给 Wasm。该函数也被导入到 Wasm 模块中。

在 Wasm 方面，我们现在可以通过导入的函数间接操作 Wasm 主机引用。我们的映射表通过整数索引模拟 JS 引用。这是 Wasm 引用类型提案可能附带的较慢版本。

所以整个映射逻辑可以由编译器创建。一旦引用类型可用，就可以更改编译器并使用新的类型系统来提高代码效率。

如果您想看到这样的编译器在运行，请查看https://github.com/mirkosertic/Bytecoder。它可以将 JVM 字节码编译为 JavaScript 和 WebAssembly，并以两种方式为 DOM 和浏览器 API 交互提供透明的方式。可以从 Wasm 调用 DOM，也可以从 DOM 调用 Wasm，例如实现点击侦听器和其他很酷的东西，例如与 vue.js 等高级框架的交互。

免责声明：我是 Bytecoder 的发明者，但所描述的逻辑可以适用于任何其他编译器。