介绍 您是否曾对 JavaScript 的性能限制感到沮丧？你不是一个人。随着 Web 应用程序变得越来越复杂，对高性能解决方案的需求也变得更加明显。 Rust 和 WebAssembly 是这两种技术，不仅保证性能，而且保证安全性和效率。在本文中，我们将逐步介绍使用 和 WebAssembly 构建简单 Web 应用程序的过程。 Rust 为什么选择 Rust 和 WebAssembly？ 什么是铁锈？  Rust 是一种系统编程语言，旨在提供内存安全、并发性和性能。凭借其强大的类型系统和所有权模型，它旨在消除由空指针、缓冲区溢出和数据竞争引起的常见错误。这使得 Rust 成为构建可靠且高效的软件的理想选择。 铁锈的优点 ：Rust 的所有权模型确保变量具有单一所有者，从而防止内存泄漏和未经授权的数据访问。 内存安全 ：Rust 专为速度而设计，可与 C 和 C++ 等语言紧密竞争。 性能 ：Rust 的语言设计使得编写并发代码变得更加容易，使其具有高度的可扩展性。 并发性 ：凭借不断增长的包存储库 Cargo，Rust 为 Web 开发、数据操作等提供了广泛的库和框架。 丰富的生态系统 什么是 WebAssembly？  WebAssembly（通常缩写为 wasm）是一种二进制指令格式，可用作 C、C++ 和 Rust 等高级语言的编译目标。它被设计为一种可移植、高效的代码格式，可在 Web 浏览器上实现接近本机的性能。  WebAssembly 的优点 ：WebAssembly 代码利用通用硬件功能以接近本机的速度执行。 性能 ：WebAssembly 被设计为安全和沙箱，在与主机系统分开的受保护环境中执行。 安全性 ：WebAssembly 是平台无关的，这意味着它可以在任何具有兼容 Web 浏览器的计算机上运行。 可移植性 ：WebAssembly 模块可以轻松集成到 JavaScript 应用程序中，从而允许您利用现有的 Web 技术。 互操作性  Rust 和 WebAssembly 的协同作用 将 Rust 的性能和安全功能与 WebAssembly 的速度和可移植性相结合，为 Web 开发创建了强大的二人组。这就是他们合作得如此顺利的原因： ：Rust 专注于零成本抽象，确保您的 WebAssembly 模块精简且快速。 优化的性能 ：Rust 和 WebAssembly 都优先考虑安全执行，使您的 Web 应用程序更加可靠。 安全性 ：Rust 对 WebAssembly 具有一流的支持，可以轻松地将 Rust 代码编译为 wasm 并将其集成到您的 Web 应用程序中。 易于集成 通过利用 Rust 和 WebAssembly，您不仅可以跟上现代 Web 开发趋势，而且还可以跟上。您始终处于领先地位。 设置您的开发环境 在深入研究代码之前，设置适合 Rust 和 WebAssembly 的开发环境至关重要。这将确保您拥有所有必要的工具和库可供使用，从而简化开发过程。 安装 Rust ：访问 并下载适合您操作系统的安装程序。 下载 Rust 安装程序 Rust 官方网站 ：打开终端并运行以下命令来安装 Rust 及其包管理器 Cargo。 运行安装程序   curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh ：要确保 Rust 已正确安装，请打开一个新的终端窗口并运行： 验证安装   rustc --version 您应该会看到 Rust 编译器版本作为输出。 安装 wasm-pack   是一个用于组装和打包面向 WebAssembly 的 Rust 箱子的工具。 wasm-pack  ：打开终端并运行以下命令： 安装 wasm-pack   curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh ：通过运行以下命令检查 是否已安装： 验证安装 wasm-pack   wasm-pack --version 安装 Node.js 和 npm  Node.js 和 npm 对于管理依赖项和运行 Web 服务器至关重要。  ：访问 并下载适合您的操作系统的安装程序。 下载 Node.js Node.js 官方网站 ：按照安装提示安装 Node.js 和 npm。 运行安装程序 ：打开终端并运行以下命令来检查 Node.js 和 npm 是否已安装： 验证安装   node --version npm --version 设置您的 IDE 虽然您可以使用任何文本编辑器进行 Rust 和 WebAssembly 开发，但 等 IDE 提供 Rust 扩展，提供代码完成、linting 和调试等功能。 Visual Studio Code  ：从 下载并安装。 安装Visual Studio Code 官方网站 ：打开 Visual Studio Code，转到扩展市场并通过 rust-lang 搜索“Rust”扩展。安装它以增强 Rust 支持。 安装 Rust 扩展   ：本指南中提供的安装命令与 macOS 兼容。如果您遇到任何问题，请参阅相应的官方文档以获取特定于平台的说明。 macOS 用户注意 适用于 macOS 的 Rust 安装 wasm-pack 安装 适用于 macOS 的 Node.js 安装 创建一个简单的 Rust 程序 在本节中，我们将创建一个 Rust 程序来计算给定数字的阶乘。这将使我们有机会探索 Rust 的一些功能，例如函数、循环和条件语句，同时创建计算密集型程序。 初始化 Rust 项目 ：打开终端并运行以下命令来创建新的 Rust 库项目。 创建新的 Rust 库   cargo new --lib factorial_calculator ： 导航到项目目录   cd factorial_calculator 编写阶乘函数 文件：在文本编辑器或 IDE 中导航到 文件。 打开 lib.rs src/lib.rs ：添加以下 Rust 代码来实现阶乘函数。 实现阶乘函数   #[no_mangle] pub extern "C" fn factorial(n: u32) -> u32 { if n == 0 { 1 } else { n * factorial(n - 1) } } 在这里，我们定义了一个名为 函数，它接受  （无符号 32 位整数）作为参数并返回  。该函数使用递归来计算给定数字的阶乘。 factorial u32 u32 编译为 WebAssembly ：现在我们有了阶乘函数，让我们将其编译成 WebAssembly 模块。在终端中运行以下命令： 编译 Rust 代码   wasm-pack build ：运行命令后，您应该在项目文件夹中看到一个 目录。在其中，您将找到 WebAssembly 模块 (   ) 和生成的 JavaScript 绑定 (   )。 验证构建 pkg factorial_calculator_bg.wasm factorial_calculator.js 现在你就得到了它！您刚刚创建了一个 Rust 程序，用于计算数字的阶乘并将其编译到 WebAssembly 模块中。这不仅展示了 Rust 的功能，还为将此逻辑集成到 Web 应用程序中奠定了基础。 将 WebAssembly 集成到 Web 应用程序中 现在我们有了一个用于计算阶乘的 WebAssembly 模块，让我们将其集成到一个简单的 Web 应用程序中。我们将创建一个基本的 HTML 界面，用户可以在其中输入数字，然后使用 Rust 生成的 WebAssembly 模块显示该数字的阶乘。  HTML 和 JavaScript 设置 ：在项目目录中创建一个名为 的新文件，并添加以下 HTML 代码： 创建 HTML 文件 index.html   <!DOCTYPE html> <html> <head> <title>Factorial Calculator</title> </head> <body> <h1>Factorial Calculator</h1> <input type="number" id="numberInput" placeholder="Enter a number"> <button onclick="calculateFactorial()">Calculate</button> <p>Result: <span id="result"></span></p> <script src="./bootstrap.js"></script> </body> </html> 在这里，我们创建一个简单的界面，其中包含数字输入字段、触发计算的按钮以及显示结果的段落。 ：创建一个名为 的新文件并添加以下 JavaScript 代码： 创建 JavaScript 文件 bootstrap.js   import('./factorial_calculator').then(module => { window.calculateFactorial = () => { const input = document.getElementById('numberInput').value; const result = module.factorial(parseInt(input)); document.getElementById('result').innerText = result; }; }).catch(console.error); 在此脚本中，我们动态导入 WebAssembly 模块并定义一个名为 的函数。该函数从输入字段读取数字，从我们的 WebAssembly 模块调用 函数并显示结果。 calculateFactorial factorial 运行网络应用程序 ：如果您没有本地 Web 服务器，可以使用 npm 安装一个： 安装 Web 服务器   npm install -g http-server ：导航到终端中的项目目录并运行： 运行 Web 服务器   http-server . ：打开 Web 浏览器并导航到  。您应该会看到阶乘计算器 Web 应用程序。输入一个数字，单击“计算”，就会显示该数字的阶乘。 打开 Web 应用程序 http://localhost:8080 就是这样！您已成功将 Rust 生成的 WebAssembly 模块集成到简单的 Web 应用程序中。这展示了将 Rust 与 WebAssembly 相结合来创建高性能 Web 应用程序的强大功能和灵活性。 结论 在本文中，我们探索了 Rust 和 WebAssembly 在 Web 开发中的强大组合。我们首先设置开发环境，然后继续创建一个计算数字阶乘的 Rust 程序。最后，我们将该程序集成到一个简单的 Web 应用程序中。  Rust 和 WebAssembly 之间的协同作用为构建高性能、安全且高效的 Web 应用程序提供了大量机会。无论您是想优化现有项目还是启动新项目，这些技术都提供了值得考虑的强大解决方案。 随着网络技术的不断发展，保持领先地位至关重要。 Rust 和 WebAssembly 不仅是现代趋势，也是现代趋势。它们是下一代 Web 应用程序的构建块。 感谢您加入我的这段旅程，我鼓励您更深入地了解 Rust 和 WebAssembly 的世界。请继续关注我们即将发布的文章，我们将深入探讨构建更复杂的功能并探索现实世界的应用程序。 其他资源 Rust 编程语言 WebAssembly 官方网站 照片由 在 上拍摄 SpaceX Unsplash

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

OOP Patterns Unlocked book coming soon

Read My Stories

該音頻是用故事的原始語言製作的！

使用 Rust 和 WebAssembly 构建简单的 Web 应用程序：分步指南

About Author

註釋

標籤

这篇文章刊登在

Related Stories

看不见的层面：为什么用户访谈是不可替代的资产

加密货币增长：创建有效的用户角色

成功云迁移的完整指南：策略和最佳实践

使用这 18 种开发工具来提高你的工作效率 🚀🔥

看不见的层面：为什么用户访谈是不可替代的资产

加密货币增长：创建有效的用户角色

成功云迁移的完整指南：策略和最佳实践

使用这 18 种开发工具来提高你的工作效率 🚀🔥

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps