上面我们演示了WebAssembly模块在初始化的时候调用导入的JavaScript函数,现在我们来演示JavaScript应用如何调用从WebAssembly导出的函数,为此我们将app.wat的代码改写成如下的形式,仅仅保留4个导出的函数add、sub、mul和div。
(module
(func (export "add") (param $x i32) (param $y i32) (result i32)
local.get $x
local.get $y
i32.add)
(func (export "sub") (param $x i32) (param $y i32) (result i32)
local.get $x
local.get $y
i32.sub)
(func (export "mul") (param $x i32) (param $y i32) (result i32)
local.get $x
local.get $y
i32.mul)
(func (export "div") (param $x i32) (param $y i32) (result i32)
local.get $x
local.get $y
i32.div_u)
)
index.html中的Javascript代码也做了如下的修改:我们在调用WebAssembly.instantiateStreaming函数成功加载WebAssembly模块并创建对应模块实例后,利用返回结果的instance属性得到这个模块实例。模块导出的成员都保存在该实例的exports属性返回的集合中,为此我们从中提取出导出的四个返回,并利用它们完成对应的运算后,调用console.log函数将包含结果的运算表达式输出到控制台上。由于WebAssembly模块不在需要调用导入的函数,所以调用instantiateStreaming函数的时候不需要在指定导入对象。
<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
var url="app.wasm";
WebAssembly
.instantiateStreaming(fetch("app.wasm"))
.then(result => {
var exports = result.instance.exports;
var result = exports.add(1,2);
console.log(`1 + 2 = ${result}`);
result = exports.sub(1,2);
console.log(`1 - 2 = ${result}`);
result = exports.mul(1,2);
console.log(`1 * 2 = ${result}`);
result = exports.div(1,2);
console.log(`1 / 2 = ${result}`);
});
</script>
</body>
</html>
程序运行之后,浏览器的控制台上依然会输出相同的结果。