Lær at programmere i Rust · Lektion

Rust til WebAssembly (WASM)

Kompilér Rust-kode til WebAssembly, så højtydende moduler kan køre i webbrowsere og andre WASM-runtimes.

Lektion 2 af 311 trin

Rust til WebAssembly (WASM) er en gratis Lær at programmere i Rust-lektion på CoddyKit. Dette er lektion 2 af 3. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Lær at programmere i Rust, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Lær at programmere i Rust-kurset indeholder 3 lektioner i alt.

Hvad er WebAssembly (WASM)?

WebAssembly, eller WASM, er et binært instruktionsformat til en stakbaseret virtuel maskine. Det er designet som et portabelt kompileringsmål for højniveausprog som Rust, C/C++ og Go.

Tænk på det som et lavniveau-assemblylignende sprog, der kører effektivt i webbrowsere og andre miljøer. Det gør det muligt at køre kode, der kræver høj ydeevne, ved næsten oprindelig hastighed.

Rusts fordele til WASM

Rust er et fremragende valg til WebAssembly-udvikling på grund af sprogets unikke styrker:

Ydeevne: Rust er kendt for sin hastighed, der ligger tæt på C/C++.
Hukommelsessikkerhed: Rusts ejerskabssystem forhindrer almindelige fejl uden brug af en garbage collector.
Små binærfiler: Rusts minimale runtime giver kompakte WASM-moduler.
Værktøjer: Fremragende understøttelse med værktøjer som wasm-pack og wasm-bindgen.

Konfiguration af dine WASM-værktøjer

Hvis du vil kompilere Rust til WebAssembly, bruger du primært wasm-pack. Det er et kommandolinjeværktøj, der håndterer hele byggeprocessen.

Du bruger også wasm-bindgen, en Rust-crate og et CLI-værktøj, der letter interaktioner på højt niveau mellem WASM-moduler og JavaScript.

Installér wasm-pack ved at åbne din terminal og køre:

cargo install wasm-pack

Dit første WASM-projekt

Lad os oprette et nyt Rust-projekt, der er tilpasset WebAssembly. Vi bruger cargo generate sammen med en bestemt skabelon:

cargo install cargo-generate
cargo generate --git https://github.com/rustwasm/wasm-pack-template

Følg anvisningerne for at navngive dit projekt. Det opretter en lib.rs-fil, der er klar til WASM-kode, samt en www-mappe til en enkel webgrænseflade.

Rust-funktion til JavaScript

Hvis du vil gøre en Rust-funktion kaldbar fra JavaScript, bruger vi attributten #[wasm_bindgen] fra craten wasm-bindgen.

Denne attribut instruerer wasm-bindgen i at generere den nødvendige forbindelseskode, så JavaScript kan interagere med din Rust-funktion.

use wasm_bindgen::prelude::*;

// This attribute makes the `greet` function available to JavaScript.
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

// In a WASM library, `main` is not used. This code is compiled to a .wasm module.

Integrér WASM med JavaScript

Når du har skrevet din Rust-kode, bygger du den til et WASM-modul ved hjælp af wasm-pack build. Denne kommando opretter en pkg-mappe med din .wasm-fil og forbindelseskode til JS.

Derefter kan du nemt importere og bruge de eksporterede Rust-funktioner i din JavaScript:

// www/index.js (simplified)
import { greet } from "../pkg/your_project_name"; // Adjust path

// Call the Rust function
const message = greet("CoddyKit Learner");
console.log(message); // Outputs: "Hello, CoddyKit Learner!"

// You'd typically connect this to HTML elements.

Rust kalder JavaScript

Rust kan også kalde JavaScript-funktioner. Du deklarerer dem i en extern "C"-blok og bruger #[wasm_bindgen] til at tilknytte dem til globale JS-objekter eller funktioner.

Argumentet js_namespace lader dig angive, hvor funktionen findes i JavaScript-miljøet, f.eks. i objektet console.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern "C" {
    // Import JS console.log as a Rust function named 'log'
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);

    // You can import other JS functions too
    #[wasm_bindgen(js_name = alert)]
    fn js_alert(s: &str);
}

#[wasm_bindgen]
pub fn log_and_alert_from_rust(message: &str) {
    log(&format!("Rust log: {}", message));
    js_alert(&format!("Rust alert: {}", message));
}

Sende strenge mellem Rust og JS

wasm-bindgen håndterer intelligent almindelige datatyper som tal og booleske værdier. For strenge bruger det UTF-8-kodning.

Når du sender en &str eller String fra Rust, konverterer wasm-bindgen den til en JavaScript-String og omvendt. Denne abstraktion gør interoperabiliteten problemfri.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn uppercase_and_reverse(s: String) -> String {
    s.to_uppercase().chars().rev().collect()
}

// This function takes a String, processes it, and returns a new String.
// wasm-bindgen handles the conversion to/from JS strings.

WASM uden for browseren

WebAssembly forbindes ofte med webbrowsere, men er ikke begrænset til dem! WASM-runtime-miljøer findes i mange miljøer og åbner nye muligheder:

Serverløse funktioner: Implementér hurtige, isolerede funktioner.
Blockchain: Udfør smart contracts.
Plugins/udvidelser: Udvid programmer sikkert.
Skrivebordsprogrammer: Integrér højtydende moduler.

Det udvider Rusts anvendelsesområde langt ud over traditionel systemprogrammering.

Centrale WebAssembly-begreber

Lad os teste din forståelse af Rust og WebAssembly.

Besvar den i den interaktive lektion

Opsummering: Rust til WASM

Du har lært at bringe Rusts ydeevne og sikkerhed til WebAssembly!

WASM giver et hurtigt, portabelt runtime-miljø til kompileret kode.
Rust er velegnet til WASM takket være sin ydeevne, sine små binærfiler og sin sikkerhed.
Værktøjer som wasm-pack og wasm-bindgen forenkler udviklingsprocessen.
Du kan nemt eksportere Rust-funktioner til JavaScript og importere JavaScript-funktioner i Rust.
WASM bruges til langt mere end webbrowsere.

Fortsæt med at udforske mulighederne, så du kan bygge effektive webprogrammer og andre programmer med høj ydeevne i Rust!

Gratis at komme i gang

Lær Rust 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: 39
Lektioner: 144

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Rust til WebAssembly (WASM)” gratis?

Ja — alle 3 lektioner i læringssporet Lær at programmere i Rust, inklusive “Rust til WebAssembly (WASM)”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Lær at programmere i Rust-kurset indeholder 3 lektioner i alt.

Hvad lærer jeg i “Rust til WebAssembly (WASM)”?

Kompilér Rust-kode til WebAssembly, så højtydende moduler kan køre i webbrowsere og andre WASM-runtimes. Du øver dig i Lær at programmere i Rust 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å Lær at programmere i Rust?

Der kræves ingen tidligere erfaring. Lær at programmere i Rust 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 2 af 3.

Hvor lang tid tager lektionen “Rust til WebAssembly (WASM)”?

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 Lær at programmere i Rust-lektion?

Ja. Alle Lær at programmere i Rust-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

← Tilbage til Lær at programmere i Rust