WebAssembly与JavaScript的交互(1)-六、调用导出函数

上面我们演示了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>

程序运行之后,浏览器的控制台上依然会输出相同的结果。

上一篇:Docker启动PostgreSql并设置时间与主机同步


下一篇:麦芒30全新绽放,中国电信勾勒出AI手机的新方向