大家好!今天我要向大家介绍一个封装 WebAssembly 的工具——Quick WebAssembly JS,希望能够帮助到更多的开发者。
介绍
Quick WebAssembly JS 是一个可以快速封装 WebAssembly 的代理工具类。通过使用它,我们可以更轻松地将 WebAssembly 与 JavaScript 进行集成。
快速开始
准备 WebAssembly 资源
首先,我们需要准备好 WebAssembly 资源。我们可以使用 Emscripten 工具来编译 C/C++ 代码并导出我们需要的 API。
- Emscripten 工具安装指引:https://emscripten.org/docs/getting_started/downloads.html
举个例子,我们有一个名为 fib.cc
的 C++ 代码,用于计算斐波那契数列的第 n 位。
fib.cc
#include <emscripten.h>
extern "C" {
EMSCRIPTEN_KEEPALIVE
int fib(int n) {
// 斐波那契数列的第 n 位
int i, t, a = 0, b = 1;
for (i = 0; i < n; i++) {
t = a + b;
a = b;
b = t;
}
return b;
}
}
在使用 Emscripten 编译时,需要添加一些必要的编译选项。下面是一个示例编译指令:
emcc fib.cc -sWASM=1 -sMAIN_MODULE=2 -sEXPORTED_FUNCTIONS=['_malloc','_free'] -sEXPORTED_RUNTIME_METHODS=['UTF8ToString','stringToUTF8'] --no-entry -o fib.js
请注意,这里的编译选项 -sWASM=1 -sMAIN_MODULE=2 -sEXPORTED_FUNCTIONS=['_malloc','_free'] -sEXPORTED_RUNTIME_METHODS=['UTF8ToString','stringToUTF8'] --no-entry
是必须的,以确保正确导出所需的函数和运行时方法。
安装 npm 包
接下来,我们需要安装 Quick WebAssembly JS 的 npm 包。在命令行中运行以下命令进行安装:
npm install quick-wasm-js
创建 QuickWebAssemblyFactory 工厂类
安装完成后,我们可以开始使用 Quick WebAssembly JS。首先,我们需要创建一个 QuickWebAssemblyFactory 工厂类,并指定我们使用 Emscripten 编译的 WebAssembly 资源的路径。
import { QuickWebAssemblyFactory } from "quick-wasm-js";
// 这里 JS 和 Wasm 资源都是相对于当前 Web 页面的路径去请求的。
const manager = await new QuickWebAssemblyFactory().createManager("./fib.js", "./fib.wasm");
开始使用代理对象
现在,我们已经准备好了 Quick WebAssembly JS,并创建了代理对象的管理器。我们可以开始使用代理对象了。
console.log(await fibManager.fib(12)); // 输出 233
在这个示例中,我们调用了代理对象的 fib
方法来计算斐波那契数列的第 12 位,并将结果输出到控制台。
从上述代码,我们可以看到,原本子 C++ 的 fib 函数被集成到了 JS 中,并且以异步接口的形式提供给外部调用。
值得注意的是,WebAssembly 实例其实已经被运行在了一个单独的 Worker 线程中。但是,我们却能在主线程以 Promise 的形式,异步访问对应的接口。
相关 API
除了基本的代理对象使用之外,Quick WebAssembly JS 还提供了一些方便对 WebAssembly 内存进行操作的 API。
-
createHEAP(data: ArrayBuffer): Promise<number>
:传入一个 ArrayBuffer,返回
相应堆的指针。
freeHEAP(ptr: number): Promise<boolean>
:传入堆的指针,释放内存。getHEAP(ptr: number, bytes: number): Promise<ArrayBuffer>
:传入指针和字节数,获取相应的堆数据,并以 ArrayBuffer 形式返回。
你可以在 quick-wasm-js API 文档 中找到更多关于这些 API 的详细信息。
总结起来,Quick WebAssembly JS 是一个非常方便的工具类,它可以帮助我们快速封装 WebAssembly,并提供了简洁易用的 API。希望这个工具对大家在 WebAssembly 开发中能够起到一定的帮助作用。如果你对这个工具感兴趣,可以通过上面提供的链接了解更多详细信息。祝大家 Coding 愉快!
GitHub 仓库地址:https://github.com/Krstar233/quick-wasm-js