针对JavaScript开发人员的Rust简介是怎样的

这期内容当中小编将会给大家带来有关针对JavaScript开发人员的Rust简介是怎样的，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

创新互联专注于企业成都营销网站建设、网站重做改版、太平网站定制设计、自适应品牌网站建设、HTML5建站、商城建设、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为太平等各大城市提供网站开发制作服务。

Rust是2010年起源于Mozilla Research的一种编程语言。如今，所有大公司都在使用它。

亚马逊和微软都认可它是其系统中C / C  ++的最佳替代品，但是Rust并不止于此。像Figma和Discord这样的公司现在也通过在客户端应用中使用Rust来引领潮流。

我将从比较Rust和JavaScript开始，然后引导你完成Rust在浏览器中运行的步骤。最后，我将介绍一个使用Rust和JavaScript的COVID  simulator web应用程序的快速性能评估。

简而言之

Rust在概念上与JavaScript非常不同。但也有相似之处需要指出，让我们来看看问题的两面。

相似之处

这两种语言都有一个现代化的包管理系统。JavaScript有npm，Rust有Cargo。Rust有 Cargo.toml 来代替  package.json 进行依赖管理。要创建一个新的项目，使用 cargo init，要运行它，使用 cargo run。不太陌生吧?

Rust中有许多很酷的功能，你已经从JavaScript中知道了，只是语法略有不同。利用这个常见的JavaScript模式，对数组中的每个元素都应用一个闭包：

let staff = [    {name: "George", money: 0},    {name: "Lea", money: 500000}, ]; let salary = 1000; staff.forEach( (employee) => { employee.money += salary; } );

在Rust中，我们可以这样写：

let salary = 1000; staff.iter_mut().for_each(      |employee| { employee.money += salary; } );

诚然，习惯这种语法需要时间，用管子( | )代替括号。但在克服了最初的尴尬之后，我发现它比另一组括号读起来更清晰。

再举一个例子，这是JavaScript中的对象解构：

let point = { x: 5, y: 10 }; let {x,y} = point;

同样在Rust中：

let point = Point { x: 5, y: 10 }; let Point { x, y } = point;

主要的区别是，在Rust中我们必须指定类型(Point)，更普遍的是，Rust需要在编译时知道所有类型。但与大多数其他编译语言不同的是，编译器尽可能自己推断类型。

为了进一步解释这个问题，下面是在C++和许多其他语言中有效的代码。每个变量都需要明确的类型声明。

int a = 5; float b = 0.5; float c = 1.5 * a;

在JavaScript以及Rust中，这段代码是有效的：

let a = 5; let b = 0.5; let c = 1.5 * a;

共享功能不胜枚举：

• Rust具有 async + await 语法。

• 数组可以像让 let array = [1,2,3] 一样简单地创建。

• 代码按模块组织，有明确的导入和导出。

• 字符串是用Unicode编码的，处理特殊字符没有问题。

我可以继续列举下去，但我想我的观点现在已经很清楚了。Rust有一系列丰富的功能，这些功能在现代JavaScript中也有使用。

不同点

Rust是一种编译语言，这意味着没有运行时可以执行Rust代码。一个应用程序只能在编译器(rustc)完成它的魔法之后运行。这种方法的好处通常是更好的性能。

幸运的是，Cargo为我们解决了调用编译器的问题。而有了webpack，我们还可以将 Cargo 隐藏在 npm run build  后面。有了这个指南，只要为项目设置好Rust，就可以保留Web开发者的正常工作流程。

Rust  是一种强类型语言，这意味着在编译时所有类型必须匹配。例如，你不能调用一个参数类型错误或参数数量错误的函数。编译器会在你运行时遇到这个错误之前为你捕捉到它。显而易见的比较是TypeScript，如果你喜欢TypeScript，那么你很可能会喜欢Rust。

但别担心：如果你不喜欢TypeScript，Rust可能还是适合你。Rust  是近几年从头开始构建的，它考虑到了过去几十年来人类在编程语言设计方面所学到的一切。其结果是一种令人耳目一新的简洁语言。

Rust中的模式匹配是我最喜欢的一个特征，其他语言有 switch 和 case 来避免像这样的长链:

