Aangepaste JavaScript-callbacks
Ontwerp en implementeer aangepaste JavaScript-functies die vanuit uw WebAssembly-modules kunnen worden aangeroepen.
Aangepaste JavaScript-callbacks is een gratis WebAssembly (WASM) voor performante toepassingen-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject WebAssembly (WASM) voor performante toepassingen. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus WebAssembly (WASM) voor performante toepassingen bevat in totaal 4 lessen.
JavaScript aanroepen vanuit WASM
Soms moet je WebAssembly-module (WASM) communiceren met de JavaScript-omgeving waarin deze wordt uitgevoerd. Dan worden aangepaste JavaScript-callbacks essentieel!
Daarmee kan je WASM-code acties starten of gegevens terugsturen naar je webpagina, zodat je applicaties interactiever worden.
Waarom WASM callbacks nodig heeft
Stel je voor dat je WASM-module complexe berekeningen uitvoert of gegevens verwerkt. Zodra dat klaar is, moet de module vaak:
- De gebruikersinterface bijwerken: JavaScript laten weten dat een grafiek moet worden vernieuwd of een resultaat moet worden weergegeven.
- Browser-API's gebruiken: JavaScript vragen om API's te gebruiken waartoe WASM geen rechtstreekse toegang heeft, zoals `localStorage` of `fetch`.
- Informatie loggen: foutopsporingsberichten of statusupdates naar de console van de browser sturen.
- Gebeurtenissen afhandelen: reageren op gebruikersinteracties of systeemgebeurtenissen die door JavaScript worden beheerd.
JavaScript levert de functie
Vanaf de JavaScript-kant is het instellen van een callback eenvoudig. Je definieert gewoon een normale JavaScript-functie. Deze functie wordt vervolgens tijdens de initialisatie beschikbaar gemaakt voor je WebAssembly-module.
Je kunt het zien als het geven van een rechtstreekse lijn aan je WASM-module om indien nodig terug te roepen naar je JavaScript-applicatie.
WASM declareert de import
Aan de WebAssembly-kant, bijvoorbeeld in Rust of C/C++, moet je declareren dat je module een functie uit zijn hostomgeving (JavaScript) verwacht te importeren.
- In Rust gebruik je het attribuut
#[wasm_bindgen]met een blokextern "C". - Deze declaratie specificeert de naam van de functie en de verwachte handtekening ervan (parameters en retourtype).
- Daarmee laat je de WASM-compiler weten dat deze functieaanroep extern door JavaScript wordt opgelost.
Rust-code: JavaScript importeren
Laten we een Rust-voorbeeld bekijken. We importeren een JavaScript-functie met de naam logMessageFromWasm. Wanneer Rust deze aanroept, wordt de bijbehorende JS-functie uitgevoerd.
/* lib.rs */
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
extern "C" {
// Imports a JS function named 'logMessageFromWasm'
// It takes a string and returns nothing.
#[wasm_bindgen(js_name = logMessageFromWasm)]
fn log_message_from_wasm(s: &str);
}
#[wasm_bindgen]
pub fn call_js_log() {
log_message_from_wasm("Hello from Rust!");
}De callback uitvoeren (JS + Rust)
Om de Rust-code uit de vorige scène uit te voeren, compileren we deze naar een .wasm-module en gebruiken we de koppelingscode van wasm-bindgen. Vervolgens definiëren we onze JavaScript-callback en laden we de WASM.
Controleer na het uitvoeren de ontwikkelaarsconsole van je browser!
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>WASM Callback Demo</title>
</head>
<body>
<h1>Check console for WASM message!</h1>
<script type="module">
// Assuming 'pkg/rust_wasm_module.js' is generated by wasm-pack
import init, { call_js_log } from './pkg/rust_wasm_module.js';
// Define the JavaScript function that WASM will call
window.logMessageFromWasm = (message) => {
console.log("JS received:", message);
};
async function run() {
await init(); // Initialize the WASM module
call_js_log(); // Call the Rust function, which calls JS
}
run();
</script>
</body>
</html>Gegevens doorgeven aan callbacks
Callbacks zijn niet alleen bedoeld voor eenvoudige meldingen; ze kunnen ook gegevens van je WebAssembly-module terugsturen naar JavaScript. Dat is essentieel voor het retourneren van resultaten of het meegeven van context.
- getallen (gehele getallen en kommagetallen) en booleans worden rechtstreeks doorgegeven.
- tekenreeksen: met
wasm-bindgenworden Rust-tekenreeksen (`&str`) efficiënt omgezet naar JavaScript-tekenreeksen. - complexe objecten: voor ingewikkeldere gegevensstructuren biedt `wasm-bindgen` mechanismen voor naadloze serialisatie en deserialisatie.
Callback met argumenten (Rust)
Laten we ons Rust-voorbeeld uitbreiden zodat het een getal terugstuurt naar JavaScript. De functie `log_number_from_wasm` wordt geïmporteerd en verwacht een geheel getal als argument.
Onze Rust-functie `calculate_and_log` voert een optelling uit en geeft het resultaat vervolgens door aan deze JS-callback.
/* lib.rs */
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
extern "C" {
// Imports a JS function that takes an i32 number
#[wasm_bindgen(js_name = logNumberFromWasm)]
fn log_number_from_wasm(num: i32);
}
#[wasm_bindgen]
pub fn calculate_and_log(a: i32, b: i32) {
let result = a + b;
log_number_from_wasm(result); // Call JS with the calculated result
}Callback met argumenten uitvoeren
Hier is de JavaScript-instelling voor het vorige Rust-voorbeeld. Let erop dat de functie `window.logNumberFromWasm` nu een numeriek argument accepteert en dit vervolgens naar de console afdrukt.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>WASM Callback Args Demo</title>
</head>
<body>
<h1>Check console for calculated result!</h1>
<script type="module">
import init, { calculate_and_log } from './pkg/rust_wasm_module.js';
// This JS function will receive a number from WASM
window.logNumberFromWasm = (number) => {
console.log("JS received result:", number);
};
async function run() {
await init();
calculate_and_log(10, 20); // Call Rust with arguments 10 and 20
}
run();
</script>
</body>
</html>Veelvoorkomende callbackscenario's
Aangepaste callbacks zijn bijzonder veelzijdig en zorgen ervoor dat WASM soepel met de omgeving van de browser kan integreren. Veelvoorkomende toepassingen zijn:
- Updates van de gebruikersinterface: JS laten weten dat elementen moeten worden bijgewerkt nadat een WASM-berekening is voltooid.
- Toegang tot browser-API's: JS vragen om `localStorage` of `fetch` te gebruiken, of de DOM rechtstreeks te bewerken.
- Gebeurtenissen afhandelen: WASM laten reageren op gebruikersinvoer of browsergebeurtenissen die door JS worden verwerkt.
- Logboekregistratie en foutopsporing: vanuit WASM gedetailleerde berichten naar de browserconsole sturen voor monitoring.
Korte controle over callbacks
Begrijpen hoe je geïmporteerde functies declareert en gebruikt, is essentieel voor effectieve communicatie tussen WASM en JS.
Samenvatting: aangepaste JS-callbacks
Je hebt geleerd hoe je WebAssembly-modules JavaScript kunt laten aanroepen!
- WASM-modules kunnen JavaScript-functies importeren en aanroepen.
wasm-bindgenvereenvoudigt dit proces in Rust en maakt typeveilige gegevensuitwisseling mogelijk.- Callbacks zijn essentieel voor updates van de gebruikersinterface, toegang tot browser-API's en logboekregistratie vanuit WASM.
Dit krachtige patroon maakt WASM-applicaties dynamischer en zorgt voor een betere integratie met de webomgeving. Blijf experimenteren!
Leer WebAssembly (WASM) voor performante toepassingen met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 12
- Lessen
- 48
Veelgestelde vragen
Is de les “Aangepaste JavaScript-callbacks” gratis?
Ja — de volledige tekst van “Aangepaste JavaScript-callbacks” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus WebAssembly (WASM) voor performante toepassingen wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus WebAssembly (WASM) voor performante toepassingen bevat in totaal 4 lessen.
Wat leer ik in “Aangepaste JavaScript-callbacks”?
Ontwerp en implementeer aangepaste JavaScript-functies die vanuit uw WebAssembly-modules kunnen worden aangeroepen. Je oefent met WebAssembly (WASM) voor performante toepassingen door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met WebAssembly (WASM) voor performante toepassingen te beginnen?
Ervaring vooraf is niet nodig. WebAssembly (WASM) voor performante toepassingen op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Aangepaste JavaScript-callbacks”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over WebAssembly (WASM) voor performante toepassingen?
Ja. Elke les over WebAssembly (WASM) voor performante toepassingen bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Asynchrone bewerkingen met WASM
- Aangepaste JavaScript-callbacks
- Foutafhandeling en uitzonderingen
- Geheugen en typed arrays delen over de JS/WASM-grens