WebAssembly-JavaScript

WebAssembly-JavaScript (简称为Wasm) 是一项新技术，将不同程序语言的代码转换为可在浏览器中运行的中间码。这意味着您可以使用任何支持WebAssembly的语言编写您的应用程序，而无需将它们翻译成JavaScript。这也意味着您可以在浏览器中使用更低级别的语言（如C++或Rust）编写高计算需求的应用程序。

应用场景

Wasm 可以被视为一个执行引擎，该引擎将源代码编译为可在浏览器中执行的字节码。这种方式可以让您在浏览器中运行更快的应用程序，而不需要将它们完全转换为JavaScript。这对于处理大数值、游戏、仿真和大型应用程序非常有用。

WebAssembly-JavaScript 的优点

1. 易于开发和维护。Wasm 屏蔽了低级别的底层操作，所以您不必再处理所有的Javascript 语音的细节。
2. 更快的速度。与JavaScript相比，Wasm 更快，因为它使用编译的二进制代码，而不是像JavaScript那样直接解释代码。
3. 可逆的。您可以将Wasm字节码反编译为几乎原始的源代码（以与JavaScript相同的方式）。

调用 JavaScript 函数

在 WebAssembly 模块中调用 JavaScript 函数是一种常见的方法，因为很可能你的模块需要与浏览器环境交互。下面的代码展示了如何在WebAssembly模块中调用JavaScript函数。

(module
    (import "env" "alert" (func $js_alert (param i32)))
    (export "hello_wasm" (func $hello_wasm))
    (func $hello_wasm
        (call $js_alert (i32.const 0))
    )
)

如上述示例所示，我们在 env 名称空间中使用了 alert 函数，该函数是 JavaScript 中的全局函数。此处我们将其抽象为一个简单的名字空间，以便模块中的其他代码能够使用它。

WebAssembly 引入 JavaScript 模块

WebAssembly通过在import object中绑定JavaScript对象来与 JavaScript 代码进行交互。

// index.js
const { add } = await WebAssembly.instantiateStreaming(fetch("path/to/module.wasm"), {
    globals: {
      memory: new WebAssembly.Memory({ initial: 10 }),
      table: new WebAssembly.Table({ initial: 0, element: "anyfunc" }),
      js_global: js_global // "js_global" 是JavaScript中的对象
    },
    js: {
      console_log: (i) => console.log(i)
    }
});

console.log(add(1, 2)); // 3

add(3, 4); // 调用时第二个参数被忽略，JavaScript内的`operated`函数被立即调用。

如上述代码所示，我们通过使用 WebAssembly.instantiateStreaming() 方法来加载 WebAssembly 模块。此方法接受两个参数：一个URL，指向该模块的字节码或访问器，以及一个可选的 import object 对象，用于与模块中的导入接口进行交互。

其他相关链接

1. Web Assembly Working Draft
2. WebAssembly 官方文档
3. MDN WebAssembly 文档