jQuery â JavaScript-Bibliothek der Welt. Die Community der Webentwickler grĂŒndete sie Ende der 2000er Jahre, was zur Entstehung eines reichen Ăkosystems von Websites, Plugins und Frameworks fĂŒhrte, die jQuery im Hintergrund nutzen.
Doch in den letzten Jahren hat sich ihr Status als wichtigstes Werkzeug fĂŒr die Webentwicklung gewandelt. Lassen Sie uns untersuchen, warum jQuery so populĂ€r wurde und warum sie aus der Mode kam, sowie in welchen FĂ€llen es noch sinnvoll ist, sie fĂŒr die Erstellung moderner Websites zu verwenden.
Eine kurze Geschichte von jQuery
John Resig () schuf die erste Version der Bibliothek im Jahr 2005 und - auf einer Veranstaltung namens BarCampNYC. Auf der schrieb der Autor:
jQuery ist eine JavaScript-Bibliothek, die dem Motto folgt: Programmieren mit JavaScript sollte SpaĂ machen. jQuery ĂŒbernimmt hĂ€ufige, sich wiederholende Aufgaben, entfernt unnötigem Markup und macht sie kurz, elegant und verstĂ€ndlich.
jQuery hat zwei Hauptvorteile. Erstens ist es eine benutzerfreundliche API zur Manipulation von Webseiten. Insbesondere bietet es leistungsstarke Methoden zur Auswahl von Elementen. Man kann nicht nur nach ID oder Klassen auswĂ€hlen, jQuery ermöglicht komplexe AusdrĂŒcke, um Elemente basierend auf ihren Beziehungen zu anderen Elementen auszuwĂ€hlen:
// Select every item within the list of people within the contacts element
$('#contacts ul.people li');Im Laufe der Zeit entwickelte sich der Auswahlmechanismus zu einer eigenstÀndigen Bibliothek .
Der zweite Vorteil der Bibliothek war, dass sie die Unterschiede zwischen den Browsern abstrahierte. In jenen Jahren war es schwierig, Code zu schreiben, der in allen Browsern zuverlÀssig funktionierte.
Das Fehlen von Standards bedeutete, dass Entwickler zahlreiche Unterschiede zwischen Browsern und GrenzfĂ€lle berĂŒcksichtigen mussten. Sehen Sie sich und suchen Sie nach jQuery.browser. Hier ist ein Beispiel:
// If Mozilla is used
if ( jQuery.browser == "mozilla" || jQuery.browser == "opera" ) {
// Use the handy event callback
jQuery.event.add( document, "DOMContentLoaded", jQuery.ready );
// If IE is used, use the excellent hack by Matthias Miller
// http://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited
} else if ( jQuery.browser == "msie" ) {
// Only works if you document.write() it
document.write("<scr" + "ipt id=__ie_init defer=true " +
"src=javascript:void(0)></script>");
// Use the defer script hack
var script = document.getElementById("__ie_init");
script.onreadystatechange = function() {
if ( this.readyState == "complete" )
jQuery.ready();
};
// Clear from memory
script = null;
// If Safari is used
} else if ( jQuery.browser == "safari" ) {
// Continually check to see if the document.readyState is valid
jQuery.safariTimer = setInterval(function(){
// loaded and complete are both valid states
if ( document.readyState == "loaded" ||
document.readyState == "complete" ) {
// If either one are found, remove the timer
clearInterval( jQuery.safariTimer );
jQuery.safariTimer = null;
// and execute any waiting functions
jQuery.ready();
}
}, 10);
}Dank jQuery konnten Entwickler die Sorgen ĂŒber all diese TĂŒcken dem Team ĂŒberlassen, das die Bibliothek weiterentwickelte.
SpĂ€ter erleichterte jQuery die Implementierung komplexerer Technologien wie Animationen und Ajax. Die Bibliothek wurde nahezu zur StandardabhĂ€ngigkeit fĂŒr Websites. Heute sorgt sie dafĂŒr, dass ein groĂer Teil des Internets funktioniert. W3Techs schĂ€tzt, dass .
Die Kontrolle ĂŒber die Entwicklung von jQuery wurde ebenfalls formalisierter. Im Jahr 2011 errichtete das Team . Im Jahr 2012 wurde das jQuery Board.
Im Jahr 2015 schloss sich die jQuery Foundation der Dojo Foundation an,, die sich dann mit der Node.js Foundation zusammenschloss- um die, in deren Rahmen jQuery eines der â.»
VerÀnderte UmstÀnde
In den letzten Jahren hat jedoch jQuery . GitHub. Bootstrap v5 , weil es die ââ (derzeit 30 KB groĂ, minifiziert und verpackt). Einige Trends in der Webentwicklung haben die Position von jQuery als unverzichtbares Tool geschwĂ€cht.
Browser
Aus verschiedenen GrĂŒnden sind die Unterschiede und EinschrĂ€nkungen zwischen Browsern weniger wichtig geworden. Erstens hat sich die Standardsituation verbessert. Die Hauptentwickler der Browser (Apple, Google, Microsoft und Mozilla) arbeiten gemeinsam an im Rahmen der.
Obwohl sich Browser in mehreren wichtigen Punkten noch unterscheiden, haben die Anbieter zumindest ein Mittel gefunden, eine gemeinsame Grundlage zu suchen und zu schaffen, anstatt ineinander zu fĂŒhren. Dementsprechend haben die Browser-APIs neue Möglichkeiten erlangt. Zum Beispiel ist in der Lage, Ajax-Funktionen von jQuery zu ersetzen:
// jQuery
$.getJSON('https://api.com/songs.json')
.done(function (songs) {
console.log(songs);
})
// native
fetch('https://api.com/songs.json')
.then(function (response) {
return response.json();
})
.then(function (songs) {
console.log(songs);
});Methoden und duplizieren die Auswahlmethoden von jQuery:
// jQuery
const fooDivs = $('.foo div');
// native
const fooDivs = document.querySelectorAll('.foo div');Das Manipulieren von Klassen von Elementen ist jetzt mit :
// jQuery
$('#warning').toggleClass('visible');
// native
document.querySelector('#warning').classList.toggle('visible');Auf der Website sind noch einige Situationen aufgefĂŒhrt, in denen jQuery-Code durch nativen Code ersetzt werden kann. Einige Entwickler halten immer noch an jQuery fest, weil sie schlichtweg nicht ĂŒber die neuen APIs informiert sind, aber sobald sie davon erfahren, verwenden sie diese Bibliothek seltener.
Die Verwendung nativer Funktionen ermöglicht es, die LeistungsfÀhigkeit der Seiten zu steigern. Viele lassen sich jetzt mit CSS umsetzen.
Ein zweiter Grund ist, dass Browser heute viel schneller aktualisiert werden als frĂŒher. In den meisten wird eine verwendet, mit Ausnahme von Apple Safari. Sie können im Hintergrund aktualisiert werden, ohne dass der Nutzer aktiv werden muss, und sind nicht an Betriebssystem-Updates gebunden.
Das bedeutet, dass neue Funktionen der Browser und Bugfixes viel schneller verbreitet werden, und die Entwickler mĂŒssen nicht darauf warten, dass der Anteil ein akzeptables Niveau erreichen. Sie können neue Funktionen und APIs ohne das Laden von jQuery oder Polyfills sicher verwenden.
Der dritte Grund liegt darin, dass Internet Explorer dem völligen Verfall nahe ist. IE war schon lange ein Fluch fĂŒr die Webentwicklung weltweit. Die typischen Bugs waren weit verbreitet, und da IE in den 2000ern dominierte und keine "Evergreen"-Update-Strategie verfolgte, sind seine alten Versionen bis heute hĂ€ufig anzutreffen.
Im Jahr 2016 beschleunigte Microsoft das Ausscheiden von IE aus dem Betrieb, die zehnte und frĂŒhere Versionen einstellte und sich auf IE 11 beschrĂ€nkte. Immer hĂ€ufiger können sich Webentwickler die Freiheit leisten, die KompatibilitĂ€t mit IE zu ignorieren.
Selbst jQuery hat die UnterstĂŒtzung fĂŒr IE 8 und darunter ab , die 2013 veröffentlicht wurde, eingestellt. Und obwohl in einigen FĂ€llen noch eine UnterstĂŒtzung fĂŒr IE erforderlich ist, beispielsweise auf alten Websites, treten diese Situationen zunehmend seltener auf.
Neue Frameworks
Seit dem Erscheinen von jQuery wurden viele Frameworks entwickelt, darunter die modernen MarktfĂŒhrer , und . Sie haben zwei wichtige Vorteile gegenĂŒber jQuery.
Erstens ermöglichen sie es, die BenutzeroberflĂ€che einfach in Komponenten zu unterteilen. Die Frameworks sind so konzipiert, dass sie das Rendering und die Aktualisierung der Seite ĂŒbernehmen. jQuery wird normalerweise nur zur Aktualisierung verwendet und ĂŒberlĂ€sst dem Server die Aufgabe, die Anfangsseite bereitzustellen.
Andererseits ermöglichen die Komponenten von React, Angular und Vue eine enge VerknĂŒpfung von HTML, Code und sogar CSS. So wie wir den Code in viele eigenstĂ€ndige Funktionen und Klassen gliedern, vereinfacht die Möglichkeit, die BenutzeroberflĂ€che in wiederverwendbare Komponenten zu unterteilen, den Aufbau und die Wartung komplexer Websites.
Der zweite Vorteil besteht darin, dass modernere Frameworks der deklarativen Paradigmen folgen, bei denen der Entwickler beschreibt, wie die BenutzeroberflĂ€che aussehen soll, wĂ€hrend die notwendigen Ănderungen zur Erreichung des gewĂŒnschten Ziels vom Framework ĂŒbernommen werden. Dieser Ansatz steht im Gegensatz zum imperativen Ansatz, der fĂŒr jQuery-Code charakteristisch ist.
In jQuery geben Sie explizit die Schritte an, um Ănderungen vorzunehmen. In einem deklarativen Framework sagen Sie: âGemÀà diesen Daten sollte die BenutzeroberflĂ€che so aussehenâ. Dies kann das Schreiben von fehlerfreiem Code erheblich erleichtern.
Die Entwickler haben neue AnsĂ€tze zur Webseitenentwicklung ĂŒbernommen, weshalb die PopularitĂ€t von jQuery gesunken ist.
Wann sollte man jQuery verwenden?
Wann also sollte man jQuery verwenden?
Wenn die KomplexitĂ€t des Projekts steigt, ist es besser, mit einer anderen Bibliothek oder einem Framework zu beginnen, das es ermöglicht, die KomplexitĂ€t sinnvoll zu verwalten. Zum Beispiel, indem man das Interface in Komponenten unterteilt. Der Einsatz von jQuery in solchen Webseiten kann anfangs akzeptabel erscheinen, fĂŒhrt jedoch schnell zu Spaghetticode, wenn man sich nicht sicher ist, welcher Teil auf welchen Teil der Seite Einfluss hat.
Ich war schon in einer solchen Situation, bei dem Versuch, eine Ănderung vorzunehmen, entsteht der Eindruck einer mĂŒhseligen Aufgabe. Man kann sich nicht sicher sein, dass man nichts kaputt macht, da die jQuery-Selektoren von der vom Server erzeugten HTML-Struktur abhĂ€ngen.
Am anderen Ende des Spektrums stehen einfache Webseiten, die nur ein wenig InteraktivitĂ€t oder dynamische Inhalte benötigen. In solchen FĂ€llen wĂŒrde ich ebenfalls nicht standardmĂ€Ăig jQuery verwenden, da mit nativen APIs viel mehr möglich ist.
Selbst wenn ich etwas MĂ€chtigeres brauche, suche ich nach einer spezialisierten Bibliothek, wie fĂŒr Ajax oder fĂŒr Animationen. Das ist einfacher, als die gesamte jQuery-Bibliothek fĂŒr ein kleines StĂŒck FunktionalitĂ€t zu laden.
Ich denke, das beste Argument fĂŒr die Verwendung von jQuery ist, dass es eine umfassende FunktionalitĂ€t fĂŒr die Frontend-Arbeit einer Webseite bietet. Anstatt verschiedene native APIs oder spezialisierte Bibliotheken zu lernen, kann man sich einfach die jQuery-Dokumentation durchlesen und ist sofort produktiv.
Der imperative Ansatz lĂ€sst sich schlecht skalieren, ist aber einfacher zu erlernen als der deklarative Ansatz anderer Bibliotheken. FĂŒr eine Website mit klar begrenzten Möglichkeiten ist es besser, jQuery anzuwenden und in Ruhe zu arbeiten: Die Bibliothek erfordert keine komplexe Zusammenstellung oder Kompilierung.
DarĂŒber hinaus ist jQuery in FĂ€llen nĂŒtzlich, in denen man sich sicher ist, dass die Seite im Laufe der Zeit nicht komplexer wird, und wenn einen die native FunktionalitĂ€t nicht interessiert, die definitiv mehr Code erfordert als jQuery.
Sie können diese Bibliothek auch verwenden, wenn Sie alte Versionen von IE unterstĂŒtzen mĂŒssen. Dann wird jQuery Ihnen dienen wie in den Zeiten, als IE der beliebteste Browser war.
Ein Blick in die Zukunft
jQuery wird noch lange nicht verschwinden. Es , und viele Entwickler ziehen es vor, ihre API zu nutzen, selbst wenn native Methoden verfĂŒgbar sind. Die Bibliothek hat einer ganzen Generation von Entwicklern geholfen, Websites zu erstellen, die in allen Browsern funktionieren. Und obwohl sie in vielen Aspekten durch neue Bibliotheken, Frameworks und Paradigmen ersetzt wurde, hat jQuery eine enorme positive Rolle bei der Schaffung des modernen Web gespielt.
Wenn sich die FunktionalitĂ€t von jQuery nicht wesentlich Ă€ndert, ist es sehr wahrscheinlich, dass die Nutzung der Bibliothek in den nĂ€chsten Jahren weiterhin langsam, aber stetig abnehmen wird. Neue Websites werden in der Regel von Anfang an mit moderneren Frameworks erstellt, und die passenden Anwendungsszenarien fĂŒr jQuery treten immer seltener auf.
Einigen gefĂ€llt die IntensitĂ€t der Veraltung von Werkzeugen fĂŒr die Webentwicklung nicht, aber fĂŒr mich ist das ein Zeichen schnellen Fortschritts. jQuery hat uns ermöglicht, vieles besser zu machen. Das gilt auch fĂŒr ihre Nachfolger.
Quelle: habr.com
