Eine Einführung in die aufgeschobenen Objekte von JQuery;

JavaScript -Entwickler haben seit langem Rückruffunktionen verwendet, um mehrere Aufgaben auszuführen. Ein sehr häufiges Beispiel ist das Hinzufügen eines Rückrufs über die Funktion addEventListener(), um verschiedene Aktionen auszuführen, wenn Ereignisse wie Klicks oder Tasten ausgelöst werden. Die Rückruffunktion ist einfach und einfach zu bedienen und für einfache Szenarien geeignet. Wenn jedoch die Komplexität der Webseiten zunimmt und viele asynchrone Operationen parallel oder nacheinander ausgeführt werden müssen, wird die Rückruffunktion schwer zu verwalten.

ecmascript 2015 (auch als ECMascript 6 bekannt) führt eine native Methode zum Umgang mit solchen Situationen ein: Versprechen. Wenn Sie nichts über Versprechen wissen, können Sie den Artikel "Überblick über JavaScript Promise" lesen. JQuery bietet und bietet weiterhin eine eigene Version von Promise, die als aufgeschobenes Objekt bezeichnet wird. Einige Jahre bevor Promise in ECMascript eingeführt wurde, wurde das aufgeschobene Objekt bereits in JQuery eingeführt. In diesem Artikel wird erläutert, welche aufgeschobenen Objekte sind und welche Probleme sie lösen möchten.

Schlüsselpunkte

• aufgeschobene Objekte vereinfachen die asynchrone Programmierung: JQuery's aufgeschobenes Objekt bietet eine leistungsstarke Möglichkeit, asynchrone Operationen zu verwalten und zu koordinieren, wodurch die Komplexität verringert wird, die mit herkömmlichen Rückruffunktionen verbunden ist.
• Interoperabilität mit ECMascript -Versprechen: Obwohl die Implementierung unterschiedlich ist, verbessert die 3.x -Version von JQuery Deferred -Objekt die Kompatibilität mit dem nativen ECMAScript 2015 -Versprechen und verbessert die moderne Webpraktikabilität in der Entwicklung.
• Flexible Methode: aufgeschobenes Objekt liefert eine Vielzahl von Methoden wie resolve(), reject(), done(), fail(), then(),
und
• . Entwickler ermöglichen eine feinkörnige Kontrolle über die Verarbeitung asynchroner Prozesse.
Vermeiden Sie Callback Hell:
• Durch die Verwendung aufgeschobener und verspracher Objekte können Entwickler die gemeinsamen Fallstricke tief verschachtelter Rückrufe vermeiden und so lesbarere und wartbare Code schreiben. catch() Verbesserte Fehlerbehandlung:
jQuery 3 führt die

-Methode des aufgeschobenen Objekts ein, das mit dem ECMAScript -Standard übereinstimmt und eine vereinfachte Methode zum Umgang mit Fehlern in der Versprechenkette bietet.

Kurzer Verlauf

Das aufgeschobene Objekt

wurde in JQuery 1.5 eingeführt, ein kettenübergreifbares Dienstprogramm zum Registrieren mehrerer Rückrufe in eine Rückrufwarteschlange, das Aufrufen der Rückrufwarteschlange und die Übergabe des Erfolgs oder Fehlerstatus von synchronen oder asynchronen Funktionen. Seitdem ist es ein Thema der Diskussion, einige Kritik und viele Veränderungen. Einige Beispiele für Kritik sind "Sie haben den Punkt des Versprechens verpasst" und "JavaScript Promise und warum JQuery die Implementierung von Falsch ist".

Auf Deferred repräsentiert zusammen mit dem Versprechen -Objekt die Umsetzung von JQuery durch Versprechen. In JQuery -Versionen 1.x und 2.x folgt das aufgeschobene Objekt den CommonJS -Versprechen/einem Vorschlag. Dieser Vorschlag wird als Grundlage für die Versprechen/einen Vorschlag verwendet, und ein natives Versprechen wurde auf diesem Vorschlag beruht. Wie in der Einführung angegeben, folgt der Grund, warum JQuery nicht den Versprechen/einem Vorschlag folgt, dass es ein Versprechen umgesetzt hat, lange bevor der Vorschlag vorgeschlagen wurde.