if ( x == 1) {    // ...  } else if ( x == 2 ) {   // ... } else if ( x == 3 || x == 4 ) {   // ... } // ...

Rust使用了如下更优雅的匹配项：

match x {   1 => { /* Do something if x == 1 */},   2 => { /* Do something if x == 2 */},   3 | 4 => { /* Do something if x == 3 || x == 4 */},   5...10 => { /* Do something if x >= 5 && x <= 10 */},   _ => { /* Catch all other cases */ } }

我认为这是非常整洁的，我希望JavaScript开发人员也能欣赏这种语法扩展。

不幸的是，我们还得谈谈Rust的黑暗面。直言不讳地说，使用严格的类型系统有时会让人感觉非常繁琐。如果你认为C++或Java的类型系统很严格，那么请准备好迎接Rust的艰难之旅吧。

就我个人而言，我很喜欢Rust这部分。我依赖于严格的类型系统，因此可以关闭大脑的一部分——每当我发现自己在编写JavaScript时，大脑的一部分就会剧烈地兴奋起来。但是我知道对于初学者来说，总是和编译器作对是很烦人的。我们将在稍后的Rust教程中看到一些。

Hello Rust

现在，让我们用Rust在浏览器中运行一个 hello world ，我们首先要确保所有必要的工具都已安装。

工具

使用rustup安装Cargo + rustc。  Rustup是推荐的安装Rust的方法，它将安装最新的稳定版Rust的编译器(rustc)和包管理器(Cargo)。它将安装Rust最新稳定版本的编译器(rustc)和包管理器(Cargo)。它还可以管理beta版和每夜构建版，但对于本例来说，这不是必需的。

• 在终端机上输入 cargo --version 来检查安装情况，你应该可以看到 cargo 1.48.0 (65cbdd2dc 2020-10-14)  这样的内容。

• 还要检查Rustup：rustup --version 应该产生 rustup 1.23.0(00924c9ba 2020-11-27)。

安装wasm-pack。 这是为了将编译器与npm集成。

• 通过输入 wasm-pack --version 来检查安装，这应该为您提供 wasm-pack 0.9.1 之类的东西。

我们还需要Node和npm。我们有一篇完整的文章[1]解释了安装这两个的最佳方法。

编写Rust代码

现在一切都安装好了，让我们来创建项目。最终的代码也可以在这个GitHub仓库[2]中找到。我们从一个可以编译成npm包的Rust项目开始，之后会有导入该包的JavaScript代码。

要创建一个名为 hello-world 的Rust项目，请使用 cargo init --lib  hello-world。这将创建一个新目录并生成Rust库所需的所有文件：

├──hello-world     ├── Cargo.toml     ├── src         ├── lib.rs

Rust代码将放在 lib.rs 中，在此之前我们必须调整 Cargo.toml。它使用 TOML[3]  定义了依赖关系和其他包的信息。如果想在浏览器中看到hello world，请在 Cargo.toml 中的某个地方添加以下行数(例如，在文件的最后)。

[lib] crate-type = ["cdylib"]

这告诉编译器在C兼容模式下创建一个库。显然我们在我们的例子中没有使用C。C-compatible只是意味着不是Rust专用的，这是我们使用JavaScript中的库所需要的。

我们还需要两个外部库，将它们作为单独的一行添加到依赖关系部分。

[dependencies] wasm-bindgen = "0.2.68" web-sys = {version = "0.3.45", features = ["console"]}

这些都是来自 crates.io[4] 的依赖项，它是 Cargo 使用的默认包仓库。

wasm-bindgen[5]是必要的，以创建一个我们以后可以从JavaScript中调用的入口点。(你可以在这里找到完整的文档。)值 ”0.2.68"  指定了版本。

web-sys[6]包含了所有Web  API的Rust绑定，它将使我们能够访问浏览器控制台。请注意，我们必须明确地选择控制台功能，我们最终的二进制文件将只包含这样选择的Web API绑定。

接下来是 lib.rs 内部的实际代码。自动生成的单元测试可以删除。只需使用以下代码替换文件的内容：

use wasm_bindgen::prelude::*; use web_sys::console;  #[wasm_bindgen] pub fn hello_world() {     console::log_1("Hello world"); }

顶部的 use 语句是用于从其他模块导入项目。这与JavaScript中的 import 类似)。

pub fn hello_world(){...} 声明一个函数。pub 修饰符是“public”的缩写，作用类似于JavaScript中的  export。注释 #[wasm_bindgen] 特定于Rust编译为[WebAssembly  (Wasm)](https://webassembly.org/ "wasm_bindgen] 特定于Rust编译为[WebAssembly (Wasm  "wasm_bindgen] 特定于Rust编译为[WebAssembly  (Wasm)")")。我们在这里需要它来确保编译器将包装函数公开给JavaScript。

在功能主体中，“Hello world”被打印到控制台上。Rust中的 console :: log_1() 是对 console.log()  的调用的包装。

你是否注意到函数调用中的 _1 后缀?这是因为JavaScript允许使用可变数量的参数，而Rust不允许。为了解决这个问题， wasm_bindgen  为每种参数数量生成一个函数。是的，这很快就会变得丑陋!但这有效。在web-sys文档[7]中提供了一个可以在Rust控制台中调用的完整函数列表。

现在我们应该已经一切就绪，试着用下面的命令编译它。这将下载所有的依赖项并编译项目，第一次可能会花一些时间。

cd hello-world wasm-pack build

哈!Rust编译器对我们不满意。

