Erstellen Sie mit Javascript einen reaktiven Shop von Grund auf

Reaktive Programmierung ist ein praktischer Ansatz, der es Ihnen ermöglicht, Anwendungen zu erstellen, die Datenänderungen dynamisch widerspiegeln. Es ist die Kerntechnologie hinter vielen modernen JavaScript-Frameworks wie React und Vue – sie aktualisiert sich als Reaktion auf Benutzeraktionen oder andere Zustandsänderungen. Zu verstehen, was sich unter der Haube der Reaktivität verbirgt, kann sich wie zu viel Arbeit anfühlen, es fühlt sich wie eine dieser „magischen“ Abstraktionen an, für die die Frameworks gedacht sind. Aber was wäre, wenn Sie selbst ein kleines reaktives System bauen könnten, um zu sehen, wie es wirklich funktioniert?

In diesem Artikel werden die Grundlagen der reaktiven Programmierung erläutert, indem ein einfacher reaktiver Speicher von Grund auf in JavaScript erstellt wird. Wir werden die Schlüsselkonzepte, einschließlich Abhängigkeitsverfolgung und automatischer Aktualisierungen, in einer minimalen Implementierung durchgehen. Am Ende sollten Sie verstehen, wie Sie reaktive Datenstrukturen erstellen, die Abhängigkeiten automatisch verfolgen und Aktualisierungen auslösen, wenn sich der Status ändert. Dieser Ansatz hilft Ihnen, die Reaktivität zu verstehen und gibt Ihnen die Werkzeuge an die Hand, um selbst damit zu experimentieren und sie möglicherweise auf Ihre Projekte anzuwenden.

Besuchen wir zunächst die Kernkomponenten eines reaktiven Systems, das wir verwenden werden:

• Effekte: Funktionen, die automatisch als Reaktion auf Änderungen in reaktiven Daten ausgeführt werden. Die Registrierung erfolgt über die Effektfunktion, die Abhängigkeiten von allen abgerufenen Signalen verfolgt.
• Signale: Reaktive Dateneigenschaften, die abhängige Effekte benachrichtigen, wenn sich ihre Werte ändern.
• Abhängigkeiten: Die Beziehungen zwischen Signalen und den Effekten, die auf ihnen beruhen. Abhängigkeiten werden verfolgt, sodass Änderungen in den Signalen Aktualisierungen der relevanten Auswirkungen auslösen.

Da wir nun über die Definitionen der reaktiven Programmierung hinaus sind, erwähnen wir auch die Javascript-APIs, die wir verwenden werden:

Proxy: Mit dem Proxy-Objekt können Sie einen Proxy für ein anderes Objekt erstellen und so benutzerdefiniertes Verhalten für grundlegende Vorgänge (wie Zugriff und Zuweisung von Eigenschaften) definieren. In diesem Code wird es verwendet, um den reaktiven Speicher (das Zustandsobjekt) auf Änderungen reagieren zu lassen.

Reflect: Die Reflect-API stellt Methoden für abfangbare JavaScript-Operationen bereit. Es wird verwendet, um Vorgänge wie Reflect.get und Reflect.set in der reaktiven Funktion auszuführen, wodurch der Proxy den Zugriff und die Zuweisung von Eigenschaften handhaben und gleichzeitig das ursprüngliche Verhalten des Objekts beibehalten kann.

Map: Das Map-Objekt ist eine Sammlung, die Schlüssel-Wert-Paare enthält, wobei Schlüssel einen beliebigen Datentyp haben können. Es wird in dieser Implementierung verwendet, um die dependencyMap zu erstellen, die die mit jedem Signal verbundenen Abhängigkeiten verfolgt.

Jetzt beginnen wir zu definieren, wie unser Ausgangszustand aussehen wird:

// Let's define a Map object to track our dependencies
const dependencyTrackerMap = new Map();
// The activeEffect variable will hold the currently executing 
// effect function. 
// It will be set when an effect is run and will be used
// to track which effects depend on specific reactive properties. 
let activeEffect = null

// This function will make an object reactive
function reactive(target) {
    return new Proxy(target, {
        get(obj, prop) {
            trackDependency(prop); // Track dependency
            return Reflect.get(obj, prop);
        },
        set(obj, prop, value) {
            const result = Reflect.set(obj, prop, value);
            triggerDependency(prop); // Trigger reactions
            return result;
        }
    });
}

// the effect function will register reactive functions
function effect(fn) {
    activeEffect = fn;
    fn(); // Run the function once to register dependencies
    activeEffect = null;
}

// this function will track dependencies
function trackDependency(key) {
    if (activeEffect) {
        if (!dependencyTrackerMap.has(key)) {
            dependencyTrackerMap.set(key, new Set());
        }
        dependencyTrackerMap.get(key).add(activeEffect);
    }
}

