Datum
19.08.2016
Dieser Beitrag wurde verfasst von:
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
(function(win, doc) { |
// getElem function |
var getElem = function(selector){ |
return doc.querySelectorAll(selector); |
}; |
// has class function |
var hasClass = function (el, val) { |
return el !== null && el.classList.contains(val); |
}; |
// add class function |
var addClass = function (el, val) { |
if (el === null) { |
return null; |
} |
return el.classList.add(val); |
}; |
// remove class function |
var removeClass = function (el, val) { |
if (el === null) { |
return null; |
} |
return el.classList.remove(val); |
}; |
// javascript |
var elem = getElem('CSS-Selector'); |
addClass(elem, 'css-klasse'); |
addClass(elem, 'css-klasse'); |
// jquery |
var elem = $('CSS-Selector'); |
elem.addClass('css-klasse'); |
elem.removeClass('css-klasse'); |
} (window, document)); |
Performance
Im folgenden Beispiel wird der Unterschied zwischen JavaScript und jQuery sichtbar.
(function(win, doc) { |
// performance testing function |
var performanceTest = function (func, funcDesc) { |
|
var start = new Date().getTime(); |
for (i = 0; i < 20000; ++i) { |
func.apply(); |
} |
var end = new Date().getTime(), |
time = end - start; |
console.log(funcDesc + ': ' + time); |
}; |
var demoArray = document.querySelectorAll('div'); |
// jQuery each |
var jqueryEach = function () { |
$.each(demoArray, function (index, elem) { |
$(this).attr('data-count', i); |
}); |
}; |
// javascript each |
var javaScriptEach = function () { |
for (var i = 0, len = demoArray.length; i < len; i++) { |
demoArray[i].setAttribute('data-count', i); |
} |
} |
// Aufruf |
performanceTest(javaScriptEach, 'javaScript') |
performanceTest(jqueryEach, 'jquery') |
} (window, document)); |
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.
Erfahren Sie mehr
Warum ist Inline-CSS und JavaScript-Code so schlecht?
Handlebars.js – Semantische Template Library
Multi Factor Authentication (Azure und SharePoint)
Wer benötigt ein Intranet?
Webinar: Google Cloud VMware Engine
Webcast: IASP – Nie wieder IBM Audit
Webinar: Looker Business Intelligence
NIS2 kommt: So bereiten Sie sich optimal vor
IPG
Neues Datenschutzgesetz – Schutz vor Sanktionen dank IAM
Web Analytics
Given/When/Then und ATDD - Eine Win-Win-Win-Situation!?
Tipps und Tricks mit Entity Framework
novaCapta
Wieso braucht es Change Management?
Atlassian passt Preise für Lizenzen an
IBM Cloud Pak for Data Accelerator
TIMETOACT
Deno – Das müsst ihr über die Laufzeitumgebung wissen
Mit End-to-End Testing zur einwandfreien Webanwendung
Graphentechnologie
TIMETOACT
9 Tipps & Tricks für Angular
Expert Consultant* für IAM / Cyber Security (DE/CH)
NIS2 Compliance Navigator
Power App für das hybride Büro
IPG
Verringerung von Cyberrisiken: Was ist versicherbar?
Microsoft Teams: mehr als Videotelefonie und Chat
Was Sie beim nächsten IT-Projekt beachten sollten
Ohne Programmierkenntnisse zum Entwickler werden
Grundlagen der Gestaltung
Nutzung der SharePoint REST API mit Microsoft Flow
Struktureller Aufbau eines Angular Modules
Spaltenformatierung in SharePoint: Column formatting vs. JS
Angular 5 Custom Filter in Angular Material Data-Table
Grundlagen der Datenmodellierung
Der wiederholte Bereich in Nintex Forms
Xamarin – plattformübergreifende App-Entwicklung
Migration IBM Lotus Notes zu Microsoft SharePoint
Vorgesetzte in Nintex per LDAP-Abfrage ermitteln
CQRS in ASP.Net MVC mit Entity Framework
Gefilterte Ansicht über Unterschiede in mehreren Spalten
Dateizugriffsrechte verwalten mit Microsoft RMS – Teil 4
Dateizugriffsrechte verwalten mit Microsoft RMS – Teil 3
Dateizugriffsrechte verwalten mit Microsoft RMS – Teil 2
Dateizugriffsrechte verwalten mit Microsoft RMS – Teil 1
novaCapta
Qualitätsmanagement - Dokumentation verwalten mit SharePoint
Umfragen in Teams mit Microsoft Forms
Zentralisiertes Logging – Simpler Logging-Stack mit Graylog
Angular Route-Guards
Change Management in IT-Projekten
Farben zur Optimierung des SharePoint-Kalender
Die Bedeutung einer Governance
Corporate News – Das zentrale Medium interner Kommunikation
SharePoint vs. TYPO3 – Sechs Gründe für SharePoint-Intranet
Was kann der neue Office 365 Planner – und was kann er nicht
Was ist Application Lifecycle Management (ALM)?
Fünf Tipps für mehr SharePoint-Adoption in Unternehmen
Produktiver lernen mit SharePoint
Fünf Tipps für eine verbesserte Software-Adoption
Drei Tipps für mehr SharePoint-Begeisterung
Hat Ihr Unternehmen einen Informations-Lebenszyklus?
SharePoint und Informationsarchitektur – worauf kommt es an?
Teams Extensions – Erstellen von Erweiterungen für Teams
Ich bin im Flow! – Eine Übersicht zu Microsoft Flow
SharePoint Framework Client-Side Webparts mit React
GraphQL – Die Alternative zu REST
Anhänge nach Datentyp in PowerApps einschränken
Testen von Angular Anwendungen mit Cypress
novaCapta
PDF-Konverter in Power Automate
Die Awareness kommt mit dem ersten Cyberangriff
Teil 5 - Einfluss von Cloud-native auf die Architekturarbeit
Siemens AG: SharePoint statt Excel bei komplexen Formularen
TIMETOACT
Top 10 CSS Tipps & Tricks in 2020
Duales Studium Business Administration (Sales & Marketing)
Advanced Admin Trial
Dresscode und eBagTag - Schutzkleidung maßgeschneidert
Wieviel IAM braucht ein Krankenhaus?
5 Gründe wieso Ihr Advanced Admin braucht
Advanced Admin Features
TIMETOACT
Das Domino v12 Betaprogramm ist eröffnet
TIMETOACT
10 Gründe für Managed Services mit edcom
Digitaler Wandel in der Öffentliche Verwaltung
Application Development für Individualsoftware
TIMETOACT erleichtert die Berichterstellung in IBM Cognos
TIMETOACT realisiert integrierte Versicherungs-Software
Cloud Architect (*)
Pflichtpraktikum Softwareentwicklung JavaScript (*)
Software Architekt (*)
Softwareentwickler JavaScript (*)
TIMETOACT
HCL Nomad Web im Verbund mit HCL SafeLinx
Digitalisierung und das richtige Mindset
Rethink! IT 2022!
Hurra, hurra - Angular Version 17 ist da!
