(Jetzt mehr denn je) Sie brauchen vielleicht kein jQuery

Das DOM und native Browser-APIs haben sich seit der Veröffentlichung von jQuery im Jahr 2006 sprunghaft verbessert. Leute schreiben seit 2013 Artikel wie „You Might Not Need jQuery“ (siehe diese klassische Seite und dieses klassische Repo). Ich möchte kein altes Gebiet wieder aufwärmen, aber seit dem letzten Artikel „You Might Not Need jQuery“, auf den Sie vielleicht gestoßen sind, hat sich in der Browserwelt einiges getan. Browser implementieren weiterhin neue APIs, die die Entwicklung ohne Bibliotheken erleichtern, viele davon direkt von jQuery kopiert.

Lassen Sie uns einige *neue* Vanilla-Alternativen zu jQuery-Methoden durchgehen.

Ein Element von der Seite entfernen

Erinnern Sie sich an die wahnsinnig umständliche Art, wie man mit nativem DOM ein Element von der Seite entfernen musste? el.parentNode.removeChild(el);? Hier ist ein Vergleich der jQuery-Methode und der neuen verbesserten Vanilla-Methode.

jQuery

var $elem = $(".someClass") //select the element 
$elem.remove(); //remove the element

Ohne jQuery

var elem = document.querySelector(".someClass"); //select the element
elem.remove() //remove the element

Für den Rest dieses Beitrags gehen wir davon aus, dass $elem eine mit jQuery ausgewählte Elementmenge ist und elem ein natives JavaScript-ausgewähltes DOM-Element ist.

Ein Element voranstellen

jQuery

$elem.prepend($someOtherElem);

Ohne jQuery

elem.prepend(someOtherElem);

Ein Element vor einem anderen Element einfügen

jQuery

$elem.before($someOtherElem);

Ohne jQuery

elem.before(someOtherElem);

Ein Element durch ein anderes ersetzen

jQuery

$elem.replaceWith($someOtherElem);

Ohne jQuery

elem.replaceWith(someOtherElem);

Den nächsten Vorfahren finden, der mit einem gegebenen Selektor übereinstimmt

jQuery

$elem.closest("div");

Ohne jQuery

elem.closest("div");

Browser-Unterstützung für DOM-Manipulationsmethoden

Diese Methoden haben jetzt ein gutes Maß an Browserunterstützung

Sie werden auch derzeit in Edge implementiert.

Ein Element einblenden

jQuery

$elem.fadeIn();

Durch das Schreiben unseres eigenen CSS haben wir viel mehr Kontrolle darüber, wie wir unser Element animieren. Hier mache ich ein einfaches Ausblenden.

.thingy {
  display: none;
  opacity: 0;
  transition: .8s;
}

elem.style.display = "block";
requestAnimationFrame(() => elem.style.opacity = 1);

Einen Event-Handler-Callback nur einmal aufrufen

jQuery

$elem.one("click", someFunc);

Früher mussten wir bei der Verwendung von reinem JavaScript removeEventListener innerhalb der Callback-Funktion aufrufen.

function dostuff() {
  alert("some stuff happened");
  this.removeEventListener("click", dostuff);
}
var button = document.querySelector("button");
button.addEventListener("click", dostuff);

Jetzt sind die Dinge viel sauberer. Sie haben vielleicht den dritten optionalen Parameter gesehen, der manchmal an addEventListener übergeben wird. Es ist ein Boolean, um zwischen Event Capturing und Event Bubbling zu wählen. Heutzutage kann das dritte Argument jedoch alternativ ein Konfigurationsobjekt sein.

elem.addEventListener('click', someFunc, { once: true, });

Wenn Sie weiterhin Event Capturing verwenden und der Callback nur einmal aufgerufen werden soll, können Sie dies auch im Konfigurationsobjekt angeben.

elem.addEventListener('click', myClickHandler, {
  once: true,
  capture: true
});

Animation

JQuerys Methode .animate() ist ziemlich begrenzt.

$elem.animate({
  width: "70%",
  opacity: 0.4,
  marginLeft: "0.6in",
  fontSize: "3em",
  borderWidth: "10px"
}, 1500);

Die Dokumentation besagt: „Alle animierten Eigenschaften sollten auf einen einzelnen numerischen Wert animiert werden, außer wie unten angegeben; die meisten nicht-numerischen Eigenschaften können mit grundlegender jQuery-Funktionalität nicht animiert werden.“ Dies schließt Transformationen aus, und Sie benötigen ein Plugin, nur um Farben zu animieren. Mit der neuen Web Animations API wären Sie viel besser dran.

