最初是由Mozilla研究院的Graydon Hoare設(shè)計創(chuàng)造，然后在Dave Herman, Brendan Eich以及很多其他人的貢獻(xiàn)下逐步完善的。Rust的設(shè)計者們通過在研發(fā)Servo網(wǎng)站瀏覽器布局引擎過程中積累的經(jīng)驗優(yōu)化了Rust語言和Rust編譯器。

我最大的感受

開始我是抵觸它的，原因很簡單，它太難學(xué)了?。?！好害怕語法上影響我會的其他語言。不知道各位小伙伴是否有這樣的感受。

它的優(yōu)點也很直觀:

1、采用所有權(quán)機制，因此沒有垃圾回收器。

2、非空方案，保證其安全運行。

3、敢和C++對標(biāo)性能的語言。

總的來說我用了2個月的時間研究它，能寫一些小東西，讓我感覺很舒服的是因它的機制生產(chǎn)的產(chǎn)物并沒有出現(xiàn)什么奇奇怪怪的問題。

Rust在web上的應(yīng)用

WebAssembly或wasm是用于瀏覽器內(nèi)客戶端腳本的低級、可移植的字節(jié)碼格式，是一種運行在現(xiàn)代網(wǎng)絡(luò)瀏覽器中的新型代碼、并且提供新的性能特性和效果，對于瀏覽器下載和加載是有效的。

而且因為它是字節(jié)碼的原因所以并不想js開源，從速度和安全性來講都是碾壓js的。當(dāng)然它的存在就像rust官網(wǎng)說的一樣，它不是來替代js，而是強化js！

本文主題

在咱們的站中，相關(guān)完整的示例太少了！最主要是vue手腳架中的應(yīng)用幾乎沒有！所以本文將帶領(lǐng)大家在普通html上和vue手腳架上都來運行wasm的流程！

應(yīng)用工具：HBuilder、CLion

1、創(chuàng)建一個wasm

配置Cargo

[package]
name = "mylib"
version = "0.1.0"
edition = "2021"
 
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[lib]
crate-type = ["cdylib"]
 
[dependencies]
wasm-bindgen = "0.2.78"
base64 = "0.12.1"
 
[package.metadata.wasm-pack.profile.release]
wasm-opt = false

寫兩個函數(shù)

use wasm_bindgen::prelude::*;
use base64::*;
 
//解析base64
#[wasm_bindgen]
pub fn my_str(s:String) -> String{
    let s = base64::decode(s).unwrap();
    return String::from_utf8(s.clone()).unwrap();
}
//計算兩個數(shù)相加
#[wasm_bindgen]
pub fn add(a:i32, b:i32) -> i32{
    return a+b;
}

編譯wasm

build --target web

等待吧！這是一個漫長的時刻！

再次點擊運行，生產(chǎn)成品。

內(nèi)涵了wasm文件與js膠水文件【js與wasm數(shù)據(jù)交互作用】

2、在Html中的應(yīng)用

將pkg直接放入根目錄

	<script type="module">
	import init, {add, my_str} from "./pkg/mylib.js";
	init().then(() => {
		console.log(add(1,2))
		console.log(my_str("5LiA56CB6LaF5Lq6"))
	});
	</script>

執(zhí)行wasm函數(shù)

3、vue3中的應(yīng)用

將pkg扔進(jìn)根目錄

執(zhí)行wasm函數(shù)

<script setup>
import { ref, onMounted } from 'vue'
import init, {add, my_str} from "../../pkg/mylib.js";
defineProps({
  msg: String
})
onMounted(async () => {
  await init()
  console.log(add(1,2))
  console.log(my_str("5LiA56CB6LaF5Lq6"))
})
const count = ref(0)
</script>

npm run dev運行

完美執(zhí)行！

4、最近遇到的問題

目前用vue2的還是比較多的，我引入后一直無法正常運行。

比如報錯：當(dāng)前未啟用對實驗語法“importMeta”的支持

比如報錯：

WebAssembly module is included in initial chunk.
This is not allowed, because WebAssembly download and compilation must happen asynchronous.
Add an async splitpoint (i. e. import()) somewhere between your entrypoint and the WebAssembly module:

到此這篇關(guān)于Rust開發(fā)WebAssembly在Html和Vue中的應(yīng)用小結(jié)的文章就介紹到這了,更多相關(guān)Rust開發(fā)WebAssembly內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論