Da JQuery ein Pionier ist und es einen Unterschied darin gibt, wie man Versprechen in reinem JavaScript und JQuery 1.x und 2.x aufgrund von Abwärtskompatibilitätsproblemen verwendet. Da JQuery verschiedenen Vorschlägen folgt, ist die Bibliothek mit anderen Bibliotheken nicht kompatibel, die Versprechen implementieren, z. B. die Q -Bibliothek.

Interoperabilität mit nativem Versprechen, wie sie in der ECMascript 2015 implementiert sind, wurde im kommenden JQuery 3 verbessert. Die Signaturen der Hauptmethode (then()) unterscheiden sich aus Gründen der Rückwärtskompatibilität immer noch geringfügig, das Verhalten ist jedoch standardmäßiger.

Rückruffunktion in jQuery

, um zu verstehen, warum Sie möglicherweise ein aufgeschobenes Objekt verwenden müssen, lassen Sie uns ein Beispiel diskutieren. Bei der Verwendung von JQuery verwendet es häufig seine AJAX -Methode, um asynchrone Anforderungen durchzuführen. Angenommen, Sie entwickeln eine Webseite, die AJAX -Anforderungen an die Github -API sendet. Ihr Ziel ist es, die Repository -Liste des Benutzers abzurufen, das kürzlich aktualisierte Repository zu finden, die erste Datei mit dem Namen "Readme.md" zu finden und schließlich den Inhalt der Datei abzurufen. Nach dieser Beschreibung kann jede AJAX -Anforderung erst nach Abschluss des vorherigen Schritts beginnen. Mit anderen Worten, die Anfragen müssen in der Reihenfolge ausgeführt werden. diese Beschreibung in Pseudo-Code konvertieren (beachten Sie, dass ich die echte Github-API nicht verwende). Wir erhalten:

Wie Sie in diesem Beispiel sehen können, müssen wir mithilfe der Rückruffunktion die Anrufe nisten, um die AJAX -Anfragen in der gewünschten Reihenfolge auszuführen. Dies macht den Code weniger lesbar. Es gibt viele verschachtelte Rückrufe oder unabhängige Rückrufe, die synchronisiert und oft als "Rückrufhölle" bezeichnet werden müssen.

<code class="language-javascript">var username = 'testuser';
var fileToSearch = 'README.md';

$.getJSON('https://api.github.com/user/' + username + '/repositories', function(repositories) {
  var lastUpdatedRepository = repositories[0].name;

  $.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/files', function(files) {
    var README = null;

    for (var i = 0; i < files.length; i++) {
      if (files[i].name.indexOf(fileToSearch) >= 0) {
        README = files[i].path;

        break;
      }
    }

    $.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/file/' + README + '/content', function(content) {
      console.log('The content of the file is: ' + content);
    });
  });
});</code>

Für ein wenig Verbesserung können Sie die benannte Funktion aus der anonymen Inline -Funktion, die ich erstellt hat, extrahieren. Diese Änderung half jedoch nicht viel und wir befinden uns immer noch in der Callback -Hölle. Zu diesem Zeitpunkt werden aufgeschobene und Versprechen Objekte benötigt.

aufgeschobene und versprechen Objekte

aufgeschobene Objekte können verwendet werden, wenn asynchrone Operationen wie AJAX -Anfragen und -animationen durchgeführt werden. In JQuery wird das Versprechenobjekt aus einem aufgeschobenen Objekt oder einem JQuery -Objekt erstellt. Es hat eine Teilmenge der aufgeschobenen Objektmethoden:

,

, always(), done(), fail() und state(). Ich werde diese und andere Methoden im nächsten Abschnitt behandeln. then()

