发布于 由admin

WebAssembly：JavaScript 与 C++ 的互操作

WebAssembly：JavaScript 与 C++ 的互操作

欢迎来到 WebAssembly 讲座 🎉

大家好！今天我们要聊的是一个非常酷炫的技术——WebAssembly（简称 Wasm）。Wasm 是一种可以在浏览器中高效运行的二进制格式，它允许我们用多种编程语言（如 C、C++、Rust 等）编写代码，并在浏览器中以接近原生的速度执行。而我们今天的重点是探讨 JavaScript 与 C++ 的互操作。

如果你曾经想用 C++ 编写高性能的代码，然后在浏览器中使用 JavaScript 调用它，那么 WebAssembly 就是你一直在寻找的解决方案！让我们一起深入探讨这个话题吧！

1. WebAssembly 是什么？🧐

简单来说，WebAssembly 是一种低级别的虚拟机指令集，专为浏览器设计。它的目标是提供一种高效的、可移植的方式，让开发者可以用多种编程语言编写代码，并在浏览器中运行。Wasm 的核心优势在于：

  • 性能接近原生：Wasm 代码可以在浏览器中以接近原生的速度运行。
  • 多语言支持：你可以用 C、C++、Rust 等语言编写代码，编译成 Wasm 字节码后在浏览器中运行。
  • 安全性：Wasm 代码运行在沙箱环境中，确保不会对系统造成危害。

为什么需要 WebAssembly？

想象一下，你正在开发一个复杂的图形处理应用，或者是一个需要大量计算的游戏。JavaScript 虽然功能强大，但在处理复杂计算时可能会显得力不从心。这时，C++ 这样的语言就派上用场了，因为它可以编写更高效的代码。但问题是，C++ 代码不能直接在浏览器中运行。而 WebAssembly 正好解决了这个问题，它允许我们将 C++ 代码编译成 Wasm 字节码，然后在浏览器中调用。

2. JavaScript 与 C++ 的互操作 🤝

现在我们来聊聊如何让 JavaScript 和 C++ 一起工作。通过 WebAssembly，我们可以将 C++ 代码编译成 Wasm 模块，然后在 JavaScript 中加载和调用它。接下来，我们会一步步展示如何实现这一点。

2.1 编写 C++ 代码

首先，我们需要编写一段简单的 C++ 代码。假设我们要实现一个函数，用于计算两个整数的和。创建一个名为 add.cpp 的文件，内容如下：

// add.cpp
extern "C" {
    int add(int a, int b) {
        return a + b;
    }
}

这里我们使用了 extern "C"，这是为了防止 C++ 编译器对函数名进行名称修饰（name mangling），从而确保 JavaScript 可以正确调用这个函数。

2.2 编译 C++ 代码为 WebAssembly

接下来，我们需要将 C++ 代码编译成 WebAssembly 模块。为此，我们可以使用 Emscripten 工具链。Emscripten 是一个专门为 WebAssembly 设计的编译器工具链，它可以将 C/C++ 代码编译成 Wasm 字节码。

编译命令如下：

emcc add.cpp -o add.js -s EXPORTED_FUNCTIONS='["_add"]' -s EXTRA_EXPORTED_RUNTIME_METHODS='["cwrap"]'

这条命令会生成两个文件：

  • add.wasm：这是编译后的 WebAssembly 模块。
  • add.js：这是一个辅助 JavaScript 文件，用于加载和初始化 Wasm 模块。

2.3 在 JavaScript 中调用 C++ 函数

现在我们已经编译好了 Wasm 模块，接下来就可以在 JavaScript 中调用它了。创建一个 HTML 文件 index.html，并在其中引入 add.js 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebAssembly Example</title>
</head>
<body>
    <h1>WebAssembly: JavaScript & C++ Interop</h1>
    <script src="add.js"></script>
    <script>
        // 等待 WebAssembly 模块加载完成
        Module.onRuntimeInitialized = () => {
            // 使用 cwrap 包装 C++ 函数
            const add = Module.cwrap('add', 'number', ['number', 'number']);

            // 调用 C++ 函数
            const result = add(5, 7);
            console.log(`5 + 7 = ${result}`);  // 输出 12
        };
    </script>
</body>
</html>

