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
Russian
Italian
German
Polish
Estonian
Albanian
Bulgarian
Croatian
Czech
Danish
Dutch
English
French
Hungarian
Latvian
Norwegian
Portuguese
Romanian
Slovak
Slovenian
Spanish
Swedish