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:
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.
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:
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:
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.
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!
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>
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
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
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
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')));
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
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:
| jQuery | Native replacement |
| `$.each()` | `Array.forEach()` |
| `$.extend()` | `Object.assign() or the spread operator` |
| `$.inArray()` | `Array.includes()` |
| `$.map()` | `Array.map()` |
| `$.parseHTML()` | `document.implementation.createHTMLDocument()` |
| `$.isEmptyObject()` | `Object.keys()` |
| `$.merge()` | `Array.concat()` |
Ältere Dienstprogramme wie $.parseJSON() waren bereits in früheren jQuery-Versionen veraltet und wurden in v4 entfernt.
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>
Ergebnis:
Zugriff auf DOM-Elementreferenzen in Vue mithilfe von Refs
Die Verwendung von jQuery in Vue wie folgt ist zwar möglich, untergräbt jedoch die moderne Vue-Quelle mit altmodischer Syntax, die vor etwa einem Jahrzehnt eingeführt wurde, und durchbricht die beabsichtigte Art und Weise, wie eine moderne Frontend-Bibliothek verwendet werden sollte:
<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>
Das obige ist der detaillierte Inhalt vonWarum jQuery eine gute Erinnerung daran ist, jQuery nicht mehr zu verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was ist der Rückgabewert der Funktion?
besonderer Symbolpunkt
Gängige Verschlüsselungsmethoden für die Speicherung verschlüsselter Daten
Einführung in Befehle zum Erstellen neuer Dateien unter Linux
Die heutigen neuesten offiziellen Nachrichten von PaiCoin sind wahr
BIOS kann Solid-State-Laufwerk nicht erkennen
location.search
Excel-Tabellen-Schrägstrich in zwei Teile geteilt
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
