Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Kurzer Hinweis - jQuery Anfänger: Lasst euren Hund in Frieden!

by
Difficulty:BeginnerLength:ShortLanguages:

German (Deutsch) translation by Jonas Hauss (you can also view the original English article)

Trotz der Tatsache, dass jQuery schon seit einigen Jahren verfügbar ist, gibt es genau dieses eine Problem, das alle anderen übertrifft.

Beispiel #1

Wir betrachten folgendes Beispiel:

Das obere Beispiel ist unnötig kompliziert. Die eigentliche Funktion des Beispiels ist uninteressant, es dient nur zur Veranschaulichung. In diesem Beispiel geht es lediglich um die diversen Referenzen zu $(this).

Stellen wir uns den Zugriff auf das DOM als das Holen eines Stöckchens von einem faulen Hund vor.

Ein Hund? Richtig. Der Hund ist bekanntlich der beste Freund des Menschen, eigentlich lieben sie es ja auch ihrem Stöckchen den ganzen Tag hinterher zu rennen. In diesem Fall aber nicht, unser Hund ist faul. Ihm macht es zwar nichts aus, ständig das Stöckchen wieder zu bringen, aber er ist auch froh, wenn er sich einfach faul hinlegen kann. So geht es auch jQuery bzw. JavaScript selbst. Kann es denn nicht mal etwas anderes machen? Als ständig das Stöckchen zu holen?

Rufen wir also $('.someClass') auf, dann wird unser armer Hund dazu genötigt das Stöckchen zu suchen und zu bringen. Wird dies mehrfach aufgerufen, dann muss der Hund immer und immer wieder das gleiche Stöckchen holen. Wie aufwändig, unnütz und verschwenderisch. Der arme Hund. Warum muss der Hund jedes Mal immer und immer wieder diesem Ding nachjagen, wenn er es bereits geholt hat? Genauso ist es auch beim Zugriff auf das DOM. Muss denn das Element auch jedes Mal aus dem DOM erneut geholt werden, obwohl dies gar nicht weiter nötig ist? Nein, wir lösen das Problem, indem wir das referenzierte DOM-Element “cachen.” So ist nur eine einmalige Referenz von Nöten.

Das wirkt doch schon viel aufgeräumter. Während die Engines moderner Browser extrem schnell sind und zum Gewissen Maße schlechten Code ausgleichen können, sollte man es einfach von Anfang an richtig machen und direkt effizienten Code schreiben. So kann sich der Hund den wichtigeren Aufgaben widmen. Faulenzen. Auch technisch gesehen benötigt jQuery das DOM-Element nicht noch ein zweites Mal, denn es wurde ja bereits referenziert. Freundlicherweise geben uns jQuery und auch JavaScript ein Objekt zurück, welches beliebig oft verwendet werden kann, da wir es ja “gecached” haben.

Auch wenn der Geschwindigkeitsunterschied ehrlich gesagt recht geringfügig ausfallen wird, sollten wir immer lesbaren Code schreiben, auch für uns selbst.

Beispiel #2

Stellen wir uns nun ein etwas komplizierteres Beispiel vor: Tabs.

Dieser Code ist einfach falsch. Er ist nicht wirklich lesbar und dazu auch noch ineffizient. Zuerst sollten wir das ganze CSS loswerden. Styling wird nur in JavaScript verwendet, wenn auch die Werte dynamisch generiert werden. Zum Beispiel, wenn wir die genaue Position eines Elementes auf dem Bildschirm bestimmen müssen, dann könnten wir unter anderem .css('left', calculatedValue) verwenden. Aber in diesem Fall kann alles in ein externes Stylesheet ausgelagert werden. So bleibt nun nur noch folgendes vom Code übrig:

Und schon wieder das gleiche Problem, wir fragen unseren Hund (DOM) mehrfach nach dem Stöckchen (.tabs li und $(this)) ab. Wir sollten wirklich aufhören ihn jedes Mal zu bitten, das Stöckchen zu holen, er hat es doch bereits gebracht! Also wird das DOM-Element (.tabs li) “gecached” und alle sind zufrieden.

Schon besser, aber wir rufen noch immer $(this) mehrfach auf, zwar nur zweifach. Dies ist noch nicht so schlimm, aber wenn sich die Anzahl plötzlich drastisch erhöht, dann wird der ganze Code ausgebremst. Machen wir es also gleich von Anfang an richtig:

Die Filter-Methode

Eine (etwas weniger optimierte) Methode wäre es einen Filter zu verwenden.

Der Unterschied besteht darin, dass wir anstatt $(this) referenzieren zu müssen, wir die filter() Methode verwenden um die Sammlung der Listenelemente nur auf das Element zu reduzieren, das auch wirklich angeklickt wurde.

Was wir uns merken sollten

Nun ja, es ist kein Weltuntergang, wenn wir innerhalb einer Funktion $('.tabs) mehrfach referenzieren. Wie schon erwähnt sind die JavaScript Engines heutzutage schnell genug um das auszugleichen. Dennoch könnte das “cachen” von Elementen einen gewissen Unterschied ausmachen.

Auch wenn jQuery wahnsinnig schnell sein mag, sollte das unser geschriebene Code auch sein. Sonst ist es jQuery natürlich auch nicht mehr. Womöglich haben die ein oder anderen einfach vergessen, dass $('.tabs') trotz allem ein normaler Funktionsaufruf ist, der jedes Mal ein gutes Stück an Code bewältigen muss. Außerdem betrifft das ja nicht nur das magische Universum von jQuery, sondern die ganze Welt von JavaScript.

Wir sollten einfach die oben genannte caching Technik verwenden um sauberen und lesbaren Code zu schreiben…auch für uns selbst. Immerhin haben wir Entwickler ja auch nicht wirklich Lust jedes Mal das Stöckchen zu suchen, oder etwa doch?

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.