Einfache Möglichkeit, Selektoren in Objekten mithilfe von jQuery_jquery zwischenzuspeichern

Bei der Verwendung einer Bibliothek wie jQuery verwenden Entwickler häufig Selektoren, um auf Elemente im DOM zuzugreifen und diese zu bearbeiten. Wenn auf der Seite wiederholt auf eine Auswahl zugegriffen wird, empfiehlt es sich, sie für eine bessere Leistung zwischenzuspeichern.

Sehen wir uns ein Beispiel an,

jQuery(document).ready(function() {
  jQuery('#some-selector').on('hover', function() {
    jQuery(this).fadeOut('slow').delay(400).fadeIn();
    console.log(jQuery(this).text());
  });
 
  jQuery('#another-element').on('hover', function() {
    jQuery(this).slideUp();
  });
 
  jQuery('#some-selector').on('click', function() {
    alert('You have clicked a featured element');
  });
 
  jQuery('#another-element').on('mouseout', function() {
    jQuery(this).slideUp();
  });
});

Vielleicht ist Ihnen aufgefallen, dass die IDs „some-selector“ und „another-element“ im obigen Snippet zweimal erwähnt werden. Indem Sie diese Selektoren in Variablen speichern, können Sie sie wiederverwendbar machen und wiederholte Auswahlvorgänge vermeiden.

Wenn Sie beginnen, verschiedene Selektoren in Ihrem jQuery-Code zu akkumulieren, werden Sie erkennen, wie schön es ist, Selektoren in Objekten zwischenzuspeichern – als Schlüssel-Wert-Paare. Dies erleichtert Ihnen den Zugriff von überall in Ihrem Skript und die Pflege dieser Selektoren ist ein Kinderspiel.

Nachdem der Selektor zwischengespeichert wurde, sieht der verbesserte Code folgendermaßen aus:

var someNamespace_Dom = {
  someSelector : 'jQuery("#some-selector")',
  anotherElement: 'jQuery("#another-element")',
};
 
jQuery(document).ready(function() {
  someNamespace_Dom.someSelector.on('hover', function() {
    jQuery(this).fadeOut('slow').delay(400).fadeIn();
    console.log(jQuery(this).text());
  });
  someNamespace_Dom.anotherElement.on('hover', function() {
    jQuery(this).slideUp();
  });
  someNamespace_Dom.someSelector.on('click', function() {
    alert('You have clicked a featured element');
  });
  someNamespace_Dom.anotherElement.on('mouseout', function() {
    jQuery(this).slideUp();
  });
});

Da der Selektor in der Variablen zwischengespeichert wurde, muss der DOM-Baum nicht mehr wiederholt durchlaufen werden, um das zu bearbeitende Element zu finden. Mit dem Objekt „someNamespace_Dom“ können weitere Schlüssel-Wert-Paare hinzugefügt werden, was die Wartung erleichtert.