Detaillierte Erklärung von rxjs

Dieses Mal werde ich Ihnen ausführlich erklären, welche Vorsichtsmaßnahmen bei der Verwendung von rxjs zu beachten sind.

rxjs (Reaktive Erweiterungen für JavaScript) ist eine responsive Erweiterung von Javascript. Die responsive Idee besteht darin, Daten, Status, Ereignisse usw., die sich im Laufe der Zeit ändern, in eine beobachtbare Sequenz umzuwandeln. Observable Sequence) und abonniert dann die Änderungen an den Objekten in der Sequenz. Sobald sie sich ändert, werden verschiedene vorab vereinbarte Transformationen und Operationen ausgeführt.

rxjs eignet sich für asynchrone Szenarien und kann zur Optimierung von Anfragen und Ereignissen in Front-End-Interaktionen verwendet werden.

rxjs-Funktionen

Vereinheitlichen Sie die Spezifikationen der asynchronen Programmierung. Unabhängig davon, ob es sich um Promise, Ajax oder Ereignisse handelt, werden sie alle in Sequenzen (Observable Sequence) gekapselt es durch Beobachtung der geänderten Informationen.

Die Front-End-Geschäftsschicht und die Präsentationsschicht sind entkoppelt. Beispielsweise muss sich die Präsentationsschicht nicht um die Verarbeitungslogik kümmern, die nichts mit dem DOM zu tun hat, wenn ein bestimmtes Ereignis ausgelöst wird. Gleichzeitig kann die Geschäftsschicht auch die Beziehung zwischen mehreren asynchronen Logiken in asynchronen Vorgängen zusammenstellen, ohne sie der Präsentationsschicht zugänglich zu machen. Die Präsentationsschicht befasst sich mit: Datenänderungen im asynchronen Betrieb.

Die rxjs-Entwicklungsgeschäftsschicht zeichnet sich durch hohe Elastizität, hohe Stabilität und hohe Echtzeitleistung aus.

rxjs-Instanzkonzept

Beobachtbar: Beobachtbare Datensequenz.

Beobachter: Beobachterinstanz, entscheidet, wann die angegebenen Daten beobachtet werden sollen.

Abonnement: Beobachten der Datensequenz gibt die Abonnementinstanz zurück.Operatoren: Observable-Operationsmethoden, einschließlich Konvertieren von Datensequenzen, Filtern usw. Die von allen Operatormethoden akzeptierten Parameter sind die Werte der letzten gesendeten Datenänderung und die Methode Der Rückgabewert wird aufgerufen, um neue Datenänderungen auszugeben.

Subjekt: Beobachtetes Objekt.

Scheduler: Kontrollieren die Parallelität der Planung, das heißt, wenn das Observable die Änderungsantwort des Subjekts akzeptiert, kann die Antwortmethode sein Wird derzeit über den Scheduler festgelegt. Die Antwort kann durch Aufrufen von Object.keys (Rx.Subject) angezeigt werden.

Observable hat vier

Lebenszyklen

: Erstellung, Abonnement, Ausführung und Zerstörung. Erstellen Sie eine Obervable und geben Sie die beobachtete Sequenzquelleninstanz zurück. Im Gegensatz dazu kann die über new Rx.Subject erstellte Beobachtungsobjektinstanz die Datenquelle senden.

Sie können die Antwortmethode (Rückrufmethode) abonnieren, wenn die Sequenz neue Datenänderungen über die Sequenzquelleninstanz ausgibt.

Die Antwortaktion ist eigentlich die Ausführung des Observable.

Die Sequenzquelleninstanz kann zerstört werden und wird automatisch zerstört, wenn in der Abonnementmethode ein Fehler auftritt.

Die Catch-Methode der Sequenzquelleninstanz kann Fehler erfassen, die in der Abonnementmethode auftreten, und die Sequenzquelleninstanz kann den Rückgabewert der Catch-Methode als neue Sequenzquelleninstanz akzeptieren.

rxjs-Operatoren