在这个例子中，我们使用了 Module.cwrap 来包装 C++ 函数 add，并将其暴露给 JavaScript。cwrap 的参数分别是：

  • 第一个参数是 C++ 函数的名称（去掉前缀 _）。
  • 第二个参数是返回值类型。
  • 第三个参数是参数列表的类型。

2.4 运行结果

当你打开这个 HTML 文件时，你应该会在控制台中看到以下输出：

5 + 7 = 12

恭喜你！你已经成功地将 C++ 代码编译成 WebAssembly，并在 JavaScript 中调用了它！🎉

3. 更进一步：传递复杂数据结构 📦

上面的例子展示了如何传递简单的整数类型。但在实际应用中，我们可能需要传递更复杂的数据结构，比如数组或对象。接下来，我们来看看如何处理这些情况。

3.1 传递数组

假设我们要编写一个 C++ 函数，用于计算一个整数数组的平均值。创建一个新的 C++ 文件 average.cpp：

// average.cpp
extern "C" {
    double average(int* array, int length) {
        double sum = 0;
        for (int i = 0; i < length; i++) {
            sum += array[i];
        }
        return sum / length;
    }
}

编译命令与之前类似：

emcc average.cpp -o average.js -s EXPORTED_FUNCTIONS='["_average"]' -s EXTRA_EXPORTED_RUNTIME_METHODS='["cwrap", "setValue", "getValue"]'

在 JavaScript 中，我们可以使用 Module.HEAP 来分配内存，并将数组传递给 C++ 函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebAssembly Array Example</title>
</head>
<body>
    <h1>WebAssembly: Passing Arrays</h1>
    <script src="average.js"></script>
    <script>
        Module.onRuntimeInitialized = () => {
            // 使用 cwrap 包装 C++ 函数
            const average = Module.cwrap('average', 'number', ['number', 'number']);

            // 定义要传递的数组
            const arr = [1, 2, 3, 4, 5];
            const length = arr.length;

            // 分配内存并复制数组
            const ptr = Module._malloc(length * 4);  // 每个整数占 4 字节
            for (let i = 0; i < length; i++) {
                Module.setValue(ptr + i * 4, arr[i], 'i32');
            }

            // 调用 C++ 函数
            const result = average(ptr, length);
            console.log(`Average: ${result}`);  // 输出 3

            // 释放内存
            Module._free(ptr);
        };
    </script>
</body>
</html>

在这个例子中，我们使用了 Module.HEAP 来分配内存，并使用 setValue 和 getValue 方法在 JavaScript 和 C++ 之间传递数组数据。最后，别忘了释放分配的内存，以避免内存泄漏。

3.2 传递对象

传递对象稍微复杂一些，因为 C++ 和 JavaScript 对象的内存布局不同。通常的做法是将对象的属性拆解为基本类型，然后通过函数参数传递。例如，假设我们有一个表示矩形的对象，包含宽度和高度属性。我们可以编写一个 C++ 函数来计算矩形的面积：

// rectangle.cpp
struct Rectangle {
    int width;
    int height;
};

extern "C" {
    int calculateArea(int width, int height) {
        return width * height;
    }
}

在 JavaScript 中，我们可以像这样调用该函数：

const calculateArea = Module.cwrap('calculateArea', 'number', ['number', 'number']);

const rect = { width: 10, height: 5 };
const area = calculateArea(rect.width, rect.height);
console.log(`Area: ${area}`);  // 输出 50

4. 总结与展望 🚀

通过 WebAssembly，我们可以轻松地将 C++ 代码集成到 JavaScript 应用中，从而充分利用两种语言的优势。C++ 提供了高效的计算能力，而 JavaScript 则提供了灵活的前端开发体验。两者结合，可以为我们带来更多的可能性。

在未来，WebAssembly 的生态系统将会更加完善，支持更多的编程语言和工具链。我们期待看到更多创新的应用场景，比如游戏开发、图像处理、机器学习等领域的突破。

希望今天的讲座对你有所帮助！如果你有任何问题或想法，欢迎在评论区留言交流 😊

参考文档

  • [MDN Web Docs: WebAssembly](引用自 MDN)
  • [Emscripten Documentation](引用自 Emscripten 官方文档)

感谢大家的参与！下次见！👋

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注