Wenn Sie aus der einheimischen JavaScript -Welt stammen, können Sie durch die Existenz dieser beiden Objekte verwirrt sein. Warum gibt es zwei Objekte (aufgeschoben und versprechen), wenn JavaScript nur einen (Versprechen) hat? Um die Unterschiede und ihre Anwendungsfälle zu erklären, werde ich die gleiche Metapher nehmen, die ich in meinem Buch JQuery in Aktion, der dritten Ausgabe, verwendet habe.

Wenn Sie eine Funktion schreiben, die asynchrone Operationen übernimmt und Werte zurücksenden sollte (kann auch ein Fehler oder kein Wert sein), verwenden Sie normalerweise ein aufgeschobenes Objekt. In diesem Fall ist Ihre Funktion der Hersteller des Wertes und Sie möchten den Benutzer daran hindern, den Aufschiebungszustand zu ändern. Verwenden Sie das Versprechenobjekt, wenn Sie ein Verbraucher einer Funktion sind.

Um dieses Konzept zu klären, möchten Sie eine vielversprechende timeout() -Funktion implementieren (ich werde Ihnen den Code für dieses Beispiel in einem nachfolgenden Abschnitt dieses Artikels zeigen). Sie sind dafür verantwortlich, eine Funktion zu schreiben, die auf eine bestimmte Zeit warten muss (in diesem Fall wird der Wert nicht zurückgegeben). Das macht dich zum Produzenten. Der Verbraucher Ihrer Funktion kümmert sich nicht darum, sie zu analysieren oder abzulehnen. Der Benutzer muss nur in der Lage sein, Funktionen hinzuzufügen, die ausgeführt werden müssen, wenn die Aufschiebung abgeschlossen, fehlgeschlagen oder fortgeschritten ist. Darüber hinaus möchten Sie sicherstellen, dass der Benutzer nicht von selbst aufgeschoben werden oder nicht abgelehnt worden sein kann. Um dies zu erreichen, müssen Sie das in der timeout() -Funktion erstellte aufgeschobene Verheißungsobjekt anstelle des Aufschubs selbst zurückgeben. Auf diese Weise können Sie sicherstellen, dass niemand die Methoden timeout() oder resolve() mit Ausnahme der reject() -Funktion aufrufen kann.

Sie können mehr über den Unterschied zwischen den aufgeschobenen und versprachen Objekten von JQuery in dieser Stackoverflow -Frage lesen.

Jetzt, da Sie wissen, was diese Objekte sind, schauen wir uns die verfügbaren Methoden an.

aufgeschobene Methode

aufgeschobene Objekte sind sehr flexibel und bieten eine Möglichkeit, alle Ihre Bedürfnisse zu erfüllen. Es kann erstellt werden, indem die Methode jQuery.Deferred() wie folgt aufgerufen wird:

<code class="language-javascript">var username = 'testuser';
var fileToSearch = 'README.md';

$.getJSON('https://api.github.com/user/' + username + '/repositories', function(repositories) {
  var lastUpdatedRepository = repositories[0].name;

  $.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/files', function(files) {
    var README = null;

    for (var i = 0; i < files.length; i++) {
      if (files[i].name.indexOf(fileToSearch) >= 0) {
        README = files[i].path;

        break;
      }
    }

    $.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/file/' + README + '/content', function(content) {
      console.log('The content of the file is: ' + content);
    });
  });
});</code>

oder verwenden Sie $ Shortcut:

<code class="language-javascript">var deferred = jQuery.Deferred();</code>

Nach dem Erstellen enthält das aufgeschobene Objekt mehrere Methoden. Ignorieren Sie diese veralteten oder gelöschten Methoden, sie sind:

