Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
Advertisement
  1. Code
  2. Web Development
Code

14 hilfreiche jQuery-Tricks, Hinweise und bewährte Vorgehensweisen

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Wenn es etwas Schlechtes an jQuery gibt, dann ist das Einstiegsniveau so erstaunlich niedrig, dass es eher diejenigen anzieht, die kein JavaScript-Wissen haben.  Das ist zum einen fantastisch. Auf der anderen Seite führt dies jedoch auch zu einem verpatzten, ehrlich gesagt widerwärtig schlechten Code (von dem ich einige selbst geschrieben habe!).

Aber das ist OK; erschreckend schlechter Code, der sogar Ihre Großmutter zum Keuchen bringen würde, ist ein Durchgang. Der Schlüssel ist, über den Hügel zu klettern, und das werden wir im heutigen Tutorial besprechen.


1. Methoden Gibt das jQuery-Objekt zurück

Beachten Sie, dass die meisten Methoden das jQuery-Objekt zurückgeben. Dies ist äußerst hilfreich und ermöglicht die so häufig verwendete Verkettungsfunktion.

Da wir wissen, dass das jQuery-Objekt immer zurückgegeben wird, können wir damit manchmal überflüssigen Code entfernen. Betrachten Sie zum Beispiel den folgenden Code:

Der Grund, warum wir die Position des someDiv-Elements "zwischenspeichern", besteht darin, die Anzahl der Male zu begrenzen, die das DOM für dieses Element durchlaufen muss, auf einmal.

Der obige Code ist vollkommen in Ordnung. Sie können die beiden Linien jedoch genauso leicht zu einer einzigen kombinieren, während Sie dasselbe Ergebnis erzielen.

Auf diese Weise verbergen wir immer noch das someDiv-Element, aber die Methode gibt auch das jQuery-Objekt zurück, auf das über die someDiv-Variable verwiesen wird.


2. Die Suchauswahl

Solange Ihre Selektoren nicht lächerlich schlecht sind, optimiert jQuery sie optimal, und Sie müssen sich normalerweise nicht allzu viele Sorgen machen. Trotzdem gibt es einige Verbesserungen, die die Leistung Ihres Skripts ein wenig verbessern können.

Eine solche Lösung ist, wenn möglich, die find() -Methode zu verwenden. Der Schlüssel ist weg von jQuery zu zwingen, seine Sizzle-Engine zu verwenden, wenn dies nicht notwendig ist.  Sicher wird es Zeiten geben, in denen dies nicht möglich ist - und das ist in Ordnung; Wenn Sie jedoch keinen zusätzlichen Aufwand benötigen, suchen Sie nicht danach.

Die neuesten modernen Browser unterstützen QuerySelectorAll, sodass Sie CSS-ähnliche Selektoren übergeben können, ohne dass dazu jQuery erforderlich ist. jQuery selbst prüft auch diese Funktion.

Ältere Browser, nämlich IE6 / IE7, bieten jedoch verständlicherweise keinen Support. Dies bedeutet, dass diese komplizierteren Selektoren die komplette Sizzle-Engine von jQuery auslösen, die zwar brillant ist, aber auch etwas mehr Aufwand verursacht.

Sizzle ist eine brillante Masse Code, die ich niemals verstehen kann. In einem Satz muss der Selektor jedoch zuerst in ein "Array" umgewandelt werden, das aus jeder Komponente des Selektors besteht.

Dann beginnt es von rechts nach links, jedes Element mit regulären Ausdrücken zu entschlüsseln. Das bedeutet auch, dass der ganz rechte Teil Ihres Selektors so genau wie möglich sein sollte - zum Beispiel eine ID oder ein Tag-Name.

Fazit, wenn möglich:

  • Halten Sie Ihre Selektoren einfach
  • Verwenden Sie die find() -Methode. Auf diese Weise können wir die systemeigenen Funktionen des Browsers verwenden, anstatt Sizzle zu verwenden.
  • Optimieren Sie bei Verwendung von Sizzle den Bereich ganz rechts Ihres Selektors so weit wie möglich.

