Share
Als Herausgeber von Nettuts + kann ich eine Menge Code von Tutorials einreichen. Trotz der Tatsache, dass jQuery bereits seit Jahren verfügbar ist, gibt es immer noch einen häufigen Fehler, den ich mehr als alles andere sehe.
Betrachten Sie den folgenden Code:
Accentsconagua
$ ('. nav a'). click (function () $ (this) .hide (); $ (this) .css ('color', 'red'); $ (this) .show (); alert.) ('etwas anderes'); $ (this) .hide (); false zurückgeben;); Der obige Code ist aus verschiedenen Gründen zu kompliziert. Machen Sie sich keine Sorgen darüber, was der Code tatsächlich tut (es ist Kauderwelsch). Stattdessen möchte ich, dass Sie alle diese Verweise betrachten $ (das).
Stellen Sie sich das DOM als einen Pool vor.
Stellen Sie sich das DOM als einen Pool vor. Erinnerst du dich daran, als du ein Kind warst und in den Pool nach Münzen suchst, während deine Eltern sich benahmen, als würden sie zuschauen? Das wird unser realer Vergleich sein.
Bei jeder Verwendung $ ('. someClass'), jQuery springt in den Pool (DOM) und sucht nach dieser Münze (oder Knoten). Wenn Sie also innerhalb einer Funktion mehrfach darauf verweisen, ist das viel Tauchen. Oder, um den Vergleich der realen Welt abzuschneiden, ist dies verschwenderisch und unnötig. Warum sollten Sie jQuery anrufen, wenn Sie es nicht benötigen? Sie sollten das ausführen, was wir nennen? Caching.?
$ ('. nav a'). click (Funktion (e) var anker = $ (this); Anker .hide () .css ('color', 'red') .show (); alert ('etwas anderes) '); anchor.hide (); e.preventDefault ();); Das ist viel sauberer. Moderne Browser-Engines sind zwar heutzutage unglaublich schnell und werden Ihre schlechte Codierung so gut wie möglich ausgleichen, Sie sollten sich jedoch weiterhin bemühen, effizienten Code zu schreiben und nicht all die Energie zu verschwenden, die in den Pool springt. Nun, technisch gesehen, wenn Sie jQuery einen DOM-Knoten übergeben, wie diese, Es fragt das DOM nicht erneut ab. Es wird einfach ein jQuery-Objekt zurückgegeben.
Nur weil der Leistungsunterschied zwischen den beiden ehrlich vernachlässigbar ist, schreiben wir sauberen Code für uns.
Betrachten wir ein etwas komplizierteres Beispiel: Registerkarten.
$ ('. tabs li'). css ('position', 'relative'); $ ('. tabs li'). click (function () $ ('. tabs li'). removeClass ('active'); $ (this) .addClass ('active'); $ (this) .load ( 'someHref', function () ); // example $ (this) .css ('top', '1px');); Dieser Code ist überall vorhanden. Es ist hässlich und ineffizient. Fix Nummer eins ist, all das CSS loszuwerden. Sie würden das Styling nur in Ihrem JavaScript platzieren, wenn die Werte dynamisch erstellt wurden. Wenn Sie beispielsweise die genaue Position berechnen müssen, die ein Element auf dem Bildschirm anzeigen soll, können Sie dies verwenden .css ('left', berechneter Wert). In diesem Fall kann alles in ein externes Stylesheet exportiert werden. Das lässt uns mit:
$ ('. tabs li'). click (function () $ ('. tabs li'). removeClass ('active'); $ (this) .load ('someHref', function () ); / / example $ (this) .addClass ('active');); Als nächstes fragen wir immer wieder nach dem DOM .Tabs li und $ (das)? Hör auf zu springen im Pool. Lassen Sie uns? Cache? die Lage der .Tabs li.
var tabs = $ ('. tabs li'); tabs.click (function () tabs.removeClass ('active'); $ (this) .load ('someHref', function () ); // Beispiel $ (this) .addClass ('active'); ); Besser, aber wir rufen immer noch an $ (das) zweimal, was keine große Sache ist. Wenn Sie es jedoch nicht frühzeitig im Keim ersticken, steigt diese Zahl schnell an.
var tabs = $ ('. tabs li'); tabs.click (function () var tab = $ (this); tabs.removeClass ('active'); tab.addClass ('active') .load ('someHref', function () ); // Beispiel ); Eine andere (etwas weniger optimierte) Option wäre die Filterung.
var tabs = $ ('. tabs li'); tabs.click (function () tabs.removeClass ('active') .filter (this) .addClass ('active') .load ('someHref', function () ); // example); Der Unterschied besteht in diesem Fall darin, dass nicht referenziert wird $ (das), wir benutzen die Filter() Methode, um die Auflistung der Listenelemente auf nur die angeklickte zu reduzieren.
Ja, die Welt wird nicht enden, wenn Sie sich darauf beziehen $ ('. Tabs) mehrmals innerhalb einer Funktion. JavaScript-Engines sind heutzutage superschnell. Wenn Sie die Leistung tausendfach testen sollten, kann der Unterschied bei der Ausführung einige hundert Millisekunden betragen. Trotzdem bleibt die Frage: Warum??
Manchmal, wenn wir massive Abstraktionen wie jQuery verwenden, kann man das leicht vergessen $ ('. tabs') ist eine eigentliche Funktion, die viel Code ausführt. Es sollte auch beachtet werden, dass diese Konzepte generell für JavaScript gelten - nicht nur für jQuery.
Verwenden Sie die Caching oben beschriebene Techniken zum Schreiben von Cleaner-Code? für sich selbst.