• always(callbacks[, callbacks, ..., callbacks]): Fügen Sie den Handler hinzu, der aufgerufen werden soll, wenn das aufgeschobene Objekt analysiert oder abgelehnt wird.
• done(callbacks[, callbacks, ..., callbacks]): Fügen Sie den Handler hinzu, der aufgerufen werden soll, wenn das aufgeschobene Objekt analysiert wird.
• fail(callbacks[, callbacks, ..., callbacks]): Fügen Sie den Handler hinzu, der aufgerufen werden soll, wenn das aufgeschobene Objekt abgelehnt wird.
• notify([argument, ..., argument]): Rufen Sie das progressCallbacks des aufgeschobenen Objekts mit dem angegebenen Parameter auf.
• notifyWith(context[, argument, ..., argument]): Rufen Sie das progressCallbacks des aufgeschobenen Objekts mit dem angegebenen Kontext und den angegebenen Parametern auf.
• progress(callbacks[, callbacks, ..., callbacks]): Fügen Sie den Handler hinzu, der aufgerufen werden soll, wenn das aufgeschobene Objekt die Fortschrittsmeldung erzeugt.
• promise([target]): Gibt das aufgeschobene Versprechensobjekt zurück.
• reject([argument, ..., argument]): verteidigt das aufgeschobene Objekt und ruft alle failCallbacks mit dem angegebenen Parameter auf.
• rejectWith(context[, argument, ..., argument]): verteidigt das aufgeschobene Objekt und ruft alle failCallbacks mit dem angegebenen Kontext und den Parametern auf.
• resolve([argument, ..., argument]): analysieren Sie das aufgeschobene Objekt und rufen Sie alle doneCallbacks mit dem angegebenen Parameter auf.
• resolveWith(context[, argument, ..., argument]): analysiert das aufgeschobene Objekt und ruft alle doneCallbacks mit dem angegebenen Kontext und Parametern auf.
• state(): Bestimmen Sie den aktuellen Status des aufgeschobenen Objekts.
• then(resolvedCallback[, rejectedCallback[, progressCallback]]): Fügen Sie den Handler hinzu, der aufgerufen werden soll, wenn das aufgeschobene Objekt analysiert, abgelehnt oder noch in Arbeit ist.

Die Beschreibungen dieser Methoden geben mir die Möglichkeit, den Unterschied zwischen JQuery -Dokumentation und den Begriffen der ECMascript -Spezifikation zu betonen. In der Spezifikation der ECMAScript, wenn das Versprechen abgeschlossen oder abgelehnt wurde, wird gesagt, dass das Versprechen gelöst wurde. In der Dokumentation von JQuery wird das Wort "gelöst" jedoch verwendet, um auf einen Zustand zu verweisen, der in der ECMascript -Spezifikation "erfüllt" wird.

Aufgrund der zahlreichen bereitgestellten Methoden können in diesem Artikel nicht alle Methoden behandelt werden. Im nächsten Abschnitt werde ich Ihnen jedoch einige Beispiele für aufgeschobene und Versprechen verwenden. Im ersten Beispiel werden wir die Code -Snippets überschreiben, die im Abschnitt "Rückruffunktionen in jQuery" überprüft wurden, diese Objekte jedoch anstelle der Rückruffunktionen verwenden. Im zweiten Beispiel werde ich die diskutierte Analogie des Produzenten-Verbrauchers klarstellen.

AJAX -Anforderungen mit der abfertigten Reihenfolge

ausführen

In diesem Abschnitt werde ich zeigen, wie das aufgeschobene Objekt und einige seiner Methoden verwendet werden, um die Lesbarkeit des Codes zu verbessern, der im Abschnitt "Rückruffunktionen in jQuery" entwickelt wurde. Bevor wir tiefer graben, müssen wir verstehen, welche Methoden wir brauchen.

Basierend auf unseren Bedürfnissen und der Liste der bereitgestellten Methoden ist es offensichtlich, dass wir die Methoden done() oder then() verwenden können, um erfolgreiche Situationen zu verwalten. Da sich viele von Ihnen an JavaScripts Versprechensobjekt gewöhnt haben, werde ich in diesem Beispiel die then() -Methode verwenden. Ein wichtiger Unterschied zwischen diesen beiden Methoden besteht darin, dass then() den empfangenen Parameterwert an andere then(), done(), fail() oder progress() danach definierte Aufrufe weiterleiten kann.

