Complexe gegevensstructuren doorgeven
Leer strategieën om tekenreeksen, arrays en aangepaste objecten efficiënt tussen WASM en JavaScript over te dragen.
Complexe gegevensstructuren doorgeven is een gratis WebAssembly (WASM) voor performante toepassingen-les op CoddyKit. Dit is les 1 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.
Complexe gegevens in WASM
Bij het bouwen van krachtige applicaties met WebAssembly (WASM) moet je vaak meer dan alleen eenvoudige getallen uitwisselen tussen je WASM-module en JavaScript.
- Hoe geef je een tekenreeks door?
- Hoe zit het met een array met getallen?
- Of zelfs een aangepaste objectstructuur?
In deze les bekijken we strategieën om deze complexe gegevenstypen efficiënt te verwerken.
Het lineaire geheugen van WASM
De sleutel tot het doorgeven van complexe gegevens ligt in het begrijpen van het lineaire geheugen van WASM. Dit is een aaneengesloten geheugenblok, vergelijkbaar met een grote array bytes, dat wordt gedeeld door je WASM-module en de JavaScript-omgeving.
WASM-functies kunnen alleen getallen retourneren. In plaats van de volledige gegevens door te geven, geven we daarom een pointer (een geheugenadres, dus gewoon een getal!) door naar de plek waar de gegevens in dit gedeelde geheugen staan.
Tekenreeksen: pointer en lengte
Tekenreeksen zijn reeksen tekens. Om een tekenreeks van WASM naar JavaScript door te geven, zal de WASM-module:
- De bytes van de tekenreeks naar zijn lineaire geheugen schrijven.
- Twee stukjes informatie aan JavaScript retourneren:
- Het startgeheugenadres (de pointer) van de tekenreeks.
- De lengte van de tekenreeks, oftewel het aantal bytes dat deze inneemt.
JavaScript gebruikt deze gegevens vervolgens om de bytes uit het gedeelde geheugen te lezen en ze te decoderen tot een JavaScript-tekenreeks.
Voorbeeld: C-tekenreeks naar JS
Hier is een C-functie die een pointer naar een tekenreeks retourneert. Wanneer deze met Emscripten wordt gecompileerd, kan JavaScript de functie aanroepen en vervolgens de tekenreeks uit het WASM-geheugen lezen.
EMSCRIPTEN_KEEPALIVE maakt de functie aanroepbaar vanuit JavaScript.
#include <emscripten/emscripten.h>
#include <string.h>
// A static string for demonstration
const char* myString = "Hello WASM!";
EMSCRIPTEN_KEEPALIVE
const char* getGreetingPtr() {
return myString;
}
EMSCRIPTEN_KEEPALIVE
int getGreetingLength() {
return strlen(myString);
}
int main() {
// Required for a complete C program
return 0;
}Arrays: aaneengesloten gegevens
Numerieke arrays, zoals int[] of float[], lijken op tekenreeksen. Ze worden opgeslagen als een aaneengesloten blok waarden in het lineaire geheugen van WASM.
Om een array door te geven, retourneert WASM:
- Een pointer naar het eerste element van de array.
- Het aantal elementen in de array.
JavaScript leest vervolgens de onbewerkte bytes uit het gedeelde geheugen, waarbij het type en de grootte van elk element bekend zijn, bijvoorbeeld 4 bytes voor een geheel getal.
Voorbeeld: C-array naar JS
Deze C-code maakt een array, vult deze en biedt functies om de pointer en lengte op te halen. JavaScript gebruikt vervolgens Module.HEAP32 (voor 32-bits gehele getallen) om toegang te krijgen tot de elementen.
#include <emscripten/emscripten.h>
#include <stdlib.h> // For malloc
int* dynamicArray = NULL;
int currentArrayLength = 0;
EMSCRIPTEN_KEEPALIVE
int* createAndGetArray(int size) {
if (dynamicArray) {
free(dynamicArray);
}
dynamicArray = (int*)malloc(size * sizeof(int));
currentArrayLength = size;
for (int i = 0; i < size; ++i) {
dynamicArray[i] = i * 10 + 5;
}
return dynamicArray;
}
EMSCRIPTEN_KEEPALIVE
int getArrayLength() {
return currentArrayLength;
}
int main() {
// Required for a complete C program
return 0;
}Aangepaste objecten (structs)
Het doorgeven van aangepaste objecten, zoals structs in C/C++, is ingewikkelder. Deze objecten zijn verzamelingen van verschillende gegevenstypen, bijvoorbeeld een geheel getal, een kommagetal en een tekenreeks.
De strategie is om de velden van het object handmatig in het lineaire geheugen van WASM te plaatsen. WASM retourneert vervolgens een pointer naar het begin van dit geheugenblok. JavaScript moet de exacte geheugenindeling kennen, dus de offsets en typen van elk veld, om de gegevens correct te kunnen lezen.
Voorbeeld: C-struct naar JS
Dit C-voorbeeld definieert een Person-struct en een functie om er een te maken. JavaScript ontvangt een pointer en leest vervolgens waarden vanaf specifieke offsets in de WASM-geheugenbuffer, waarbij het de indeling van de struct kent.
id(int) op offset 0age(int) op offset 4height(float) op offset 8
#include <emscripten/emscripten.h>
#include <stdlib.h> // For malloc
#include <string.h> // For strcpy
typedef struct {
int id;
int age;
float height; // assuming 4 bytes after age
char name[16]; // Fixed-size string buffer
} Person;
EMSCRIPTEN_KEEPALIVE
Person* createPerson(int id, int age, float height, const char* name) {
Person* p = (Person*)malloc(sizeof(Person));
p->id = id;
p->age = age;
p->height = height;
strncpy(p->name, name, sizeof(p->name) - 1);
p->name[sizeof(p->name) - 1] = '\0'; // Ensure null termination
return p;
}
int main() {
// Required for a complete C program
return 0;
}JS wijst WASM-geheugen toe
Wat als JavaScript complexe gegevens *naar* WASM moet doorgeven? Bijvoorbeeld een grote array met afbeeldingsgegevens die WASM moet verwerken.
JavaScript kan de beschikbare functies voor geheugentoewijzing van WASM aanroepen, zoals Emscripten's _malloc, om ruimte in het lineaire geheugen van WASM te reserveren. Vervolgens schrijft JavaScript de gegevens naar die toegewezen ruimte en geeft het de pointer door aan een WASM-functie voor verwerking.
Korte controle
Je hebt geleerd hoe WASM complexe gegevens verwerkt. Laten we testen of je het begrijpt!
Samenvatting: complexe gegevens
Gefeliciteerd! Je hebt de fundamentele technieken geleerd om complexe gegevens tussen WebAssembly en JavaScript door te geven.
- WASM en JavaScript communiceren via een gedeeld lineair geheugen.
- Complexe gegevens (tekenreeksen, arrays, structs) worden doorgegeven via hun pointer (geheugenadres) en vaak hun lengte of grootte.
- JavaScript leest vervolgens de onbewerkte bytes uit het gedeelde geheugen en interpreteert ze op basis van de bekende gegevensstructuur.
- Voor aangepaste objecten is het essentieel dat je de exacte geheugenindeling begrijpt.
Met deze technieken kun je efficiënt gegevens uitwisselen met hoge prestaties!
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 “Complexe gegevensstructuren doorgeven” gratis?
Ja — de volledige tekst van “Complexe gegevensstructuren doorgeven” 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 “Complexe gegevensstructuren doorgeven”?
Leer strategieën om tekenreeksen, arrays en aangepaste objecten efficiënt tussen WASM en JavaScript over te dragen. 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 1 van 4.
Hoe lang duurt de les “Complexe gegevensstructuren doorgeven”?
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
- Complexe gegevensstructuren doorgeven
- WASM-geheugenmodel en -beheer
- Gedeeld geheugen en atomics
- Linear memory laten groeien en beheren