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

我最大的感受

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

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

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

2、非空方案，保證其安全運(yùn)行。

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

總的來(lái)說(shuō)我用了2個(gè)月的時(shí)間研究它，能寫一些小東西，讓我感覺(jué)很舒服的是因它的機(jī)制生產(chǎn)的產(chǎn)物并沒(méi)有出現(xiàn)什么奇奇怪怪的問(wèn)題。

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

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

而且因?yàn)樗亲止?jié)碼的原因所以并不想js開(kāi)源，從速度和安全性來(lái)講都是碾壓js的。當(dāng)然它的存在就像rust官網(wǎng)說(shuō)的一樣，它不是來(lái)替代js，而是強(qiáng)化js！

本文主題

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

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

1、創(chuàng)建一個(gè)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

寫兩個(gè)函數(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();
}
//計(jì)算兩個(gè)數(shù)相加
#[wasm_bindgen]
pub fn add(a:i32, b:i32) -> i32{
    return a+b;
}

編譯wasm

build --target web

等待吧！這是一個(gè)漫長(zhǎng)的時(shí)刻！

再次點(diǎn)擊運(yùn)行，生產(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運(yùn)行

完美執(zhí)行！

4、最近遇到的問(wèn)題

目前用vue2的還是比較多的，我引入后一直無(wú)法正常運(yùn)行。

比如報(bào)錯(cuò)：當(dāng)前未啟用對(duì)實(shí)驗(yàn)語(yǔ)法“importMeta”的支持

比如報(bào)錯(cuò)：

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

最新評(píng)論