Das Endergebnis ist wie folgt:

<code class="language-javascript">var username = 'testuser';
var fileToSearch = 'README.md';

$.getJSON('https://api.github.com/user/' + username + '/repositories', function(repositories) {
  var lastUpdatedRepository = repositories[0].name;

  $.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/files', function(files) {
    var README = null;

    for (var i = 0; i < files.length; i++) {
      if (files[i].name.indexOf(fileToSearch) >= 0) {
        README = files[i].path;

        break;
      }
    }

    $.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/file/' + README + '/content', function(content) {
      console.log('The content of the file is: ' + content);
    });
  });
});</code>

Wie Sie sehen, ist der Code leichter zu lesen, da wir den gesamten Prozess auf derselben Ebene in mehrere kleine Schritte unterbrechen können (über die Eindrücke).

Erstellen Sie eine vielversprechende SetTimeout-Funktion

Wie Sie wissen, ist setTimeout() eine Funktion, die nach einer bestimmten Zeit eine Rückruffunktion ausführt. Beide Elemente (Rückruffunktion und Zeit) sollten als Parameter bereitgestellt werden. Angenommen, Sie möchten die Nachricht in einer Sekunde bei der Konsole protokollieren. Durch die Verwendung der Funktion setTimeout() können Sie dies mit dem unten gezeigten Code erreichen:

<code class="language-javascript">var deferred = jQuery.Deferred();</code>

Wie Sie sehen, ist der erste Parameter die auszuführende Funktion, und der zweite Parameter ist die Anzahl der Millisekunden zum Warten. Diese Funktion funktioniert seit Jahren gut, aber was ist, wenn Sie Latenz in die aufgeschobene Kette einführen müssen?

In dem folgenden Code werde ich Ihnen zeigen, wie Sie das von JQuery bereitgestellte Versprechensobjekt verwenden, um eine Versprechens-basierte setTimeout() -Funktion zu entwickeln. Dazu werde ich die promise() -Methode des aufgeschobenen Objekts verwenden.

Das Endergebnis ist wie folgt:

<code class="language-javascript">var deferred = $.Deferred();</code>

In dieser Liste definiere ich eine Funktion namens timeout(), die die native setTimeout() -Funktion von JavaScript umhüllt. In timeout() erstelle ich ein neues aufgeschobenes Objekt, um eine asynchrone Aufgabe zu verwalten, bei der das aufgeschobene Objekt nach der angegebenen Anzahl von Millisekunden analysiert wird. In diesem Fall ist die timeout() -Funktion der Hersteller des Wertes, so dass sie das aufgeschobene Objekt erstellt und das Versprechensobjekt zurückgibt. Auf diese Weise stelle ich sicher, dass der Anrufer (Verbraucher) der Funktion das aufgeschobene Objekt nach Belieben nicht analysieren oder ablehnt. Tatsächlich kann der Anrufer nur Methoden wie done() und fail() verwenden, um die zu ausgeführten Funktionen hinzuzufügen.

Unterschied zwischen jQuery 1.x/2.x und jQuery 3

Im ersten Beispiel mit Deferred haben wir einen Code -Ausschnitt entwickelt, der nach einer Datei mit dem Namen "Readme.md" sucht, aber wir haben den Fall nicht in Betracht gezogen, in dem eine solche Datei nicht gefunden werden konnte. Diese Situation kann als Misserfolg angesehen werden. In diesem Fall möchten wir die Callkette brechen und direkt bis zum Ende springen. Zu diesem Zweck wird eine Ausnahme natürlich geworfen und sie mit der fail() -Methode fangen, genau wie die catch() -Methode von JavaScript.

In Bibliotheken, die Versprechen/A entsprechen, und Versprechen/A (z. B. JQuery 3.x), werden geworfene Ausnahmen in Ablehnungen konvertiert und fehlgeschlagene Rückrufe werden aufgerufen (z. B. mit fail() hinzugefügt). Dies empfängt die Ausnahme als Parameter.

