Warum jQuery eine gute Erinnerung daran ist, jQuery nicht mehr zu verwenden

Geschrieben von Shalitha Suranga✏️

jQuery hat eine lange und angesehene Geschichte, doch die neue Version von jQuery v4 Beta ist ohne interessante Funktionen für moderne Webentwickler erhältlich. Es gibt mehrere Gründe, warum es ein guter Zeitpunkt ist, jQuery nicht mehr zu verwenden:

1. Moderne Browser und native JavaScript-APIs unterstützen jetzt nativ alle Funktionen, die jQuery bietet, wodurch es überflüssig und seine Hilfsfunktionen überflüssig werden
2. Die Verwendung von jQuery erhöht unnötigerweise die Größe des Web-App-Bundles und verringert die Leistung im Vergleich zu nativen Implementierungen
3. Die Veröffentlichung von jQuery 4 bestätigt seine Veralterung, da es an wichtigen neuen Funktionen mangelt, sich auf das Überleben konzentriert und hervorhebt, dass natives JavaScript und moderne Frameworks es überholt haben.
4. Die Migration von jQuery zu ES-Modulen und die Einführung moderner Praktiken in jQuery 4 bringen nichts Neues für Webentwickler
5. Die Verwendung von jQuery mit modernen Frontend-Frameworks wie React, Vue und Angular kann zu Konflikten mit deren Architekturen und Codierungsempfehlungen führen
6. Moderne Frontend-Frameworks geben Produktionscode mit Polyfills aus, sodass Entwickler nicht die jQuery-API verwenden müssen, um Webseiten für ältere Browser zu erstellen

Wir werden diese Punkte genauer untersuchen und untersuchen, warum jQuery v4 eine jahrzehntelange Reise abschließt, indem wir seine verfügbaren Funktionen mit nativen JavaScript-Web-APIs vergleichen.

Die goldene Ära von jQuery vor v4

Von Beginn der Frontend-Webentwicklung an verwendeten Entwickler JavaScript, um benutzerfreundliche Web-Frontends zu implementieren, indem sie HTML-Elemente dynamisch aktualisierten.

In den frühen 2000er Jahren gab es keine voll funktionsfähigen, komponentenbasierten, modernen Frontend-Entwicklungsbibliotheken wie React, und Browser boten auch keine erweiterten CSS-Funktionen wie Animationen und hochwertige, entwicklerfreundliche, voll funktionsfähige Funktionen DOM-Manipulations-API, daher mussten Entwickler viele Codezeilen mit den vorhandenen Web-APIs schreiben, um Web-Frontends zu erstellen – sie mussten sogar Code schreiben, um Browser-Kompatibilitätsprobleme mit AJAX-Kommunikations-APIs zu lösen.

jQuery löste diese Probleme, indem es Kurzschriftfunktionen für die DOM-Manipulation und eine browserübergreifende AJAX-API anbot, sodass jeder Webentwickler das jQuery-Skript in seine Web-Apps einbaute.

Da heute jeder ein komponentenbasiertes Frontend-Framework empfiehlt, war jQuery Mitte der 2000er Jahre der am meisten empfohlene Ansatz für die Erstellung dynamischer Web-Frontends, als die Nutzung von jQuery vor ihrem Untergang ihren Höhepunkt erreichte:

Die offizielle Bootstrap 3.4-Website verwendet jQuery vom offiziellen CDN

Mitte der 2000er Jahre wurde jQuery v1 bis v3 verwendet in:

• Jede beliebte Website-HTML-Vorlage zum Implementieren von Schiebereglern, Bildergalerien usw.
• Web-Apps zur DOM-Manipulation und zum Durchführen von HTTP/AJAX-Aufrufen mit Internet Explorer-Unterstützung
• Bootstrap zur Implementierung von Komponenten wie Modalitäten, Dropdowns usw.
• Alle dynamischen WordPress-Vorlagen und Plugins für die DOM-Manipulation

Der Stand von jQuery mit der Veröffentlichung von v4

jQuery veröffentlichte die erste Beta-Version im Februar 2024 und die zweite im Juli  -  Codebasis-Betreuer planen, bald eine Release-Candidate-Version zu erstellen. Die v4-Version von jQuery weist die folgenden wesentlichen Änderungen auf:

• Die Unterstützung für IE 10 und ältere Webbrowser-Versionen wurde eingestellt
• Entfernte Methoden, die bereits veraltet sind, wie z. B. jQuery.isArray()
• Unterstützt die Verwendung von HTML-Inhalten, die mit der Trusted Types API erstellt wurden
• Unterstützt die Verwendung nativer JavaScript-Binärdaten in AJAX-Methoden
• Die jQuery-Codebasis wurde mit dem Rollup-Bundler in ES-Module von AMD (requirejs-Module) migriert

Mit der Veröffentlichung der Betaversion von jQuery v4 versucht es, seine Codebasis durch die Verwendung von ES-Modulen zu modernisieren und die Bundle-Größe durch den Verzicht auf die IE 10-Unterstützung zu reduzieren. Weitere Informationen zur bevorstehenden jQuery v4-Version finden Sie in diesem offiziellen Blogbeitrag.

Warum jQuery v4 seinen Untergang bestätigt

Die Veröffentlichung der Beta-Version von jQuery v4 ist in der Tat kein Grund, sich nicht länger mit jQuery zu befassen, aber das Wachstum und die Zukunft, die die Version v4 zeigt, bestätigen den Niedergang von jQuery in der modernen Webtechnologie. Dies begann langsam, als der Browserstandard anfing, auf Entwicklerproduktivität ausgerichtete High-Level-DOM-Manipulationsfunktionen und erweiterte Funktionen in CSS anzubieten, die Entwicklern dabei halfen, dynamische Stile ohne Verwendung von JavaScript zu implementieren.

jQuery v1 bis v3 implementierte zweifellos browserübergreifende, entwicklerfreundliche Funktionen, die Browser nativ nicht boten. Beispielsweise half die Sizzle-Auswahl-Engine von jQuery Entwicklern, DOM-Elemente abzufragen, bevor Browser document.querySelectorAll() implementierten. Darüber hinaus war $.ajax() aufgrund von Browserkompatibilitätsproblemen der integrierten AJAX-API die fetch() der vorherigen Entwickler.

Eine alte StackOverflow-Antwort, die die Verwendung von jQuery anstelle alter nativer Web-APIs empfiehlt

Während der Zeit von jQuery v2 bis v3 wurden HTML, JavaScript, CSS und Web-APIs drastisch verbessert und boten Standard-APIs für jQuery-Funktionen, wodurch jQuery zu einer veralteten Wahl wurde.

jQuery versuchte zu überleben, indem es sich an Standard-APIs hielt, wie z. B. die Unterstützung der Standard-Promise-Schnittstelle in v3 und das Entfernen von doppeltem Code, aber Standard-Browserfunktionen eroberten das Herz des modernen Entwicklers. jQuery hat Version 4 nicht mit Funktionen, sondern mit Verbesserungen veröffentlicht, um in der modernen Webtechnologie relevant zu bleiben.

jQuery v4 bietet Ihnen ein 27-KB-Gzip-Bundle-Inkrement für die Funktionen, die Ihr Webbrowser nativ mit 0-KB-Client-seitigem JavaScript-Code ausliefert!

jQuery vs. native Browser-APIs

Vergleichen wir jQuery und nativen Browser-API-Code für verschiedene Entwicklungsanforderungen nebeneinander und sehen wir, wie moderne Web-APIs jQuery überflüssig machen.

Erstellen Sie eine neue HTML-Datei und verknüpfen Sie die Betaversion von jQuery v4 über das offizielle CDN wie folgt, um loszulegen:

<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>

Auswählen von DOM-Elementen

Moderne Frontend-Bibliotheken und Frameworks bieten das Ref-Konzept für den Zugriff auf DOM-Elementreferenzen, Webentwickler müssen jedoch häufig DOM-Elemente abfragen, wenn sie nicht auf ein bestimmtes Frontend-Framework angewiesen sind. Sehen Sie, wie document.querySelectorAll() eine einfache, native DOM-Auswahl implementiert, ähnlich wie jQuery:

<ul>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.items input[type=checkbox]:checked');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log(elms);

Ergebnis:

Auswählen von DOM-Elementen mit CSS-Abfragen mithilfe von jQuery und nativen Web-APIs

jQuery bietet die Methode „nest()“ zum Zurücklaufen und Finden eines passenden DOM-Knotens für einen bestimmten Selektor. Die native DOM-API implementiert auch dieselbe Methode mithilfe des OOP-Musters:

// jQuery:
const elms = $('.items input[type=checkbox]:checked')
             .closest('li');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log([...elms].map(e => e.closest('li')));

Ergebnis:

Auswahl der nächstgelegenen DOM-Elemente mithilfe von jQuery und nativen Web-APIs

Für einige jQuery-Funktionen gibt es in der modernen Standard-DOM-API keine identischen Abkürzungsalternativen, aber wir können vorhandene DOM-API-Methoden effektiv mit modernen JavaScript-Funktionen nutzen.

JQuery unterstützt beispielsweise den nicht standardmäßigen Selektor :contains(text), daher müssen wir ihn mit der Array-Methode filter() wie folgt implementieren:

// jQuery:
const elms = $('.items li label:contains("Java")');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items li label');
console.log([...elms].filter(e => e.textContent.includes('Java')));

Ergebnis:

Filtern von Elementen, die ein bestimmtes Textsegment enthalten, mithilfe von jQuery und nativen Web-APIs

Die Methode querySelectorAll() nutzt die Leistungsfähigkeit moderner CSS-Pseudoklassen, um eine bessere native Alternative für die jQuery-Funktion find() anzubieten. Beispielsweise können wir die Pseudoklasse :scope verwenden, um Aufrufe nativer Abfrageselektoren ähnlich wie die jQuery-Funktion find() einzuschränken:

<div>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.pages')
             .find('.pages > .page-1');
console.log(elms.toArray());

// Native:
const elms = document.querySelector('.pages')
             .querySelectorAll(':scope .pages > .page-1');
console.log(elms);

Ergebnis:

Scoping von DOM-Elementselektoren mit jQuery und nativen Web-APIs

Abrufen und Aktualisieren von DOM-Attributen

Das Klassenattribut, elementspezifische Attribute und benutzerdefinierte Datenattribute sind gängige HTML-Attribute, die Webentwickler bei der Entwicklung von Web-Apps häufig abrufen und aktualisieren müssen.

In der Vergangenheit mussten Entwickler die native className-Eigenschaft manuell manipulieren, um Elementklassennamen zu aktualisieren. Daher verwendeten sie die vorab entwickelten Funktionsimplementierungen addClass(), removeClass() und toggleClass() von jQuery. Aber jetzt implementiert das native classList-Objekt eine bessere Unterstützung für die Verarbeitung von Klassenattributwerten:

<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>

Ergebnis:

Aktualisierung der Klassenattributwerte mithilfe von jQuery und nativen Web-APIs

Mittlerweile sind die nativen DOM-Methoden getAttribute() und setAttribute() ein Standardersatz für die bekannte jQuery-Kurzfunktion attr():

<ul>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.items input[type=checkbox]:checked');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log(elms);

Ergebnis:

Ändern und Abrufen von HTML-Elementattributen mit jQuery und nativen Web-APIs

jQuery empfiehlt Entwicklern, die Funktion attr() zu verwenden, um benutzerdefinierte Datenattribute festzulegen. Jetzt können Sie jedoch die integrierte Dataset-Eigenschaft für einen produktiveren Abruf/Änderung von Datenattributen wie folgt verwenden:

// jQuery:
const elms = $('.items input[type=checkbox]:checked')
             .closest('li');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log([...elms].map(e => e.closest('li')));

Ergebnis:

Aktualisierung benutzerdefinierter Datenattribute mithilfe von jQuery und nativen Web-APIs

Manipulation von DOM-Elementen

In der Vergangenheit verwendeten die meisten Entwickler jQuery für die DOM-Manipulation, da die native DOM-Manipulations-API keine auf die Entwicklerproduktivität ausgerichteten Funktionen bot. Jetzt implementiert jeder moderne Standard-Webbrowser eine produktive, integrierte DOM-Manipulationsunterstützung auf hohem Niveau.

Das Erstellen und Anhängen von Elementen sind die häufigsten Vorgänge bei DOM-Manipulationsaufgaben. So geht es mit jQuery und nativen Web-APIs:

// jQuery:
const elms = $('.items li label:contains("Java")');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items li label');
console.log([...elms].filter(e => e.textContent.includes('Java')));

Ergebnis:

Verwendung der Funktionen before() und after() mit jQuery und nativen Web-APIs

Animieren von DOM-Elementen

Wenn Sie ein erfahrener Webentwickler sind, der Web-Apps vor mehr als einem Jahrzehnt erstellt hat, wissen Sie, wie die jQuery-Funktionen fadeIn(), fadeOut() und animate() Ihnen dabei geholfen haben, Ihre Web-Apps interaktiver zu gestalten. Diese Animationsfunktionen unterstützten sogar die Animationsbeschleunigung, um flüssigere Animationen zu erstellen.

Native CSS-Animationen/Übergänge und die JavaScript-Webanimations-API machten die jQuery-Animations-API überflüssig. So können Sie fadeIn() mit der Standard-API für Webanimationen implementieren:

<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>

Ergebnis:

Ereignishandler mit jQuery und nativen Web-APIs anhängen und entfernen

Sowohl jQuery als auch die native DOM-API bieten Kurzmethoden zum Anhängen von Ereignis-Listenern:

<ul>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.items input[type=checkbox]:checked');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log(elms);

jQuery bietet auch die one()-Funktion, um einen Event-Handler einmal auszulösen  –  Jetzt unterstützt jeder Standard-Webbrowser die Once-Option für denselben Zweck:

// jQuery:
const elms = $('.items input[type=checkbox]:checked')
             .closest('li');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log([...elms].map(e => e.closest('li')));

Kommunikation mit Webdiensten

Frühere monolithische Web-Apps haben häufig HTTP-Anfragen an den Backend-Server gesendet, um neue Seiten mit aktualisierten Daten zu erhalten  –  Web-Apps haben bei jeder größeren Benutzeraktion die gesamte Seite gerendert.

Später erstellten Entwickler bessere, interaktive Web-Apps, indem sie einen Teil der Webseite aktualisierten, indem sie HTML-Inhalte über AJAX anforderten. Aufgrund von Browserkompatibilitäts- und Produktivitätsproblemen mit der integrierten AJAX-API verwendeten sie jQuery zum Senden von AJAX-Anfragen.

Jetzt können Entwickler die Standardfunktion fetch() anstelle der AJAX-Funktionen von jQuery verwenden:

// jQuery:
const elms = $('.items li label:contains("Java")');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items li label');
console.log([...elms].filter(e => e.textContent.includes('Java')));

Ergebnis:

Senden von HTTP-Anfragen mit jQuery und nativen Web-APIs

Heutzutage verwenden die meisten Entwickler RESTful-APIs, um Datenquellen von der Präsentationsschicht zu trennen. jQuery bietet eine produktive Kurzfunktion zum Abrufen von JSON-Daten von RESTful-Diensten, aber native fetch() bietet einen besseren Standardansatz:

<div>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.pages')
             .find('.pages > .page-1');
console.log(elms.toArray());

// Native:
const elms = document.querySelector('.pages')
             .querySelectorAll(':scope .pages > .page-1');
console.log(elms);

Ergebnis:

Anfordern von JSON-Daten von einem RESTful-Webdienst mit jQuery und nativen Web-APIs

Utility-Funktionen

jQuery bietet verschiedene vorentwickelte Hilfsfunktionen, um Webentwicklern Zeit zu sparen. Heutzutage finden wir integrierte ECMAScript-Funktionen für alle diese vorentwickelten Hilfsfunktionen, die in jQuery v4 vorhanden sind, wie in der folgenden Tabelle aufgeführt:

Ältere Dienstprogramme wie $.parseJSON() waren bereits in früheren jQuery-Versionen veraltet und wurden in v4 entfernt.

Kann ich jQuery mit Vue, React oder Angular verwenden?

Webentwickler nutzten jQuery, als es noch keine modernen Frontend-Bibliotheken für die App-Entwicklung gab. Sie verwendeten die DOM-Manipulations- und AJAX-Funktionen von jQuery hauptsächlich, um das Frontend dynamisch zu aktualisieren, ohne die gesamte Webseite zu aktualisieren. Mithilfe von SPA-Entwicklungstechniken (Single-Page-Application) in modernen Frontend-Frameworks/-Bibliotheken können Webentwickler nun hochgradig interaktive, gut strukturierte und schlanke Web-Apps erstellen, ohne altmodische AJAX-basierte Rendering-Techniken zu verwenden.

