介绍 您是否曾对 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.

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

太長; 讀書

Making security fun one episode at a time

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

太長; 讀書

Max Zhuk

STORY’S CREDIBILITY

Guide

About Author

標籤

Languages

这篇文章刊登在...

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

太長; 讀書

Max Zhuk

STORY’S CREDIBILITY

Guide

About Author

標籤

Languages

这篇文章刊登在...

相關故事