var elem = document.querySelector('.animate-me');
elem.animate([
  { 
    transform: 'translateY(-1000px) scaleY(2.5) scaleX(.2)', 
    transformOrigin: '50% 0', 
    filter: 'blur(40px)', 
    opacity: 0 
  },
  { 
    transform: 'translateY(0) scaleY(1) scaleX(1)',
    transformOrigin: '50% 50%',
    filter: 'blur(0)',
    opacity: 1 
  }
], 1000);

Ajax

Ein weiteres wichtiges Verkaufsargument von jQuery in der Vergangenheit war Ajax. jQuery abstrahierte die Hässlichkeit von XMLHttpRequest

$.ajax('https://some.url', {
  success: (data) => { /* do stuff with the data */ }
});

Die neue Fetch API ist ein überlegener Ersatz für XMLHttpRequest und wird jetzt von allen modernen Browsern unterstützt.

fetch('https://some.url')
  .then(response => response.json())
  .then(data => {
    // do stuff with the data
  });

Zugegebenermaßen kann Fetch etwas komplizierter sein als dieses kleine Codebeispiel. Zum Beispiel wird das von fetch() zurückgegebene Promise bei HTTP-Fehlercodes nicht zurückgewiesen. Es ist jedoch weitaus vielseitiger als alles, was auf XMLHttpRequest aufbaut.

Wenn wir jedoch einfache Bedienung wünschen, gibt es eine einfachere Option, die an Popularität gewonnen hat – sie ist jedoch nicht nativ im Browser verfügbar, was mich zu... bringt.

Der Aufstieg der Mikro-Bibliothek

Axios ist eine beliebte Bibliothek für Ajax. Sie ist ein großartiges Beispiel für eine Mikro-Bibliothek – eine Bibliothek, die nur eine Sache tun soll. Während die meisten Bibliotheken nicht so gut getestet sind wie jQuery, können sie oft eine attraktive Alternative zum jQuery-Koloss sein.

(Fast) Alles kann polyfillt werden

Sie wissen also jetzt, dass das DOM heutzutage recht angenehm zu bearbeiten ist! Aber vielleicht haben Sie diese Entwicklungen nur betrachtet und gedacht: „Na ja, ich muss immer noch IE 9 unterstützen, also benutze ich besser jQuery.“ Meistens spielt es keine Rolle, was *Can I Use* über ein bestimmtes Feature sagt, das Sie nutzen möchten. Sie können alles verwenden, was Sie möchten, und Polyfills können die Lücken füllen. Es gab eine Zeit, in der man, wenn man ein schickes neues Browser-Feature nutzen wollte, ein Polyfill finden und es auf seiner Seite einbinden musste. Dies für alle fehlenden Features in IE9 zu tun, wäre eine mühsame Aufgabe. Jetzt ist es so einfach

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

Dieses einfache Skript-Tag kann fast alles polyfillen. Wenn Sie noch nichts von diesem Polyfill-Service von der Financial Times gehört haben, können Sie ihn unter Polyfill.io lesen.

NodeLists in 2017 durchlaufen

Die massive Verbreitung von jQuery wurde nicht nur durch die beruhigende Glättung von Browserfehlern und Inkonsistenzen in IE-Relikten gefördert. Heute hat jQuery einen einzigen verbleibenden Verkaufspunkt: **Iteration**.

Iterierbare NodeLists sind für die Qualität des DOM von fundamentaler Bedeutung. Wenig überraschend verwende ich heute stattdessen für die meisten meiner Programmieraufgaben React. — John Resig (@jeresig) 29. April 2016

Es widerspricht jeder Vernunft, dass NodeLists nicht iterierbar sind. Entwickler mussten sich Mühe geben, damit sie es werden. Eine klassische For-Schleife mag der performanteste Ansatz sein, aber sie ist sicher nichts, was ich gerne tippe. Und so landeten wir bei dieser Hässlichkeit.

var myArrayFromNodeList = [].slice.call(document.querySelectorAll('li'));

Oder