In JQuery 1.x und 2.x stoppen ungewöhnliche Ausnahmen die Ausführung des Programms. Diese Versionen ermöglichen es, Ausnahmen von sprudeln zu werden, und erreichen normalerweise window.onerror. Wenn keine Funktion definiert ist, um diese Ausnahme zu verarbeiten, wird eine Ausnahmemeldung angezeigt und die Ausführung des Programms abgebrochen.

Um verschiedene Verhaltensweisen besser zu verstehen, lesen Sie dieses Beispiel:

<code class="language-javascript">var username = 'testuser';
var fileToSearch = 'README.md';

$.getJSON('https://api.github.com/user/' + username + '/repositories', function(repositories) {
  var lastUpdatedRepository = repositories[0].name;

  $.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/files', function(files) {
    var README = null;

    for (var i = 0; i < files.length; i++) {
      if (files[i].name.indexOf(fileToSearch) >= 0) {
        README = files[i].path;

        break;
      }
    }

    $.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/file/' + README + '/content', function(content) {
      console.log('The content of the file is: ' + content);
    });
  });
});</code>

In JQuery 3.x schreibt dieser Code die Nachrichten "Erstversagensfunktion" und "zweite Erfolgsfunktion" in die Konsole. Der Grund dafür ist, dass, wie ich bereits erwähnt habe, die Spezifikation besagt, dass die geworfene Ausnahme in eine Ablehnung umgewandelt werden sollte und dass der fehlgeschlagene Rückruf unter Verwendung der Ausnahme aufgerufen werden muss. Sobald die Ausnahme bearbeitet wurde (behandelt durch einen fehlgeschlagenen Rückruf an die zweite then() in unserem Beispiel) sollte die folgende erfolgreiche Funktion ausgeführt werden (in diesem Fall wurde der erfolgreiche Rückruf an den dritten then() in diesem Fall übergeben). ).

In jQuery 1.x und 2.x wird keine andere Funktion ausgeführt, außer der ersten Funktion (die Funktion, die den Fehler auswirkt), sehen Sie nur die Meldung "Unbekanntes Fehler: eine Fehlermeldung".

Um seine Kompatibilität mit ECMascript 2015 weiter zu verbessern, fügte JQuery 3 auch eine neue Methode in aufgeschobenen und vielversprechenden Objekten hinzu catch(). Dies ist eine Möglichkeit, einen Handler auszuführen, wenn ein aufgeschobenes Objekt abgelehnt wird oder sein Versprechenobjekt in einem abgelehnten Zustand befindet. Seine Signatur ist wie folgt:

<code class="language-javascript">var deferred = jQuery.Deferred();</code>

Diese Methode ist nur eine Abkürzung zu then(null, rejectedCallback).

Schlussfolgerung

In diesem Artikel habe ich Sie mit der Implementierung von Jquerys Versprechen vorgestellt. Mit Versprechen können Sie die Notwendigkeit vermeiden, böse Tricks zu verwenden, um parallele asynchrone Funktionen und verschachtelte Rückrufe zu synchronisieren ...

Ich habe nicht nur einige Beispiele angezeigt, sondern auch darüber, wie JQuery 3 die Interoperabilität mit nativem Versprechen verbessert. Obwohl die Unterschiede zwischen älteren JQuery und ECMascript 2015 hervorgehoben werden, ist Deferred immer noch ein sehr leistungsfähiges Tool in Ihrer Toolbox. Als professioneller Entwickler werden Sie es häufig verwenden, da das Projekt schwieriger wird.

FAQ für JQuery Deferred -Objekte (FAQ)

(Der FAQ -Teil wird hier weggelassen, da der Artikel zu lang ist und wenig mit dem Hauptthema des Artikels zu tun hat. Bei Bedarf können Sie die FAQ -Frage separat stellen.)

Das obige ist der detaillierte Inhalt vonEine Einführung in die aufgeschobenen Objekte von JQuery;. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!