Was ist neu in jQuery 3 - 10 Die coolsten Funktionen
Mit jQuery 3.0 wurde die neue Hauptversion von jQuery endlich veröffentlicht. Die Webentwickler-Community hat auf diesen wichtigen Schritt gewartet, seit das jQuery-Team im Oktober 2014 mit der neuen Hauptversion begann endgültige Freigabe ist raus.
Die Freigabemitteilung verspricht a schlanker und schneller jQuery, mit Rückwärtskompatibilität im Hinterkopf In diesem Beitrag werfen wir einen Blick auf einige der neuen Funktionen von jQuery 3.0, um einen Überblick darüber zu geben, wie die JavaScript-Landschaft geändert wird.
Wo soll man anfangen
Wenn Sie jQuery 3.0 herunterladen möchten, um selbst zu experimentieren, gehen Sie direkt zur Download-Seite. Sehen Sie sich auch das Upgrade-Handbuch oder den Quellcode an.
Wenn Sie testen möchten, wie Ihr vorhandenes Projekt mit jQuery 3.0 funktioniert, können Sie das Plug-in für jQuery Migrate ausprobieren, das Kompatibilitätsprobleme in Ihrem Code erkennt. Sie können auch einen Blick auf zukünftige Meilensteine werfen.
Dieser Artikel behandelt nicht alles Die neuen Funktionen von jQuery 3.0, nur die interessanteren: bessere Codequalität, Integration neuer ECMAScript 6-Funktionen, eine neue API für Animationen, eine neue Methode für das Escape-Zeichenfolgen, erhöhte Unterstützung für SVG, verbesserte async-Rückrufe, bessere Kompatibilität mit responsiven Sites und erhöhte Sicherheit.
1. Alte IE-Problemumgehungen wurden entfernt
Eines der Hauptziele der neuen Hauptversion war es, es zu schaffen schneller und schlanker, Daher waren die alten Hacks und Workarounds im Zusammenhang mit IE9- wurde entfernt. Das heißt, wenn Sie IE6-8 unterstützen möchten oder müssen, müssen Sie immer das neueste verwenden 1.12 Release, wie auch die 2.x Serie bietet keine vollständige Unterstützung für ältere Internet Explorer (IE9-). Lesen Sie die Hinweise zur Browserunterstützung in den Dokumenten.
Beachten Sie, dass es auch gibt viele veraltete Funktionen In jQuery 3. Ein großer Nachteil des Upgrade-Leitfadens besteht darin, dass die veralteten Funktionen - Stand Juni 2016 - nicht in Gruppen zusammengefasst sind. Wenn Sie also daran interessiert sind, müssen Sie sie mit dem Suchwerkzeug Ihres Browsers nachschlagen ( Strg + F).
2. jQuery 3.0 wird im strengen Modus ausgeführt
Da die meisten von jQuery 3 unterstützten Browser den strikten Modus unterstützen, wurde die neue Hauptversion unter Berücksichtigung dieser Anweisung erstellt.
Obwohl jQuery 3 im strikten Modus geschrieben wurde, ist es wichtig, das zu wissen Ihr Code muss nicht im strikten Modus ausgeführt werden, so du muss nicht neu geschrieben werden Ihr vorhandener jQuery-Code, wenn Sie zu jQuery 3 migrieren möchten. JavaScript im strengen und nicht strengen Modus kann glücklich nebeneinander existieren.
Es gibt eine Ausnahme: einige Versionen von ASP.NET das - wegen des strengen modus - sind nicht kompatibel mit jQuery 3. Wenn Sie an ASP.NET beteiligt sind, können Sie sich die Details hier in den Dokumenten ansehen.
3. Für… von Loops wird eingeführt
jQuery 3 unterstützt die for… of-Anweisung, eine neue Art von zum Schleife, eingeführt in ECMAScript 6. Es bietet einen einfacheren Weg zu Schleife über iterierbare Objekte, wie Arrays, Maps und Sets.
In jQuery die für… von Schleife kann die erstere ersetzen $ .each (…) Syntax und kann das Durchlaufen der Elemente einer jQuery-Auflistung erleichtern.
Notiere dass der für… von Schleife wird nur Arbeit entweder in einer Umgebung, in der unterstützt ECMAScript 6, oder wenn du Verwenden Sie einen JavaScript-Compiler wie Babel.
4. Animationen haben eine neue API
jQuery 3 verwendet die requestAnimationFrame () - API zum Ausführen von Animationen und zum Erstellen von Animationen laufen glatter und schneller. Die neue API wird nur in Browsern verwendet, die sie unterstützen. Für ältere Browser (d. h. IE9) verwendet jQuery seine vorherige API als Fallback-Methode, um Animationen anzuzeigen.
RequestAnimationFrame Wenn Sie sich für das interessieren, was es weiß oder warum Sie es verwenden sollten, hat CSS Tricks einen guten Beitrag darüber.
5. Neue Methode zur Flucht von Zeichenketten mit besonderer Bedeutung
Das neue jQuery.escapeSelector () Mit dieser Methode können Sie Strings oder Zeichen mit Escapezeichen versehen bedeutet etwas anderes in CSS um in der Lage zu sein Verwenden Sie es in einem jQuery-Selector; ohne es zu umgehen, kann der JavaScript-Interpreter ihn nicht richtig verstehen.
Die Dokumente helfen uns, diese Methode anhand des folgenden Beispiels besser zu verstehen:
“Zum Beispiel, wenn ein Element auf der Seite eine ID hat “abc.def” es kann nicht mit ausgewählt werden $ ("# abc.def") weil der Selektor als analysiert wird “ein Element mit einer ID 'ABC' das hat auch eine Klasse 'def'. Es kann jedoch mit ausgewählt werden $ ("#" + $ .escapeSelector ("abc.def")).”
Ich bin nicht sicher, wie häufig ein solcher Fall auftritt. Wenn Sie jedoch auf ein Problem wie dieses stoßen, haben Sie jetzt eine einfache Möglichkeit, es schnell zu beheben.
6. Methoden zur Klassenbearbeitung unterstützen SVG
Leider jQuery 3 noch unterstützt SVG nicht vollständig, Die jQuery-Methoden, die CSS-Klassennamen wie z .addClass () und .hasClass (), Jetzt kann gewöhnt werden Target SVG-Dokumente auch. Das heißt, Sie können mit jQuery Klassen ändern (hinzufügen, entfernen, umschalten) oder suchen in skalierbaren Vektorgrafiken, stylen Sie dann die Klassen mit CSS.
7. Zurückgestellte Objekte sind jetzt mit JS-Versprechen kompatibel
JavaScript Promises - verwendete Objekte für asynchrone Berechnungen - wurden in ECMAScript 6 standardisiert; ihr Verhalten und ihre Eigenschaften sind in den Promises / A + -Standards festgelegt.
In jQuery 3, Zurückgestellte Objekte wurden mit den neuen Promises / A + -Standards kompatibel gemacht. Verschobene sind verkettbare Objekte das macht es möglich Callback-Warteschlangen erstellen.
Die neue Funktion ändert sich wie asynchrone Rückruffunktionen ausgeführt werden; Versprechen Entwickler können asynchronen Code schreiben, der logischer ist als synchroner Code.
Codebeispiele aus dem Upgrade-Handbuch oder dieses großartige Tutorial von Scotch.io zu den Grundlagen von JavaScript Promises.
8. jQuery.when () interpretiert Multi-Argumente unterschiedlich
Das $ .when () Methode bietet einen Weg zu Callback-Funktionen ausführen. Es ist seit Version 1.5 Teil von jQuery. Es ist eine flexible Methode. Es arbeitet auch mit Null-Argumenten und kann auch ein oder mehrere Objekte als Argumente akzeptieren.
jQuery 3 ändert die Art und Weise, wie Argumente von $ .when () interpretiert werden wenn sie die enthalten $ .then () Methode mit denen Sie zusätzliche Rückrufe als Argumente an das übergeben können $ .when () Methode.
Wenn Sie in jQuery 3 ein Eingabeargument mit der dann() Methode zu $ .when (), das argument wird sein als Promise-kompatibles "thenable" interpretiert.
Dies bedeutet, dass die $ .wenn Methode wird in der Lage sein akzeptieren Sie eine Reihe von Eingängen, wie native ES6 Promises und Bluebird Promises, die das Schreiben komplexerer asynchroner Rückrufe ermöglichen.
9. Neue Logik anzeigen / ausblenden
Um zu erhöhen Kompatibilität mit Responsive Design, der zugehörige Code Elemente anzeigen und ausblenden wurde in jQuery 3 aktualisiert.
Ab jetzt die .Show(), .verbergen(), und .Umschalten() Methoden konzentrieren sich auf Inline-Styles, Anstelle von berechneten Stilen wird dies auf diese Weise geschehen respektieren Sie Stylesheet-Änderungen.
Der neue Code respektiert die Anzeige Werte von Stylesheets wann immer möglich, was bedeutet, dass CSS-Regeln dies ermöglichen dynamisch ändern bei Ereignissen wie Neuausrichtung des Geräts und Größenänderung des Fensters.
Die Dokumente behaupten, dass das wichtigste Ergebnis sein wird:
"Als Ergebnis sind getrennte Elemente nicht mehr als versteckt betrachtet es sei denn, sie haben Inline Anzeige: keine;, und deshalb .Umschalten() werden differenziere sie nicht mehr von verbundenen Elementen ab jQuery 3.0. "
Wenn Sie das besser verstehen wollen Ergebnisse der neuen Show / Hide-Logik, Hier ist eine interessante Github-Diskussion darüber.
Die Entwickler von jQuery haben außerdem eine Google Text & Tabellen-Tabelle veröffentlicht, in der die Funktionsweise des neuen Verhaltens beschrieben wird in verschiedenen Anwendungsfällen.
10. Zusätzlicher Schutz gegen XSS-Angriffe
jQuery 3 hinzugefügt eine zusätzliche Sicherheitsschicht gegen Cross-Site Scripting-Angriffe (XSS), indem Entwickler dies angeben dataType: "script" in den Optionen des $ .ajax () und das $ .get () Methoden.
Wenn Sie also domänenübergreifende Skriptanforderungen ausführen möchten, müssen Sie muss das erklären in den Einstellungen dieser Methoden.
Laut den Dokumenten ist die neue Anforderung bei "entfernten Standorten" hilfreich liefert Nicht-Skript-Inhalte aber entscheidet sich später dazu servieren Sie ein Skript mit böswilliger Absicht". Die Änderung wirkt sich nicht auf die $ .getScript () Methode, wie es das setzt dataType: "script" Option explizit.