Wir können jQuery mit Vue, React und Angular wie jede gängige Frontend-Bibliothek/Framework verwenden, aber von der Integration von jQuery in diese Frontend-Bibliotheken wird abgeraten, da es keinen Mehrwert für das moderne Frontend-Entwicklungsökosystem bringt.

Jede gängige Frontend-Bibliothek bietet das Ref-Konzept für den Zugriff auf DOM-Elementreferenzen innerhalb von Komponenten, sodass Sie weder jQuery noch document.querySelector() verwenden müssen. Beispielsweise können Sie die DOM-Elementreferenz eines

<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>

<script>
$ aus 'jquery' importieren;

Standard exportieren {
 mount() {
   const elm = $('#elm');
   console.log(elm);
 }
}
</script>

<Vorlage>
 <div>



<p>Manuelle DOM-Manipulation kommt bei modernen Frontend-Bibliotheken wie Vue selten vor. Wenn Sie jedoch mit einer solchen Situation konfrontiert sind, ist die Verwendung nativer Web-APIs der empfohlene Ansatz.</p>

<h2>
  
  
  Abschluss
</h2>

<p>jQuery war zweifellos eine bemerkenswerte JavaScript-Bibliothek, die einen produktiven, entwicklerfreundlichen Ansatz zum Erstellen von Web-App-Frontends mit DOM-Manipulation und AJAX-Techniken einführte. jQuery gewann aufgrund von Browserkompatibilitätsproblemen und dem Mangel an entwicklerorientierten Funktionen in nativen Web-APIs an Popularität. W3C und ECMAScript haben diese Probleme durch die Einführung neuer Web-APIs und JavaScript-Sprachfunktionen gelöst. </p>

<p>Der aktuelle Stand der Web-APIs bietet bessere, moderne, entwicklerfreundliche Klassen und Funktionen für alle Funktionen, die jQuery besitzt, wodurch jQuery im modernen Web überflüssig wird. </p>

<p>Die jüngste v4-Betaversion von jQuery bestätigte dies mit der Entfernung von Funktionen und Verbesserungen, die eher auf Wartung als auf Innovation ausgerichtet waren. In V4 und anderen jQuery-Versionen werden aufgrund der Verfügbarkeit browserübergreifender nativer Web-APIs höchstwahrscheinlich weitere Funktionen entfernt. </p><p>In kommenden Versionen wird die Unterstützung für ältere Browser möglicherweise eingestellt, da die meisten Benutzer dazu neigen, aktuelle Browser zu verwenden. Ich denke auch, dass jQuery nicht wieder populär werden wird, da die aktuellen nativen Web-APIs stabil und gut standardisiert sind, aber Entwickler, die mit älteren Web-Apps arbeiten, die von jQuery abhängen, werden es weiterhin verwenden und ihre Projekte auf jQuery v4, v5 und aktualisieren bald. Abgesehen davon möchte niemand die Größe des Web-App-Bundles erhöhen, indem er jQuery for Development-Funktionen hinzufügt, die er problemlos in jedem gängigen Webbrowser finden kann!</p>


<hr>

<h2>
  
  
  LogRocket: JavaScript-Fehler einfacher beheben, indem Sie den Kontext verstehen
</h2>

<p>Das Debuggen von Code ist immer eine mühsame Aufgabe. Aber je besser Sie Ihre Fehler verstehen, desto einfacher ist es, sie zu beheben.</p>

<p>LogRocket ermöglicht es Ihnen, diese Fehler auf neue und einzigartige Weise zu verstehen. Unsere Frontend-Überwachungslösung verfolgt die Benutzerinteraktion mit Ihren JavaScript-Frontends, um Ihnen die Möglichkeit zu geben, genau zu sehen, was der Benutzer getan hat, was zu einem Fehler geführt hat.</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173087043468616.jpg" alt="Why jQuery s a good reminder to stop using jQuery"></p>

<p>LogRocket zeichnet Konsolenprotokolle, Seitenladezeiten, Stack-Traces, langsame Netzwerkanforderungen/-antworten mit Header-Körpern, Browser-Metadaten und benutzerdefinierten Protokollen auf. Es wird nie einfacher sein, die Auswirkungen Ihres JavaScript-Codes zu verstehen!</p>

<p>Probieren Sie es kostenlos aus.</p>