Was sind die neuen Funktionen der kommenden jQuery 3

Es ist zehn Jahre her, dass jQuery geboren wurde, und seine Langlebigkeit ist offensichtlich nicht ohne Grund. jQuery ist nach dem Prototyp eine weitere hervorragende Javascript-Bibliothek. Es handelt sich um eine leichtgewichtige js-Bibliothek, die mit CSS3 und verschiedenen Browsern kompatibel ist (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ und nachfolgende Versionen unterstützen den Browser IE6/7/8 nicht mehr). Mit jQuery können Benutzer HTML (eine Anwendung unter Standard Universal Markup Language) und Ereignisse einfacher verarbeiten, Animationseffekte implementieren und problemlos AJAX-Interaktion für Websites bereitstellen. Ein weiterer großer Vorteil von jQuery ist, dass die Dokumentation sehr vollständig ist und die verschiedenen Anwendungen ausführlich erklärt werden. Außerdem stehen viele ausgereifte Plug-Ins zur Auswahl.

In den nächsten Wochen wird jQuery einen wichtigen Meilenstein erreichen – die offizielle Veröffentlichung der Version 3.0. jQuery 3 hat eine große Anzahl von Fehlern behoben, neue Methoden hinzugefügt, einige Schnittstellen entfernt und das Verhalten einiger weniger Schnittstellen geändert. In diesem Artikel werde ich die wichtigsten Änderungen hervorheben, die durch jQuery 3 eingeführt wurden.

Neue Funktionen

Besprechen wir zunächst die wichtigsten neuen Funktionen in jQuery 3.

for...of-Schleife

In jQuery 3 können wir die for...of-Schleifenanweisung verwenden, um alle DOM-Elemente in einer jQuery-Sammlung zu iterieren. Dieser neue iterative Ansatz ist Teil der Spezifikation ECMAScript 2015 (auch bekannt als ES6). Diese Methode kann eine Schleife über „iterierbare Objekte“ (wie Array, Map, Set usw.) durchführen.

Bei Verwendung dieser neuen Iterationsmethode ist der Wert, den Sie jedes Mal im Schleifenkörper erhalten, kein jQuery-Objekt, sondern ein DOM-Element (Übersetzung: Dies ähnelt der Methode .each()). Diese neue Iterationsmethode kann Ihren Code leicht verbessern, wenn Sie mit einer jQuery-Sammlung arbeiten.

Um zu verstehen, wie diese Iterationsmethode funktioniert, nehmen wir ein Szenario an: Sie müssen jedem Eingabeelement auf der Seite eine ID zuweisen. Vor jQuery 3 könnten Sie schreiben:

Code kopieren Der Code lautet wie folgt:

var $inputs = $('input');for (var i = 0; i < $inputs.length; i++) {

$inputs[i].id = 'input-' + i;

}

In jQuery 3 können Sie so schreiben:

Code kopieren Der Code lautet wie folgt:

var $inputs = $('input');var i = 0 ; 

for(var input of $inputs) {

input.id = 'input-' + i++;

}

(Anmerkung: Tatsächlich verfügt jQuery selbst über eine .each()-Methode, die hinsichtlich der Lesbarkeit nicht schlecht ist.)

Neue Signaturen für die Funktionen $.get() und $.post()

jQuery 3 fügt den beiden Dienstprogrammfunktionen $.get() und $.post() neue Signaturen hinzu, sodass sie mit dem Schnittstellenstil von $.ajax() konsistent sind. Die neue Signatur sieht so aus:

Code kopieren Der Code lautet wie folgt:

$.get([settings])

$.post([Einstellungen])

settings ist ein Objekt, das mehrere Eigenschaften enthält. Sein Format ist dasselbe wie das Parameterformat, das Sie zuvor an $.ajax() übergeben haben. Wenn Sie dieses Parameterobjekt besser verstehen möchten, lesen Sie bitte die entsprechende Beschreibung auf der Seite $.ajax().

Der einzige Unterschied zwischen den Parameterobjekten von $.get() und $.post() und den an $.ajax() übergebenen Parametern besteht darin, dass das Methodenattribut des ersteren immer ignoriert wird. Der Grund ist eigentlich ganz einfach. $.get() und $.post() selbst haben die HTTP-Methode zum Initiieren von Ajax-Anfragen bereits voreingestellt (offensichtlich ist $.get() GET und $.post() ist POST). Mit anderen Worten: Normale Menschen würden die Methode $.get() nicht zum Senden einer POST-Anfrage verwenden wollen.

Angenommen, es gibt den folgenden Code:

Code kopieren Der Code lautet wie folgt:

$.get({

URL: 'https://www.audero.it',

Methode: 'POST' // Diese Eigenschaft wird ignoriert

                                                                                                                                                                                                                      // Dieses Attribut wird ignoriert});

Egal wie wir das Methodenattribut schreiben, diese Anfrage wird immer als GET gesendet.

Verwenden Sie requestAnimationFrame(), um Animationen zu implementieren

Alle modernen Browser (einschließlich IE10 und höher) unterstützen requestAnimationFrame. jQuery 3 wird diese API intern verwenden, um Animationen zu implementieren und so flüssigere und ressourceneffizientere Animationseffekte zu erzielen.

unwrap()-Methode

jQuery 3 fügt der unwrap()-Methode einen optionalen Selektorparameter hinzu. Die neue Signatur dieser Methode lautet:

Code kopieren Der Code lautet wie folgt:

unwrap([selector])

Mit dieser Funktion können Sie dieser Methode eine Zeichenfolge mit einem Selektorausdruck übergeben und diese zum Abgleichen innerhalb des übergeordneten Elements verwenden. Wenn ein passendes untergeordnetes Element vorhanden ist, wird die übergeordnete Ebene dieses untergeordneten Elements angehoben. Wenn keine Übereinstimmung vorliegt, wird keine Operation ausgeführt.

Geänderte Funktionen

jQuery 3 ändert auch das Verhalten einiger Funktionen.

:sichtbar und :versteckt

jQuery 3 ändert die Bedeutung der Filter :visible und :hidden. Solange das Element über ein Layoutfeld verfügt, wird es als :sichtbar betrachtet, auch wenn Breite und Höhe Null sind. Beispielsweise werden br-Elemente und Inline-Elemente ohne Inhalt jetzt vom :visible-Filter ausgewählt.

Wenn Ihre Seite also die folgende Struktur enthält:

Code kopieren Der Code lautet wie folgt:

Führen Sie dann die folgende Anweisung aus:

Code kopieren Der Code lautet wie folgt:

console.log($('body :visible') .Länge) ;

In jQuery 1.x und 2.x würden Sie 0 erhalten, aber in jQuery 3 würden Sie 2 erhalten.

data()-Methode

Eine weitere wichtige Änderung betrifft die data()-Methode. Sein Verhalten stimmt jetzt mit der Dataset-API-Spezifikation überein. jQuery 3 konvertiert alle Eigenschaftsschlüsselnamen in camelCase. Schauen wir uns das genauer an, am Beispiel des folgenden Elements:

Code kopieren Der Code lautet wie folgt:

< /div>

Wenn wir Versionen vor jQuery 3 verwenden, wenn wir den folgenden Code ausführen:

Code kopieren Der Code lautet wie folgt:

var $elem = $('#container'); 

$elem.data({ 'my-property': 'hello'});console.log($elem.data());

Sie erhalten in der Konsole folgende Ergebnisse:

Code kopieren Der Code lautet wie folgt:

{my-property: "hello"}

In jQuery 3 erhalten wir die folgenden Ergebnisse:

Code kopieren Der Code lautet wie folgt:

{myProperty: "hello"}

Bitte beachten Sie, dass in jQuery 3 Attributnamen zu camelCase geändert wurden und die Bindestriche entfernt wurden, während in früheren Versionen Attributnamen ausschließlich in Kleinbuchstaben geschrieben wurden und die Bindestriche unverändert blieben.

Zurückgestelltes Objekt

jQuery 3 ändert auch das Verhalten verzögerter Objekte. Man kann sagen, dass das Deferred-Objekt einer der Vorgänger des Promise-Objekts ist und die Kompatibilität mit dem Promise/A+-Protokoll implementiert. Dieses Objekt und seine Geschichte sind sehr interessant. Wenn Sie mehr erfahren möchten, können Sie die offizielle jQuery-Dokumentation lesen oder mein Buch „jQuery in Practice (Third Edition)“ lesen – dieses Buch behandelt auch jQuery 3.

Wenn in jQuery 1.x und 2.x eine nicht abgefangene Ausnahme in der an Deferred übergebenen Rückruffunktion auftritt, wird die Ausführung des Programms sofort unterbrochen (Anmerkung: Fail still, tatsächlich das Verhalten der meisten Rückruffunktionen in jQuery sind alle so). Dies ist bei nativen Promise-Objekten nicht der Fall. Es löst eine Ausnahme aus und sprudelt weiter nach oben, bis es window.onerror erreicht (normalerweise ist hier der Endpunkt des Sprudelns). Wenn Sie keine Funktion zur Behandlung dieses Fehlerereignisses definieren (normalerweise tun wir dies nicht), werden die Ausnahmeinformationen angezeigt und die Ausführung des Programms stoppt.

jQuery 3 folgt dem Muster nativer Promise-Objekte. Daher führen innerhalb des Rückrufs generierte Ausnahmen zu einem Fehlerstatus (Ablehnung) und lösen den Fehlerrückruf aus. Sobald der Fehlerrückruf ausgeführt wird, schreitet der gesamte Prozess weiter voran und nachfolgende Erfolgsrückrufe werden ausgeführt.

Um Ihnen diesen Unterschied besser zu verstehen, schauen wir uns ein kleines Beispiel an. Wir haben zum Beispiel den folgenden Code:

Code kopieren Der Code lautet wie folgt:

var deferred = $.Deferred();

aufgeschoben

.then(function() { throw new Error('An error');

})

.then( function() { console.log('Success 1');

}, function() { console.log('Failure 1');

}

)

.then( function() { console.log('Success 2');

}, function() { console.log('Failure 2');

}

);

deferred.resolve();

In jQuery 1.x und 2.x wird nur die erste Funktion (diejenige, die den Fehler auslöst) ausgeführt. Da wir außerdem keinen Event-Handler für window.onerror definiert haben, gibt die Konsole „Uncaught Error: An error“ aus und die Ausführung des Programms wird abgebrochen.

In jQuery 3 ist das gesamte Verhalten völlig anders. In der Konsole werden die Meldungen „Fehler 1“ und „Erfolg 2“ angezeigt. Diese Ausnahme wird vom ersten Fehlerrückruf behandelt, und sobald die Ausnahme behandelt ist, werden nachfolgende Erfolgsrückrufe aufgerufen.

SVG-Dokument

Keine Version von jQuery (einschließlich jQuery 3) hat jemals offiziell behauptet, SVG-Dokumente zu unterstützen. Tatsächlich gibt es viele Methoden, die funktionieren, und es gibt auch einige Methoden, die vorher nicht funktionierten (z. B. die zum Bearbeiten von Klassennamen), aber sie wurden auch in jQuery 3 aktualisiert. Daher sollten Sie in jQuery 3 in der Lage sein, Methoden wie addClass() und hasClass() sicher zum Bearbeiten von SVG-Dokumenten zu verwenden.

Veraltete, entfernte Methoden und Eigenschaften

Während jQuery die oben genannten Verbesserungen hinzufügte, wurden auch einige Funktionen entfernt und als veraltet markiert.

Veraltete bind()-, unbind()-, delegate()- und undelegate()-Methoden

jQuery hat vor langer Zeit die Methode on() eingeführt, die eine einheitliche Schnittstelle zum Ersetzen von Methoden wie bind(), Delegate() und Live() bietet. Gleichzeitig führte jQuery auch die Methode off() ein, um unbind(), undelegated() und die() zu ersetzen. Seitdem sind bind(), Delegate(), Unbind() und Undelegate() veraltet, existieren aber immer noch.

jQuery 3 markiert endlich diese Methoden als „veraltet“ und plant, sie in einer zukünftigen Version (höchstwahrscheinlich jQuery 4) vollständig zu entfernen. Bitte verwenden Sie daher in Ihrem Projekt die Methoden on() und off() einheitlich, damit Sie sich keine Gedanken über Änderungen in zukünftigen Versionen machen müssen.

Entfernen Sie die Methoden „load()“, „unload()“ und „error()“

jQuery 3 verzichtet vollständig auf die Methoden „load()“, „unload()“ und „error()“, die als veraltet markiert wurden. Diese Methoden wurden vor langer Zeit (ab jQuery 1.8) als veraltet markiert, wurden jedoch nicht entfernt. Wenn Sie ein Plugin verwenden, das immer noch auf diese Methoden angewiesen ist, wird ein Upgrade auf jQuery 3 Ihren Code beschädigen. Seien Sie daher während des Upgrade-Vorgangs aufmerksam.

Kontext-, Unterstützungs- und Selektorattribute entfernen

jQuery 3 verzichtet vollständig auf Attribute wie Kontext, Unterstützung und Selektor, die als veraltet markiert wurden. Wie oben beschrieben, achten Sie beim Upgrade auf jQuery 3 bitte darauf, welche Plugins Sie verwenden.

Fehler behoben

jQuery 3 behebt einige sehr wichtige Fehler aus früheren Versionen. In diesem Abschnitt werde ich mich auf zwei davon konzentrieren, da sie einen erheblichen Einfluss auf Ihre Programmiergewohnheiten haben sollten.

Die Rückgabewerte von width() und height() werden nicht mehr gerundet

jQuery 3 behebt einen Fehler in width(), height() und anderen verwandten Methoden. Die Rückgabewerte dieser Methoden werden nicht mehr gerundet, da dieses Rundungsverhalten die Positionierung von Elementen in manchen Fällen unpraktisch macht.

Lassen Sie uns einen genaueren Blick darauf werfen. Angenommen, Sie haben ein Containerelement mit einer Breite von 100 Pixeln. Es enthält drei untergeordnete Elemente und die Breite beträgt ein Drittel (dh 33,333333 %):

Code kopieren Der Code lautet wie folgt:

Mein Name

is

Aurelio De Rosa

Wenn Sie in Versionen vor jQuery 3 versuchen, die Breite eines untergeordneten Elements über den folgenden Code zu ermitteln...

Code kopieren Der Code lautet wie folgt:

$('.container div').width() ;

… alors le résultat que vous obtiendrez sera 33. La raison en est que jQuery arrondira la valeur 33,33333. Dans jQuery 3, ce bug a été corrigé, vous obtiendrez donc un résultat plus précis (c'est-à-dire un nombre à virgule flottante).

Méthode wrapAll()

jQuery 3 corrige également un bug dans la méthode wrapAll() qui se produisait lorsqu'une fonction lui était passée en paramètre. Dans les versions antérieures à jQuery 3, lorsqu'une fonction était transmise à la méthode wrapAll(), elle encapsulait individuellement chaque élément de la collection jQuery. En d’autres termes, le comportement est exactement le même que lors du passage d’une fonction à wrap().

En corrigeant ce problème, un autre changement a également été introduit : puisque dans jQuery 3, cette fonction n'est appelée qu'une seule fois, il est impossible de lui transmettre tous les éléments de la collection jQuery. Par conséquent, le contexte d'exécution de cette fonction (this) pointera uniquement vers le premier élément de la collection jQuery actuelle.

Comment télécharger jQuery 3 bêta 1

Maintenant que vous avez lu jusqu'ici, vous voudrez probablement essayer la première version bêta de jQuery 3. Vous pouvez vous procurer cette version via les deux adresses suivantes :

Version non compressée : https://code.jquery.com/jquery-3.0.0-beta1.js

Version compressée : https://code.jquery.com/jquery-3.0.0-beta1.min.js

Bien sûr, vous pouvez également le télécharger via npm :

[code]npm install jquery@3.0.0-beta1[/code]

Conclusion

Beaucoup de gens ont dénigré jQuery, affirmant qu'il n'a pas sa place dans le développement Web moderne. Quoi qu’il en soit, le développement de jQuery se poursuit et les statistiques objectives (une part de 78,5 % du million de sites Web les plus performants) mettent à mal ces arguments.

Dans cet article, je vous ai présenté certains des changements majeurs qu'apportera jQuery 3. Comme vous l'avez peut-être remarqué, il est peu probable que cette version interrompe vos projets existants car elle introduit très peu de modifications majeures. Cependant, lors de la mise à niveau vers jQuery 3, vous devez toujours garder à l'esprit certains points clés, tels que les améliorations apportées aux objets différés, etc. De même, lors de la mise à niveau d'une bibliothèque tierce, il est également nécessaire de vérifier la compatibilité du projet afin de détecter au plus tôt tout comportement inattendu et d'éviter la panne de certaines fonctions.

Note de traduction

En plus des changements mentionnés dans cet article, le plus gros changement dans jQuery 3.0 est l'abandon complet du support d'IE8. La raison pour laquelle l'équipe jQuery a pris cette décision est que Microsoft a annoncé au début de cette année qu'il cesserait de prendre en charge IE 8~10. Par conséquent, il n'est pas nécessaire que le projet jQuery Compat publié dans la phase alpha 3.0 de jQuery continue d'exister.

Cependant, comme IE8 reste l'un des navigateurs les plus populaires en Chine continentale, les développeurs nationaux devront s'en tenir à la version jQuery 1.x à court (voire moyen) terme.

Bon, on vous annonce enfin la bonne nouvelle. Pour aider les utilisateurs à effectuer une mise à niveau en douceur, jQuery fournira également cette fois un plugin de migration (plugin jQuery Migrate) pour la version 3.0. Après la mise à niveau de jQuery vers 3.0, exécutez ce plug-in en même temps pour vous assurer que le code métier existant basé sur jQuery 1.x ou 2.x s'exécute normalement en même temps, il vous le signalera également dans la console ; le code existant est différent de jQuery 3. Lieux compatibles. Une fois que vous avez corrigé ces incompatibilités, vous pouvez supprimer le plugin en toute sécurité.

Was sind die neuen Funktionen der kommenden jQuery 3_jquery