[].forEach.call(myNodeList, function (item) {...}

In jüngerer Zeit konnten wir Array.from verwenden, eine kürzere, elegantere Methode, um eine NodeList in ein Array umzuwandeln.

Array.from(querySelectorAll('li')).forEach((li) => /* do something with li */);

Die große Neuigkeit ist jedoch, dass NodeLists jetzt standardmäßig iterierbar sind.

Es ist höchste Zeit, dass wir iterierbare NodeLists haben! https://#/nIT5uHALpW 🎉🎉🎉 Habe das jahrelang gefordert! https://#/edb0TTSdop

— John Resig (@jeresig) 29. April 2016

Jetzt tippen Sie einfach

document.querySelectorAll('li').forEach((li) => /* do some stuff */);

Edge ist der letzte moderne Browser, der keine iterierbaren NodeLists unterstützt, aber daran wird derzeit gearbeitet.

Ist jQuery langsam?

jQuery mag schneller sein als schlecht geschriebenes Vanilla JS, aber das ist nur ein guter Grund, JavaScript besser zu lernen! Paul Irish war ein Mitwirkender am jQuery-Projekt und kam zu dem Schluss

Leistungsempfehlung: Verwenden Sie niemals die Methode hide() von jQuery. Niemals. https://#/zEQf6F54p6
Klassen sind Ihr Freund.

— Paul Irish (@paul_irish) 8. Februar 2015

Hier ist, was der Erfinder von jQuery über das Erlernen des nativen DOM in seinem (absolut wesentlichen) JavaScript-Buch Secrets of the JavaScript Ninja sagt:

„Warum müssen Sie verstehen, wie es funktioniert, wenn die Bibliothek sich darum kümmert? Der überzeugendste Grund ist die *Performance*. Das Verständnis, wie DOM-Modifikation in Bibliotheken funktioniert, kann Ihnen ermöglichen, besseren und schnelleren Code zu schreiben.“

Was mir an jQuery missfällt

Anstatt nur die verbleibenden hässlichen Teile bestimmter Browser-APIs zu glätten, versucht jQuery, sie *alle* pauschal zu ersetzen. Indem ein jQuery-Objekt anstelle einer NodeList zurückgegeben wird, sind eingebaute Browser-Methoden im Wesentlichen nicht mehr zugänglich, was bedeutet, dass Sie auf die jQuery-Methode für alles festgelegt sind. Für Anfänger ist das, was einst Front-End-Scripting zugänglich machte, jetzt ein Hindernis, da es im Wesentlichen zwei doppelte Möglichkeiten gibt, alles zu tun. Wenn Sie den Code anderer Leute leicht lesen und sich sowohl für Stellen bewerben möchten, die Vanilla JS erfordern, als auch für Stellen, die jQuery erfordern, müssen Sie doppelt so viel lernen. Es gibt jedoch Bibliotheken, die eine API übernommen haben, die für jQuery-Süchtige beruhigend vertraut ist, aber eine NodeList anstelle eines Objekts zurückgibt ...

Kann nicht ohne $ leben?

Vielleicht haben Sie sich an das jQuery $ gewöhnt. Bestimmte Mikro-Bibliotheken haben versucht, die jQuery-API zu emulieren.

• Lea Verou, eine eingeladene Expertin der W3C CSS Working Group, die selbst den Artikel jQuery Considered Harmful verfasst hat, ist die Autorin von Bliss.js. Bliss verwendet eine vertraute $ Syntax, gibt aber eine NodeList zurück.
• Paul Irish hat unterdessen Bling.js veröffentlicht, „*weil man das $ von jQuery ohne das jQuery haben möchte*“.
• Remy Sharp bot eine ähnliche Mikro-Bibliothek an, passend benannt min.js.

Ich bin kein Anti-jQuery-Snob. Manche großartigen Entwickler entscheiden sich immer noch dafür, es zu verwenden. Wenn Sie sich mit der Verwendung vertraut und mit seiner API vertraut sind, gibt es keinen *riesigen* Grund, es aufzugeben. Letztendlich gibt es Leute, die jQuery verwenden und wissen, was eine Closure ist und die unternehmensweite Webanwendungen schreiben, und Leute, die Vanilla JS verwenden und das nicht tun. Viele Jobs listen es immer noch als geforderte Fähigkeit auf. Für jeden, der anfängt, sieht es jedoch wie eine zunehmend schlechte Wahl aus. Internet Explorer 11 ist glücklicherweise die letzte Version dieses Höllenapparats. Sobald IE stirbt, wird die gesamte Browserlandschaft immergrün sein, und jQuery wird zunehmend als Relikt aus der Vergangenheit des DOMs betrachtet werden.