WebAssembly入门笔记[4]如何用Global传递全局变量？
摘要：利用WebAssembly的导入导出功能可以灵活地实现宿主JavaScript程序与加载的单个wasm模块之间的交互，那么如何在宿主程序与多个wasm之间传递和共享数据呢？这就需要使用到Global这个重要的对象了。一、数值类型全局变量 二
利用WebAssembly的导入导出功能可以灵活地实现宿主JavaScript程序与加载的单个wasm模块之间的交互，那么如何在宿主程序与多个wasm之间传递和共享数据呢？这就需要使用到Global这个重要的对象了。
一、数值类型全局变量
二、将JavaScript函数设置为全局变量
三、利用全局变量处理字符串
一、数值类型全局变量 Global全局变量支持多种值类型，包括数组（i32/i64和f32/f64）、向量和引用类型（externref和funcref）。下面的实例利用Global提供了全局计数的功能。在WebAssembly Text Format (WAT)文件app.wat中，我们从宿主JavaScript应用中导入了一个i32类型的可读写（mut表示可以修改）的全局变量，导入路径为“imports.counter”，我们将其命名为$counter。在用于自增的导出函数increment中，我们通过执行global.get指令读取全局变量的值，并将其加1之后，执行global.set指令对全局变量重新赋值。
(module
(global $counter (import "imports" "counter") (mut i32))
(func (export "increment")
(i32.add (global.get $counter) (i32.const 1))
(global.set $counter)
)
)在index.html文件中，我们在页面中添加了一个“Increment”按钮，并利用一个<span>显式计算器当前的值。JavaScript脚本通过调用WebAssembly.Global构造函数将代表全局变量的Global对象创建出来后，调用WebAssembly.instantiateStreaming加载app.wat编译生成的app.wasm模块文件，并将此Global对象包含在导入对象中。
<html>
<head></head>
<body>
<span id="counter">0</span>
<button id="btnInc">Increment</button>
<script>
const globalCounter = new WebAssembly.Global({ value: "i32", mutable: true }, 0);
WebAssembly
.instantiateStreaming(fetch("app.wasm"), {"imports":{"counter":globalCounter}})
.then(results => {
document.getElementById("btnInc").onclick = ()=>{
results.instance.exports.increment();
document.getElementById("counter").innerText = globalCounter.value;
};
});
</script>
</body>
</html>wasm模块充成功导入后，我们注册了按钮的click事件，使之在调用导出的increment函数后，重新刷新计数器的值。如下图所示，针对“Increment”的每次点击都将计数器加1（源代码）。
二、将JavaScript函数设置为全局变量除了四种数值类型，Global还支持两种引用类型externref和funcref，利用externref可以将宿主应用提供的任意JavaScript对象作为全局变量，下面的实例演示利用这种方式实现了与类似的功能。如下面的代码片段所示，新的app.wat导入了一个类型为externref的全局变量，对应着数组应用提供的一个用来对全局计数自增的Javascript函数。