error[E0308]: mismatched types  --> src\lib.rs:6:20   | 6 |     console::log_1("Hello world");   |                    ^^^^^^^^^^^^^ expected struct `JsValue`, found `str`   |   = note: expected reference `&JsValue`              found reference `&'static str

注意：如果您看到其他错误(error: linking with cc failed: exit code:  1)并且你使用的是Linux，则说明缺少交叉编译依赖性。sudo apt install gcc-multilib 应该可以解决此问题。

正如我前面提到的，编译器很严格。当它期望一个 JsValue  的引用作为一个函数的参数时，它不会接受一个静态字符串。为了满足编译器的要求，必须进行显式转换。

console::log_1(&"Hello world".into());

方法 [into()](https://doc.rust-lang.org/std/convert/trait.Into.html "into(  "into()")") 将一个值转换为另一个值。Rust 编译器很聪明，它可以推迟哪些类型参与转换，因为函数签名只留下了一种可能性。在这种情况下，它将转换为  JsValue，这是一个由JavaScript管理的值的包装类型。然后，我们还得加上 &，通过引用而不是通过值来传递，否则编译器又会抱怨。

尝试再次运行 wasm-pack build，如果一切顺利，则最后一行应如下所示：

[INFO]: :-) Your wasm pkg is ready to publish at /home/username/intro-to-rust/hello-world/pkg.

如果你能走到这一步，你现在就可以手动编译Rust了。下一步，我们将把它与npm和webpack集成，后者将自动为我们完成这项工作。

JavaScript整合

在这个例子中，我决定将 package.json 放在 hello-world  目录内。我们也可以为Rust项目和JavaScript项目使用不同的目录,这是个口味问题。

以下是我的 package.json 文件。遵循的最简单方法是将其复制并运行 npm install，或者运行 npm init 并仅复制 dev  依赖项：

{     "name": "hello-world",     "version": "1.0.0",     "description": "Hello world app for Rust in the browser.",     "main": "index.js",     "scripts": {         "build": "webpack",         "serve": "webpack serve"     },     "author": "Jakob Meier ",     "license": "(MIT OR Apache-2.0)",     "devDependencies": {         "@wasm-tool/wasm-pack-plugin": "~1.3.1",         "@webpack-cli/serve": "^1.1.0",         "css-loader": "^5.0.1",         "style-loader": "^2.0.0",         "webpack": "~5.8.0",         "webpack-cli": "~4.2.0",         "webpack-dev-server": "~3.11.0"     } }

如你所见，我们使用的是webpack  5。Wasm-pack也可以和旧版本的webpack一起使用，甚至可以不使用捆绑程序。但每个设置的工作方式都有些不同，我建议你在跟随这个Rust教程时使用完全相同的版本。

另一个重要的依赖项是 wasm-pack-plugin。这是一个Webpack插件，专门用于加载使用wasm-pack构建的Rust软件包。

继续，我们还需要创建 webpack.config.js 文件来配置webpack。它应该是这样的：

const path = require('path'); const webpack = require('webpack'); const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");  module.exports = {     entry: './src/index.js',     output: {         path: path.resolve(__dirname, 'dist'),         filename: 'index.js',     },     plugins: [         new WasmPackPlugin({             crateDirectory: path.resolve(__dirname, ".")         }),     ],     devServer: {         contentBase: "./src",         hot: true,     },     module: {         rules: [{             test: /\.css$/i,             use: ["style-loader", "css-loader"],         }, ]     },     experiments: {         syncWebAssembly: true,     }, };

所有的路径都配置为Rust代码和JavaScript代码并排。index.js 将在 src 文件夹中，紧挨着  lib.rs。如果你喜欢不同的设置，可以随时调整这些。

你还会注意到，我们使用webpack experiments[8]，这是webpack 5引入的新选项。请确保将 syncWebAssembly  设置为true。

最后，我们必须创建JavaScript入口点 src/index.js：

import("../pkg").catch(e => console.error("Failed loading Wasm module:", e)).then(     rust =>         rust.hello_world() );

我们必须异步加载Rust模块。调用 rust.hello_world() 会调用一个生成的封装函数，而这个函数又会调用 lib.rs 中定义的Rust函数  hello_world。

现在，运行 npm run serve 应该可以编译所有内容并启动开发服务器。我们没有定义HTML文件，因此页面上没有任何显示。你可能还必须手动转到  http://localhost:8080/index，因为http://localhost:8080只是列出文件而不执行任何代码。

打开空白页后，打开开发人员控制台。Hello World应该有一个日志条目。

好吧，对于一个简单的hello world来说，这是相当多的工作。但现在一切都到位了，我们可以轻松地扩展Rust代码，而不用担心这些。保存对 lib.rs  的修改后，你应该会自动看到重新编译和浏览器中的实时更新，就像JavaScript一样。

何时使用Rust

Rust不是JavaScript的一般替代品。它只能通过Wasm在浏览器中运行，这在很大程度上限制了它的作用。即使你可以用Rust替换几乎所有的JavaScript代码，如果你真的想的话，那是一个坏主意，而且不是Wasm的目的。例如，Rust并不适合与你网站的UI进行交互。

我认为Rust +  Wasm是一个额外的选项，可以用来更有效地运行CPU重的工作负载。以较大的下载量为代价，Wasm避免了JavaScript代码面临的解析和编译开销。这一点，再加上编译器的强力优化，可能会带来更好的性能。这通常是公司为特定项目选择Rust的原因。选择Rust的另一个原因可能是语言偏好，但这是一个完全不同的讨论，我不会在这里讨论。

上述就是小编为大家分享的针对JavaScript开发人员的Rust简介是怎样的了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。