这是为网络设计的通用二进制代码。
WASM使用具有线性内存的低虚拟机。它在沙箱内安全地执行。
图像来源:â1Tapadoo
我们什么时候应该使用WASM?
只要我们需要进行大量计算,我们就应该使用wASM,因为它们效率很快。
但是为什么生锈呢?
您可以选择任何想要的语言,但是Rust提供了对内存的低级控制,并且没有非确定性垃圾收集。
让我们创建我们的斐波那契wasm软件包
1.创建/初始化我们的第一个自由
确保安装生锈。您可以从here安装,如果未安装。
$ cargo new fibonacci-wasm --lib
2.在生锈中写下我们的斐波那契功能
编写功能很容易。
pub fn fibonacci(n: i64) -> i64 {
if n == 0 {
return 0;
} else if n == 1 {
return 1;
} else {
let mut a = 0;
let mut b = 1;
for _i in 2..n {
let c = a + b;
a = b;
b = c;
}
return b;
}
}
除此之外,您可以在浏览器中执行任何操作,例如安装,警报等。
- 您可以使用在Rust Code中提供Web浏览器API的web_sys。
- web_sys 是 WASM-BINDGEN 的一部分,它扩展了您可以使用Rust Code执行的功能。
- 对于JS绑定,您可以使用js_sys,该js_sys提供了与JavaScript标准,内置对象的绑定,包括其方法和属性
您可以使用web_sys和js_sys在浏览器中做任何想法。
3.让我们用锈蚀代码创建JS绑定
这是一个困难的部分,但是我们有板条箱/库来执行此操作。
我们将使用它来促进WASM模块和JavaScript之间的高级相互作用。
借助 wasm_bindgen 宏。
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn fibonacci(n: i64) -> i64 {
....
}
大多数事情都完成了。
4.让我们编译并生成WASM-PAKC的WASM软件包
wasm-pack - >使用JavaScript使用Rust生成的WASM代码的一站式解决方案。
您可以使用 wasm-pack 轻松发布到 npm注册表或在 node_modules 文件夹中使用它。
。您可以安装wasm-pack here。
$ wasm-pack build --target web
现在您可以找到一个使用名称 pkg 的新文件夹。
您只能像导入JavaScript模块一样导入WebAssembly模块。
5.在浏览器中测试我们的软件包
-
创建一个基本的HTML页面,并在身体中,部分添加脚本标签 type module 。
<script type="module">
-
导入WASM软件包。
<script type="module"> import init, { fibonacci } from "./pkg/fibonacci_wasm.js"; .... </script>
-
初始化我们的WASM代码
<script type="module"> import init, { fibonacci } from "./pkg/fibonacci_wasm.js"; await init(); .... </script>
-
运行我们的fibonacci函数
<script type="module"> import init, { fibonacci } from "./pkg/fibonacci_wasm.js"; await init(); console.log(fibonacci(10)); </script>
结果
资源
随时提出查询,并在Github中提出更改和建议的请求。
源代码
快乐黑客
Rustaceans!