// this function will trigger dependencies
function triggerDependency(key) {
    const deps = dependencyTrackerMap.get(key);
    if (deps) {
        deps.forEach(effect => effect());
    }
}

// This will create a reactive object with an initial state
// count and message here are signals
const state = reactive({ count: 0, message: "Hello" });

Also, hier ist, was wir getan haben:

1. Wir haben eine reaktive Funktion erstellt, die ein Objekt aufnimmt und einen Proxy zurückgibt, der verfolgt, welche Änderungen in Zukunft am Objekt vorgenommen werden
2. Wir haben eine Effektfunktion erstellt, die reaktive Funktionen registriert, die vom Zustand abhängen. Wenn ein Effekt definiert ist, wird er sofort ausgeführt, um alle Abhängigkeiten zu registrieren und activeEffect entsprechend festzulegen.
3. Wir haben einen Abhängigkeits-Tracker erstellt, der aus drei Teilen besteht: Die Funktion „trackDependency“ prüft, ob beim Zugriff auf eine reaktive Eigenschaft ein aktiver Effekt vorliegt. Wenn ja, wird dieser Effekt zu einer Reihe von Abhängigkeiten für die entsprechende Eigenschaft in dependencyTrackerMap hinzugefügt. Die Funktion „triggerDependency“ wiederum ruft den Satz abhängiger Effekte, die einer Eigenschaft zugeordnet sind, von dependencyTrackerMap ab und führt jeden von ihnen aus, wenn sich der Eigenschaftswert ändert.

Jetzt erstellen wir einen Effekt mit einem Rückruf und versuchen, ihn auszulösen:

// Let's define a Map object to track our dependencies
const dependencyTrackerMap = new Map();
// The activeEffect variable will hold the currently executing 
// effect function. 
// It will be set when an effect is run and will be used
// to track which effects depend on specific reactive properties. 
let activeEffect = null

// This function will make an object reactive
function reactive(target) {
    return new Proxy(target, {
        get(obj, prop) {
            trackDependency(prop); // Track dependency
            return Reflect.get(obj, prop);
        },
        set(obj, prop, value) {
            const result = Reflect.set(obj, prop, value);
            triggerDependency(prop); // Trigger reactions
            return result;
        }
    });
}

// the effect function will register reactive functions
function effect(fn) {
    activeEffect = fn;
    fn(); // Run the function once to register dependencies
    activeEffect = null;
}

// this function will track dependencies
function trackDependency(key) {
    if (activeEffect) {
        if (!dependencyTrackerMap.has(key)) {
            dependencyTrackerMap.set(key, new Set());
        }
        dependencyTrackerMap.get(key).add(activeEffect);
    }
}

// this function will trigger dependencies
function triggerDependency(key) {
    const deps = dependencyTrackerMap.get(key);
    if (deps) {
        deps.forEach(effect => effect());
    }
}

// This will create a reactive object with an initial state
// count and message here are signals
const state = reactive({ count: 0, message: "Hello" });

Die Konsolenprotokolle werden ausgelöst, wenn wir versuchen, den von uns erstellten Status zu aktualisieren:

//We are using state from the previous snippet:
effect(() => {
    console.log(Count has changed: ${state.count});
});

effect(() => {
    console.log("Message has changed");
    console.log(The new message is: ${state.message});
});

Hier ist eine kleine Visualisierung dessen, was passiert, wenn eine Abhängigkeit ausgelöst wird:

---

In diesem Artikel haben wir untersucht, wie man in JavaScript ein grundlegendes reaktives System erstellt, das automatische Aktualisierungen (oder Nebenwirkungen) als Reaktion auf Datenänderungen ermöglicht. Diese Implementierung dient als Einführung in reaktive Programmierkonzepte, die Teil des Frameworks „magic“ sind. Außerdem haben wir gelernt, was Proxy- und Reflect-APIs tun, und sie sowie das Map-Objekt verwendet.

Zusammenfassend lässt sich sagen, dass dieses reaktive System Abhängigkeiten verwaltet und Effekte automatisch aktualisiert, wenn sich der Status ändert. Durch die Registrierung von Funktionen, die auf bestimmten reaktiven Eigenschaften basieren, verfolgt das System, welche Funktionen von welchen Eigenschaften abhängen, und führt sie bei Bedarf erneut aus. Dieser Ansatz ermöglicht die Erstellung reaktionsfähiger Anwendungen, bei denen Zustandsänderungen ohne zusätzlichen Code automatisch in der Benutzeroberfläche widergespiegelt werden, was die Entwicklererfahrung verbessert und die Datenverarbeitung einfacher und effizienter macht.

Das obige ist der detaillierte Inhalt vonErstellen Sie mit Javascript einen reaktiven Shop von Grund auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!