Effektiv JS-interoperabilitet med `wasm-bindgen`
Bliv fortrolig med `wasm-bindgen`, så du problemfrit kan udveksle komplekse datastrukturer og skabe samspil mellem Rust WASM og JavaScript.
Effektiv JS-interoperabilitet med `wasm-bindgen` er en gratis WebAssembly (WASM) til applikationer med høj ydeevne-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i WebAssembly (WASM) til applikationer med høj ydeevne, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. WebAssembly (WASM) til applikationer med høj ydeevne-kurset indeholder 4 lektioner i alt.
Lås op for kompleks interoperabilitet
Velkommen til den sidste lektion om at bygge højtydende WASM med Rust! Indtil videre har du lært at konfigurere Rust til WASM og skrive grundlæggende funktioner.
Men hvad med at udveksle komplekse data som strenge, objekter eller arrays? Det er her, wasm-bindgen kommer ind i billedet. Det er et Rust-værktøj, der forenkler samspillet mellem Rust og JavaScript.
Hvad er `wasm-bindgen`?
wasm-bindgen er et hjælpeværktøj, der hjælper dig med at oprette JavaScript-bindinger til Rust-WebAssembly-moduler. Det håndterer detaljerne på lavt niveau ved overførsel af datatyper mellem de to sprog.
- Automatiserer FFI: Det genererer automatisk JavaScript-limkode og Rust-FFI-erklæringer (Foreign Function Interface).
- Omfattende typeunderstøttelse: Det giver dig mulighed for at overføre mere komplekse typer som
String, JavaScript-objekter og endda DOM-elementer direkte. - Bedre udvikleroplevelse: Det får dine Rust-WASM-moduler til at føles mere som indbyggede JavaScript-moduler.
Konfiguration til `wasm-bindgen`
For at bruge wasm-bindgen skal du tilføje det som en afhængighed i din Cargo.toml. Du bruger også værktøjet wasm-pack, som benytter wasm-bindgen til at bygge dit WASM-modul.
Tilføj dette i din Cargo.toml:
[dependencies]
wasm-bindgen = "0.2"Markér derefter dine funktioner med #[wasm_bindgen].
Eksport af grundlæggende funktioner
Lad os begynde med en enkel funktion. Attributten #[wasm_bindgen] gør en Rust-funktion tilgængelig for JavaScript.
Prøv at køre dette eksempel. Funktionen add_numbers eksponeres, og run_add_example viser, hvordan den kaldes.
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn add_numbers(a: u32, b: u32) -> u32 {
a + b
}
// This function serves as a runnable entry point for demonstration.
#[wasm_bindgen]
pub fn run_add_example() -> u32 {
add_numbers(10, 5)
}Overførsel af strenge til Rust
En af de gode funktioner i wasm-bindgen er håndteringen af strenge. Du kan overføre en JavaScript-streng direkte til en Rust-funktion, der forventer &str eller String.
Her modtager funktionen greet et strengargument fra JavaScript.
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
format!("Hello, {}!", name)
}
#[wasm_bindgen]
pub fn run_greet_example() -> String {
greet("CoddyKit User")
}Returnering af strenge fra Rust
Tilsvarende bliver Rust-funktioner, der returnerer en String, automatisk konverteret til en JavaScript-streng. Det gør det meget naturligt at arbejde med tekst på tværs af grænsen.
Funktionen get_message returnerer en Rust-String.
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn get_message() -> String {
String::from("This message came from Rust!")
}
#[wasm_bindgen]
pub fn run_get_message_example() -> String {
get_message()
}Eksport af strukturer som JS-klasser
wasm-bindgen kan også eksponere Rust-strukturer som JavaScript-klasser. Det giver dig mulighed for at oprette og manipulere Rust-objekter direkte fra JavaScript.
Strukturen User nedenfor bliver til en klasse i JavaScript, komplet med en konstruktør.
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub struct User {
name: String,
age: u8,
}
#[wasm_bindgen]
impl User {
#[wasm_bindgen(constructor)]
pub fn new(name: String, age: u8) -> User {
User { name, age }
}
}
#[wasm_bindgen]
pub fn create_user_example() -> User {
User::new("Alice".to_string(), 30)
}Tilføjelse af metoder til JS-klasser
Når en Rust-struktur er eksponeret som en JavaScript-klasse, kan du tilføje metoder til dens impl-blok. Disse metoder kan kaldes direkte på JavaScript-objektet.
Lad os tilføje metoden greet til vores User-struktur.
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub struct User {
name: String,
age: u8,
}
#[wasm_bindgen]
impl User {
#[wasm_bindgen(constructor)]
pub fn new(name: String, age: u8) -> User {
User { name, age }
}
pub fn greet(&self) -> String {
format!("Hi, my name is {} and I'm {} years old.", self.name, self.age)
}
}
#[wasm_bindgen]
pub fn run_user_greet_example() -> String {
let user = User::new("Bob".to_string(), 25);
user.greet()
}Overførsel af Rust-vektorer til JS
wasm-bindgen kan også håndtere grundlæggende samlingstyper som Vec for primitive typer. Den konverterer en Rust-Vec til et JavaScript-array.
Det gør det nemt at overføre lister med tal eller strenge.
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn process_numbers(numbers: Vec<u32>) -> Vec<u32> {
numbers.iter().map(|n| n * 2).collect()
}
#[wasm_bindgen]
pub fn run_process_numbers_example() -> Vec<u32> {
let input = vec![1, 2, 3];
process_numbers(input)
}Test af `wasm-bindgen`-interoperabilitet
Hvilke af følgende udsagn om wasm-bindgen er SANDE?
Opsummering: Bliv ekspert i interoperabilitet
Nu mestrer du wasm-bindgen, et effektivt værktøj til problemfrit samspil mellem Rust og JavaScript i dine WebAssembly-projekter.
- Det automatiserer genereringen af bindinger, så dine Rust-funktioner og -typer bliver nemme at tilgå fra JS.
- Det gør det muligt at udveksle komplekse datatyper som strenge, strukturer (som JS-klasser) og vektorer.
- Det forbedrer udvikleroplevelsen markant og lader dig skrive højtydende Rust-logik, der føles naturlig i et JavaScript-miljø.
Med wasm-bindgen kan dine Rust-WASM-moduler blive integrerede højtydende komponenter i enhver webapplikation!
Lær WebAssembly (WASM) til applikationer med høj ydeevne med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 12
- Lektioner
- 48
Ofte stillede spørgsmål
Er lektionen “Effektiv JS-interoperabilitet med `wasm-bindgen`” gratis?
Ja — hele teksten til “Effektiv JS-interoperabilitet med `wasm-bindgen`” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af WebAssembly (WASM) til applikationer med høj ydeevne-kurset, skal du opgradere til CoddyKit PRO. WebAssembly (WASM) til applikationer med høj ydeevne-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Effektiv JS-interoperabilitet med `wasm-bindgen`”?
Bliv fortrolig med `wasm-bindgen`, så du problemfrit kan udveksle komplekse datastrukturer og skabe samspil mellem Rust WASM og JavaScript. Du øver dig i WebAssembly (WASM) til applikationer med høj ydeevne med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på WebAssembly (WASM) til applikationer med høj ydeevne?
Der kræves ingen tidligere erfaring. WebAssembly (WASM) til applikationer med høj ydeevne på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Effektiv JS-interoperabilitet med `wasm-bindgen`”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne WebAssembly (WASM) til applikationer med høj ydeevne-lektion?
Ja. Alle WebAssembly (WASM) til applikationer med høj ydeevne-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Opsætning af Rust til WebAssembly
- Skrivning af Rust-funktioner til WASM
- Effektiv JS-interoperabilitet med `wasm-bindgen`
- Fejlhåndtering på tværs af WASM-grænsen