WebAssembly (WASM) 设计之初就考虑了与JavaScript宿主环境的紧密集成。除了WASM模块可以导出函数供JS调用外，JS也可以将函数导入WASM模块，使得WASM代码能够直接调用JS层面的功能。这种“双向通信”是构建复杂Web应用的基石。在许多场景下，我们希望避免生成额外的“胶水代码”（glue code），以实现更精简、更直接的模块加载和交互。
当使用Emscripten编译C/C++代码到WASM时，通过指定-s STANDALONE_WASM=1 -s SIDE_MODULE=1等标志，我们可以生成独立的WASM模块，并要求JavaScript运行时提供所有外部依赖，包括内存、表以及从C/C++代码中声明的extern函数。
Emscripten在将C/C++代码编译为WASM时，会根据代码结构和编译选项生成特定的导入需求。对于一个SIDE_MODULE，WASM模块通常需要从宿主环境（JavaScript）导入以下基本组件：
一个典型的JavaScript导入对象结构如下：
立即学习“Java免费学习笔记（深入）”；
const importObject = {
"env": {
// Emscripten通常需要的内存和表
"memory": new WebAssembly.Memory({ initial: 256 }),
"table": new WebAssembly.Table({ initial: 8, element: 'anyfunc' }),
// 内存和表基地址，旧版本Emscripten可能需要
"__memory_base": 0,
"tableBase": 0,
// 导入的JavaScript函数
jsClearRect: function() { /* ... */ },
jsFillRect: function() { /* ... */ },
// ... 其他Emscripten可能需要的内部导入，如_emscripten_stack_init等
}
};当尝试加载WASM模块时，如果遇到TypeError: import object field 'GOT.mem' is not an Object这样的错误，这通常意味着Emscripten编译的WASM模块期望从JavaScript导入一个名为GOT.mem的WebAssembly.Global对象，但该对象未提供或类型不正确。
GOT.mem（Global Offset Table Memory）是Emscripten在某些情况下用于管理全局变量或特定数据结构访问的一种机制。当C/C++代码中存在非static的全局变量（例如示例中的isRunning和rect），并且Emscripten认为这些变量需要通过WASM的全局偏移表来访问时，它可能会将GOT.mem作为一个WebAssembly.Global对象来要求导入。这意味着WASM模块期望通过这个导入的全局变量来定位和访问其他全局数据。
如果这些全局变量未被声明为static，Emscripten可能会将其视为潜在的外部可访问或需要特殊处理的变量，从而生成对GOT.mem的导入需求。
最直接有效的解决方案是审查C/C++代码中的全局变量。如果某个全局变量仅在当前C文件内部使用，没有被其他编译单元引用，那么应该将其声明为static。
static关键字的作用：
示例C代码修改：
// main.c
#include <stdio.h> // 假设需要
#include <emscripten.h> // 假设需要
// 声明外部JavaScript函数
extern int jsClearRect();
extern int jsFillRect();
// 将全局变量声明为static，使其作用域仅限于当前文件
static int isRunning = 0; // 示例全局变量
static int rect[4] = {0, 0, 10, 10}; // 示例全局数组
// 示例函数，调用JS函数
EMSCRIPTEN_KEEPALIVE
void startDrawing() {
isRunning = 1;
jsClearRect(); // 调用JS函数
jsFillRect(); // 调用JS函数
}
EMSCRIPTEN_KEEPALIVE
void stopDrawing() {
isRunning = 0;
}通过将isRunning和rect声明为static，Emscripten在编译时就不会将它们视为需要外部导入的全局变量，从而消除了对GOT.mem的依赖（至少是由于这些变量引起的依赖）。
即使解决了GOT.mem问题，为了成功实例化WASM模块，JavaScript的导入对象仍需正确配置，以满足Emscripten对内存、表以及其他外部函数的标准需求。
正确的JavaScript导入对象示例：
// 定义导入对象
const importObject = {
"env": {
// Emscripten标准内存和表导入
"memory": new WebAssembly.Memory({ initial: 256 }),
"table": new WebAssembly.Table({ initial: 8, element: 'anyfunc' }),
// 对于SIDE_MODULE，通常需要这两个基地址
"__memory_base": 0,
"tableBase": 0,
// 导入C代码中声明的JS函数，确保函数名与C中的extern声明一致
jsClearRect: function() {
console.log("JavaScript: jsClearRect called!");
// 实际的Canvas清除矩形逻辑
// context.clearRect(0, 0, canvas.width, canvas.height);
},
jsFillRect: function() {
console.log("JavaScript: jsFillRect called!");
// 实际的Canvas填充矩形逻辑，可以根据WASM传递的参数绘制
// context.fillRect(0, 0, 10, 10);
},
// 如果Emscripten版本或特定功能需要，可能还需要其他内部函数，
// 例如：_emscripten_stack_init: () => {},
// 但对于基础的extern函数导入，通常上述已足够。
}
};注意： 导入的JavaScript函数名（如jsClearRect）必须与C代码中extern声明的函数名完全一致。
下面是一个完整的示例，演示如何将JavaScript函数导入WebAssembly模块。
#include <emscripten.h> // 提供EMSCRIPTEN_KEEPALIVE宏
// 声明外部JavaScript函数
extern int jsClearRect();
extern int jsFillRect();
// 将全局变量声明为static，避免不必要的外部导入需求
static int isRunning = 0;
static int rect[4] = {0, 0, 10, 10};
// WASM导出的函数，可供JavaScript调用
EMSCRIPTEN_KEEPALIVE
void startDrawing() {
isRunning = 1;
printf("C: startDrawing called. Calling JS functions...\n");
jsClearRect(); // 调用导入的JS函数
jsFillRect(); // 调用导入的JS函数
}
EMSCRIPTEN_KEEPALIVE
void stopDrawing() {
isRunning = 0;
printf("C: stopDrawing called.\n");
}
int main() {
printf("C: WebAssembly module initialized.\n");
return 0;
}使用Emscripten编译C代码为独立的WASM模块：
emcc src/main.c -Os -s STANDALONE_WASM=1 -s SIDE_MODULE=1 -o main.wasm
创建一个HTML文件或JS脚本来加载并实例化main.wasm：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WASM Import JS Functions</title>
</head>
<body>
<h1>WebAssembly JavaScript 函数导入示例</h1>
<button onclick="startWasmDrawing()">启动WASM绘图</button>
<button onclick="stopWasmDrawing()">停止WASM绘图</button>
<script>
let wasmModuleInstance = null;
// 定义导入对象
const importObject = {
"env": {
// Emscripten标准内存和表导入
"memory": new WebAssembly.Memory({ initial: 256 }),
"table": new WebAssembly.Table({ initial: 8, element: 'anyfunc' }),
// 对于SIDE_MODULE，通常需要这两个基地址
"__memory_base": 0,
"tableBase": 0,
// 导入C代码中声明的JS函数
jsClearRect: function() {
console.log("JavaScript: jsClearRect called from WASM!");
// 可以在这里执行实际的DOM/Canvas操作
},
jsFillRect: function() {
console.log("JavaScript: jsFillRect called from WASM!");
// 可以在这里执行实际的DOM/Canvas操作
},
// Emscripten可能还会自动导入一些内部函数，如_emscripten_stack_init
// 如果出现新的导入错误，需要根据错误信息添加
// _emscripten_stack_init: () => {}
}
};
// 异步加载和实例化WASM模块
async function loadWasmModule() {
try {
const response = await fetch('main.wasm');
const { instance } = await WebAssembly.instantiateStreaming(response, importObject);
wasmModuleInstance = instance;
console.log("WebAssembly module loaded and instantiated successfully!");
console.log("Exports:", wasmModuleInstance.exports);
} catch (err) {
console.error("Error loading or instantiating WebAssembly module:", err);
}
}
// 页面加载时加载WASM模块
window.onload = loadWasmModule;
// 按钮点击事件，调用WASM导出的函数
function startWasmDrawing() {
if (wasmModuleInstance && wasmModuleInstance.exports.startDrawing) {
wasmModuleInstance.exports.startDrawing();
} else {
console.warn("WASM module not loaded or startDrawing function not found.");
}
}
function stopWasmDrawing() {
if (wasmModuleInstance && wasmModuleInstance.exports.stopDrawing) {
wasmModuleInstance.exports.stopDrawing();
} else {
console.warn("WASM module not loaded or stopDrawing function not found.");
}
}
</script>
</body>
</html>通过遵循上述指南，开发者可以有效地在WebAssembly模块中导入和利用JavaScript函数，实现C/C++代码与Web页面的深度集成，从而构建高性能、功能丰富的Web应用。
以上就是WebAssembly中导入JavaScript函数：无胶水代码集成指南的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
847
收藏
