Keine Frage, jQuery erleichtert uns Entwicklern das Leben ungemein. Doch trotzdem stellt sich immer wieder die Frage, ob jQuery wirklich immer benötigt wird oder man nicht doch mit nativem JavaScript besser beraten ist. Denn in den meisten Fällen geht es doch um Klassenhandling bzw. DOM-Manipulationen. Außerdem dürfen in der heutigen Zeit auf keinen Fall die mobilen Endgeräte außer Acht gelassen werden! Und besonders dort ist es wichtig, jedes Kilobyte zu sparen, damit die Seite auch bei schlechter Verbindung schnell geladen werden kann.
Klar kann man jetzt sagen, dass jQuery sämtliche Browser unterstützt und man keine aufwendigen Workarounds entwickeln muss, um zum Beispiel eine bestimmte Version des Internet Explorers nutzen zu können. Doch wir befinden uns mittlerweile im Jahre 2016, wo nicht mehr Browser wie IE 7 oder IE 8 unterstützt werden müssen. Moderne Browser bieten alle Funktionen, die gewöhnlich benötigt werden.
Mit Hilfe dieser Funktionen lassen sich auch sehr einfach die gewünschten Methoden von jQuery nachbauen. Einziger Nachteil ist, dass diese Funktionen zuerst implementiert werden müssen, doch beim Aufruf an sich sind die beiden Methoden identisch. Außerdem müssen die Methoden nur einmal entwickelt werden und lassen sich dann beliebig oft in weiteren Projekten verwenden.
Wie man in den folgenden Beispielen sieht, ist es nicht wirklich mehr zu schreiben, da die Methoden aus bestehen Projekten genommen werden können und die Methoden ähnlich aufgefunden werden. Dafür konnte man sich eine fast 100kB große Library sparen, die eine ganze Reihe an Methoden mit sich bringt, die in den meisten Fällen nicht von Nöten sind.
Beispiele
var getElem = function(selector){ |
return doc.querySelectorAll(selector); |
var hasClass = function (el, val) { |
return el !== null && el.classList.contains(val); |
var addClass = function (el, val) { |
return el.classList.add(val); |
var removeClass = function (el, val) { |
return el.classList.remove(val); |
var elem = getElem('CSS-Selector'); |
addClass(elem, 'css-klasse'); |
addClass(elem, 'css-klasse'); |
var elem = $('CSS-Selector'); |
elem.addClass('css-klasse'); |
elem.removeClass('css-klasse'); |
Performance
Im folgenden Beispiel wird der Unterschied zwischen JavaScript und jQuery sichtbar.
// performance testing function |
var performanceTest = function (func, funcDesc) { |
var start = new Date().getTime(); |
for (i = 0; i < 20000; ++i) { |
var end = new Date().getTime(), |
console.log(funcDesc + ': ' + time); |
var demoArray = document.querySelectorAll('div'); |
var jqueryEach = function () { |
$.each(demoArray, function (index, elem) { |
$(this).attr('data-count', i); |
var javaScriptEach = function () { |
for (var i = 0, len = demoArray.length; i < len; i++) { |
demoArray[i].setAttribute('data-count', i); |
performanceTest(javaScriptEach, 'javaScript') |
performanceTest(jqueryEach, 'jquery') |
Fazit
Man sollte sich immer die Frage stellen:
„Brauche ich diese Library wirklich oder kann ich es auch mit nativem JavaScript schreiben?“
In vielen Fällen kann man die Frage mit „nein“ beantworten und damit können oft Dateien, Ladezeiten und Versionsprobleme umgangen werden. Ebenso ist der Performance-Gewinn unserer Applikation deutlich höher, was aber nicht heißen soll, dass Libraries wie jQuery, AngularJS, Backbone etc. keine Berechtigung haben, in einigen Fällen machen sie durchaus Sinn und sind eine nützliche Unterstützung.