rxjs bietet viele Operatoren zum Erstellen beobachtbarer Objekte

import Rx from 'rxjs';

create

Ausgabe: Hallo

let observable = Rx.Observable
    .create((observer)=> {
        observer.next('hello');
        observer.next('world');
    });    
//订阅Observable    observable.subscribe((value)=> {    console.log(value);
});

Welt

von

Konvertierungswertvariable

Ausgabe: Hallo

let observable = Rx.Observable.of('hello', 'world');
observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

Welt

abgeschlossen


von

Array-Variable konvertieren

Ausgabe: 1

let array = [1, 2, 3];let observable = Rx.Observable.from(array);
observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

Ereignisvariable konvertieren

    2     3     complete
fromEvent

Promise-Variable konvertieren

Rx.Observable.fromEvent(document.querySelector('button'), 'click');
fromPromise

Ausgabe: Hallo Welt

let observable = Rx.Observable
.fromPromise(new Promise((resolve, reject) => {
    setTimeout(() => {
    resolve('hello world');
    },3000)
}));
observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

vollständig

leer

Der leere Operator gibt ein leeres Observable zurück zum Objekt und es werden sofort vollständige Informationen zurückgegeben.

Niemals

Der Never-Operator gibt ein unendliches Observable zurück. Wenn Sie dieses Objekt abonnieren, passiert nichts. Es ist ein Observable-Objekt, das immer existiert, aber nichts tut. Der

Intervall

Intervalloperator unterstützt einen Parameter vom

numerischen Typ

, der zur Darstellung des Zeitintervalls verwendet wird.

Ausgabe: 0

let observable = Rx.Observable.interval(1000);
observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

Der obige Code bedeutet, dass alle 1 Sekunden ein steigender Wert ausgegeben wird und der Anfangswert bei 0 beginnt.

    1
     2
     ...

Timer

Der Timer-Operator unterstützt zwei Parameter. Der erste Parameter wird verwendet, um die Wartezeit zum Senden des ersten Werts festzulegen. Der zweite Parameter gibt die Zeit zwischen dem Senden an andere Werte.

let observable = Rx.Observable.timer(1000, 5000);

Ausgabe: 0 //Nach 1s

observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

1 //Nach 5s

2 //5s später
...


Pull vs Push

Pull und Push sind zwei verschiedene Kommunikationsmethoden zwischen Datenproduzenten und Datenkonsumenten

Pull

Im Pull-System entscheidet der Datenkonsument, wann er Daten vom Datenproduzenten erhält, und der Produzent selbst weiß nicht, wann die Daten an den Konsumenten gesendet werden.

Jede JavaScript-Funktion ist ein Pull-System. Die Funktion ist der Produzent von Daten. Der Code, der die Funktion aufruft, verbraucht die Daten, indem er einen einzelnen Rückgabewert abruft.

Iterator und Generator in ES6
Generator
ist ein weiteres Pull-System. Der Code, der iterator.next() aufruft, ist ein Verbraucher und kann mehrere Werte daraus ziehen. Drücken

Im Push-System entscheidet der Datenproduzent, wann er Daten an den Verbraucher sendet, und der Verbraucher erkennt nicht, dass er die Daten erhalten wird, bevor er die Daten erhält.
Promise ist das gebräuchlichste Push-System. Ein Promise (Datenproduzent) sendet einen gelösten (Erfolgsstatus) oder einen abgelehnten (Fehlerstatus) Rückruf (Datenkonsument), unterscheidet sich jedoch darin von einer Funktion: Promise bestimmt, wann Daten an diese Rückruffunktion übertragen werden.

RxJS führt Observables (beobachtbare Objekte) ein, ein neues Push-System. Ein beobachtbares Objekt ist ein Produzent, der mehrere Werte generiert. Wenn neue Daten generiert werden, werden diese aktiv an den Beobachter übertragen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

SVG-Animation in der Front-End-Entwicklung

TypeScript, das Sie kennen müssen

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung von rxjs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!