Kontext stattdessen?

Sie können Ihren Selektoren auch einen Kontext hinzufügen, z.

Dieser Code weist jQuery an, eine Auflistung aller Elemente mit einer Klasse von someElements - die Kinder von someContainer sind - in jQuery zu umschließen. Die Verwendung eines Kontexts ist eine hilfreiche Methode, um die DOM-Durchquerung zu begrenzen. JQuery verwendet jedoch im Hintergrund stattdessen die find-Methode.

Beweis


3. Missbrauche $(this) nicht

Ohne Kenntnis der verschiedenen DOM-Eigenschaften und -Funktionen kann das jQuery-Objekt leicht unnötig missbraucht werden. Zum Beispiel:

Wenn das jQuery-Objekt nur auf das ID-Attribut des Ankertags zugreifen muss, ist dies verschwenderisch. Besser bei "rohem" JavaScript bleiben.

Bitte beachten Sie, dass es drei Attribute gibt, auf die immer über jQuery zugegriffen werden sollte: "src", "href" und "style". Diese Attribute erfordern die Verwendung von getAttribute in älteren IE-Versionen.

Beweis

Mehrere jQuery-Objekte

Noch schlimmer ist das wiederholte Abfragen des DOM und das Erstellen mehrerer jQuery-Objekte.

Hoffentlich wissen Sie bereits, wie ineffizient dieser Code ist. Wenn nicht, ist das okay. wir lernen alle. Die Antwort besteht darin, entweder eine Verkettung zu implementieren oder den Ort von #elem zu #elem.


4. jQuery's Shorthand Ready-Methode

Mit jQuery ist es lächerlich einfach zu hören, wann das Dokument zur Bearbeitung bereit ist.

Es ist jedoch sehr wahrscheinlich, dass Sie auf eine andere, verwirrendere Funktion zum Einwickeln gestoßen sind.

Obwohl letzteres etwas weniger lesbar ist, sind die beiden obigen Ausschnitte identisch. Glaub mir nicht Überprüfen Sie einfach die jQuery-Quelle.

rootjQuery ist einfach ein Verweis auf das Root-jQuery (document). Wenn Sie einen Selektor an die jQuery-Funktion übergeben, wird festgelegt, welchen Selektortyp Sie übergeben haben: Zeichenfolge, Tag, ID, Funktion usw.  Wenn eine Funktion übergeben wurde, ruft jQuery die ready() -Methode auf und übergibt Ihre anonyme Funktion als Selektor.


5. Bewahren Sie Ihren Code auf

Bei der Entwicklung von Code für die Verteilung ist es immer wichtig, mögliche Namenskollisionen auszugleichen. Was würde passieren, wenn ein nach Ihrem importiertes Skript auch eine $ -Funktion hätte? 

Schlechte Dinge!Die Antwort besteht darin, entweder noConflict() von jQuery aufzurufen oder Ihren Code in einer selbstaufrufenden anonymen Funktion zu speichern und dann jQuery an sie zu übergeben.

Methode 1: NoConflict

Seien Sie vorsichtig mit dieser Methode und verwenden Sie sie nicht, wenn Sie Ihren Code verteilen. Das würde den Benutzer Ihres Skripts wirklich verwirren! :)

Methode 2: Übergeben von jQuery

Die letzte Parens unten ruft die Funktion automatisch auf - function(){}(). Beim Aufruf der Funktion übergeben wir jedoch auch jQuery, das dann durch $ dargestellt wird.

Methode 3: Übergeben von $ über die Ready-Methode


6. Sei klug

Denken Sie daran - jQuery ist nur JavaScript. Gehen Sie nicht davon aus, dass es die Fähigkeit hat, Ihre fehlerhafte Codierung zu kompensieren. :)

