Einsteigerfreundlicher Rat: Tauchen Sie nicht zu tief in jQuery ein

Als Redakteur für Nettuts+ kann ich in eingereichten Tutorials viel Code überprüfen. Obwohl es jQuery schon seit vielen Jahren gibt, gibt es einen häufigen Fehler, den ich immer noch am häufigsten sehe.

---

Beispiel #1

Bedenken Sie den folgenden Code:

$('.nav a').click(function() {
  $(this).hide();
  $(this).css('color', 'red');
  $(this).show();

  alert('something else');

  $(this).hide();

  return false;
});

Der obige Code ist aus mehreren Gründen übermäßig komplex. Machen Sie sich keine Gedanken darüber, was der Code tatsächlich tut (es ist Kauderwelsch). Stattdessen möchte ich, dass Sie sich alle Verweise auf $(this) ansehen.

Stellen Sie sich das DOM als einen Pool vor.

Stellen Sie sich das DOM als einen Pool vor. Erinnern Sie sich noch an die Zeit, als Sie als Kind in den Pool sprangen und nach Münzen suchten, während Ihre Eltern so taten, als würden sie zuschauen? Dies wird unser Vergleich in der realen Welt sein.

Jedes Mal, wenn $('.someClass') verwendet wird, springt jQuery in den Pool (DOM) und sucht nach dieser Münze (oder diesem Knoten). Wenn Sie also in einer Funktion mehrmals darauf verweisen, müssen Sie viel tauchen. Oder, im realen Vergleich: verschwenderisch und unnötig. Warum jQuery aufrufen, wenn es nicht benötigt wird? Sie sollten das tun, was wir „Caching“ nennen.

$('.nav a').click(function(e) {
   var anchor = $(this);

   anchor
      .hide()
     .css('color', 'red')
     .show();

   alert('something else');

   anchor.hide();

   e.preventDefault();

});

Auf diese Weise ist es viel sauberer. Während moderne Browser-Engines heutzutage unglaublich schnell sind und ihr Bestes tun, um Ihre schlechte Codierung auszugleichen, sollten Sie dennoch danach streben, effizienten Code zu schreiben und zu vermeiden, Ihre ganze Energie damit zu verschwenden, im Pool herumzuspringen. Wenn Sie jQuery nun technisch gesehen einen DOM-Knoten wie this übergeben, wird das DOM nicht erneut abgefragt. Es gibt lediglich ein jQuery-Objekt zurück.

Ehrlich gesagt, da der Leistungsunterschied zwischen den beiden vernachlässigbar ist, schreiben wir uns selbst sauberen Code.

Beispiel 2

Betrachten wir ein etwas komplexeres Beispiel: Tabs.

$('.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. Es ist hässlich und ineffizient. Die erste Lösung besteht darin, das gesamte CSS zu entfernen. Stile können nur dann in JavaScript platziert werden, wenn der Wert dynamisch erstellt wird. Wenn Sie beispielsweise die genaue Position eines Elements auf dem Bildschirm berechnen müssen, können Sie .css('left',calculatedValue) verwenden. In diesem Fall können Sie alles in ein externes Stylesheet exportieren. Das lässt uns zurück:

$('.tabs li').click(function() {
   $('.tabs li').removeClass('active');
   $(this).load('someHref', function() {} ); // example
   $(this).addClass('active');
});

Als nächstes fragen wir das DOM weiterhin nach .tabs li und .tabs li 和 $(this)？别再在泳池里跳了。让我们“缓存” .tabs li ab? Hören Sie auf, in den Pool zu springen. Lassen Sie uns den Speicherort von .tabs li zwischenspeichern.

var tabs = $('.tabs li');

tabs.click(function() {
   tabs.removeClass('active');
   $(this).load('someHref', function() {} ); // example
   $(this).addClass('active');
});

ist besser, aber wir rufen $(this) trotzdem zweimal an, keine große Sache. Meiner Erfahrung nach kann diese Zahl jedoch schnell ansteigen, wenn dies nicht frühzeitig im Keim erstickt wird.

var tabs = $('.tabs li');

tabs.click(function() {
   var tab = $(this);
   tabs.removeClass('active');
   tab.addClass('active')
     .load('someHref', function() {} ); // example
});

Filter

Eine weitere (weniger optimierte) Option ist die Verwendung von Filtern.

var tabs = $('.tabs li');

tabs.click(function() {
   tabs.removeClass('active')
       .filter(this)
       .addClass('active')
       .load('someHref', function() {} ); // example
});

Der Unterschied in diesem Beispiel besteht darin, dass wir statt auf $(this)，而是使用 filter() zu verweisen, die Methode filter() verwenden, um die Sammlung von Listenelementen auf nur die angeklickten Elemente zu reduzieren.

---

Was sollten Sie einnehmen

Ja, die Welt geht nicht unter, wenn Sie in einer Funktion mehrmals auf $('.tabs) verweisen. JavaScript-Engines sind heutzutage sehr schnell. Wenn Sie die Leistung tausende Male testen würden, könnte der Unterschied in der Ausführung einige hundert Millisekunden betragen. Aber die Frage bleibt: Warum sollten Sie das tun?

Wenn wir mit vielen Abstraktionen wie jQuery arbeiten, vergisst man manchmal leicht, dass $('.tabs') eine tatsächliche Funktion ist, die viel Code ausführt. Es sollte auch beachtet werden, dass diese Konzepte für JavaScript im Allgemeinen gelten, nicht nur für jQuery.

Schreiben Sie sich saubereren Code mit den caching oben genannten Techniken.

Das obige ist der detaillierte Inhalt vonEinsteigerfreundlicher Rat: Tauchen Sie nicht zu tief in jQuery ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!