Dies bedeutet, dass, genauso wie Dinge wie JavaScript for Anweisungen optimiert werden müssen, dasselbe für each Methode von jQuery gilt. Und warum sollten wir nicht? Es ist nur eine Hilfsmethode, die hinter den Kulissen eine for-Anweisung erzeugt.

Schrecklich

  1. Sucht für jede Iteration nach anotherDiv
  2. Ruft die innerHTML-Eigenschaft zweimal ab
  3. Erstellt ein neues jQuery-Objekt, um auf den Text des Elements zuzugreifen.

Besser

Auf diese Weise müssen Sie in der each Methode (for) nur einen neuen Schlüssel zu einem Array hinzufügen ... anstatt das DOM abzufragen, die innerHTML-Eigenschaft des Elements zweimal zu verwenden usw.

Dieser Tipp ist generell eher JavaScript-basiert als jQuery-spezifisch. Es ist wichtig zu wissen, dass jQuery schlechte Codierung nicht kompensiert.

Dokumentfragmente

Wenn wir gerade dabei sind, können Dokumentfragmente auch für diese Art von Situationen verwendet werden.

Der Schlüssel hier ist, dass es mehrere Möglichkeiten gibt, einfache Aufgaben wie diese auszuführen, und jede hat ihre eigenen Leistungsvorteile von Browser zu Browser.  Je mehr Sie sich an jQuery halten und JavaScript lernen, desto öfter beziehen Sie sich auf die nativen Eigenschaften und Methoden von JavaScript. Und wenn ja, das ist fantastisch!

jQuery bietet eine erstaunliche Abstraktionsebene, die Sie nutzen sollten. Dies bedeutet jedoch nicht, dass Sie dazu gezwungen werden, seine Methoden zu verwenden.  In dem obigen Fragmentbeispiel verwenden wir beispielsweise each Methode von jQuery. Wenn Sie es vorziehen, stattdessen eine for oder while-Anweisung zu verwenden, ist das auch in Ordnung!

Bedenken Sie dabei, dass das jQuery-Team diese Bibliothek stark optimiert hat. Die Debatten über jQuerys each() und die native for-Anweisung sind dumm und trivial.  Wenn Sie jQuery in Ihrem Projekt verwenden, sparen Sie Zeit und verwenden Sie ihre Hilfsmethoden. Dafür sind sie da! :)


7. AJAX-Methoden

Wenn Sie gerade erst anfangen, sich mit jQuery zu beschäftigen, können die verschiedenen AJAX-Methoden, die es uns zur Verfügung stellt, etwas abschreckend wirken. obwohl sie nicht brauchen In der Tat handelt es sich bei den meisten nur um Hilfsmethoden, die direkt zu $.ajax führen.

  • get
  • getJSON
  • post
  • ajax

Sehen wir uns als Beispiel getJSON an, mit dem wir JSON abrufen können.

Hinter den Kulissen ruft diese Methode zunächst $.get auf.

$.get kompiliert dann die übergebenen Daten und ruft erneut die $.ajax-Methode "master" (Art) auf.

Schließlich leistet $.ajax eine enorme Menge an Arbeit, damit wir erfolgreich asynchrone Anfragen über alle Browser hinweg ausführen können!

Dies bedeutet, dass Sie die $.ajax-Methode für alle Ihre AJAX-Anforderungen genauso direkt und ausschließlich verwenden können.  Die anderen Methoden sind einfach Hilfsmethoden, die dies ohnehin tun. Wenn Sie möchten, schneiden Sie den mittleren Mann aus. Es ist in keiner Weise ein wichtiges Thema.

Total gut

Mikroskopisch effizienter


8. Zugriff auf native Eigenschaften und Methoden

Sie haben also ein bisschen JavaScript gelernt und gelernt, dass Sie beispielsweise auf Ankertags direkt auf Attributwerte zugreifen können:

Das einzige Problem ist, dass dies nicht funktioniert, wenn Sie mit jQuery auf die DOM-Elemente verweisen, oder? Na natürlich nicht.

Funktioniert nicht

Wenn Sie also auf das Attribut href (oder auf eine andere native Eigenschaft oder Methode) zugreifen müssen, haben Sie einige Optionen.

Die get-Methode ist besonders hilfreich, da sie Ihre jQuery-Sammlung in ein Array übersetzen kann.


9. AJAX-Anforderungen mit PHP erkennen

Natürlich können wir uns bei der großen Mehrheit unserer Projekte nicht nur bei der Validierung oder bei AJAX-Anfragen auf JavaScript verlassen. Was passiert, wenn JavaScript deaktiviert ist?  Aus diesem Grund ist es eine übliche Technik, zu ermitteln, ob eine AJAX-Anforderung mit der serverseitigen Sprache der Wahl erfolgt ist.

jQuery macht dies lächerlich einfach, indem ein Header innerhalb der $.ajax-Methode festgelegt wird.

Mit diesem Headerset können wir nun PHP (oder eine andere Sprache) verwenden, um nach diesem Header zu suchen und entsprechend vorzugehen. Dazu prüfen wir den Wert von $_SERVER['HTTP_X_REQUESTED_WITH']

Verpackung


10. jQuery und $

Haben Sie sich jemals gefragt, warum / wie Sie jQuery und $ austauschbar verwenden können? Um Ihre Antwort zu finden, zeigen Sie die jQuery-Quelle an und scrollen Sie ganz nach unten. Dort sehen Sie:

Das gesamte jQuery-Skript ist natürlich in eine selbstausführende Funktion eingeschlossen, sodass das Skript die Anzahl der globalen Variablen so weit wie möglich begrenzen kann. Dies bedeutet jedoch auch, dass das jQuery-Objekt außerhalb der anonymen Wrapping-Funktion nicht verfügbar ist.

Um dies zu beheben, wird jQuery für das globale window objekt verfügbar gemacht. Dabei wird auch ein Alias - $ - erstellt.


11. Bedingtes Laden von jQuery

HTML5 Boilerplate bietet einen praktischen One-Liner, der eine lokale Kopie von jQuery lädt, wenn aus irgendeinem Grund Ihr CDN ausfällt.

Um den Code oben zu "formulieren": Wenn window.jQuery nicht definiert ist, muss beim Herunterladen des Skripts vom CDN ein Problem aufgetreten sein. Fahren Sie in diesem Fall auf der rechten Seite des Operators && fort und fügen Sie ein Skript ein, das auf eine lokale Version von jQuery verweist.


12. jQuery Filters

Hinweis: jQuery.expr [':'] ist einfach ein Alias für jQuery.expr.filters.


13. Eine einzelne Hover-Funktion

Ab jQuery 1.4 können wir jetzt nur eine einzige Funktion an die hover-Methode übergeben. Vorher waren sowohl die In- als auch die Out-Methode erforderlich.

Vor

Jetzt

Beachten Sie, dass dies kein alter und neuer Deal ist. Häufig müssen Sie noch zwei Funktionen zum hover weitergeben, und das ist absolut akzeptabel.  Wenn Sie jedoch nur ein Element (oder ähnliches) umschalten müssen, können Sie durch Übergeben einer einzelnen anonymen Funktion eine Handvoll Zeichen speichern.


14. Übergeben eines Attributobjekts

Ab jQuery 1.4 können wir nun ein Objekt als zweiten Parameter der jQuery-Funktion übergeben. Dies ist hilfreich, wenn neue Elemente in das DOM eingefügt werden müssen. Zum Beispiel:

Vor

Nach dem

Dies spart nicht nur ein paar Zeichen, sondern sorgt auch für saubereren Code. Zusätzlich zu den Elementattributen können wir auch jQuery-spezifische Attribute und Ereignisse wie click oder text übergeben.


Danke fürs Lesen!
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.