Un moyen simple de mettre en cache des sélecteurs dans des objets à l'aide de jQuery_jquery

Lorsqu'ils utilisent une bibliothèque comme jQuery, les développeurs utilisent souvent des sélecteurs pour accéder et manipuler des éléments dans le DOM. Lorsqu'une sélection est consultée à plusieurs reprises sur la page, c'est une bonne idée de la mettre en cache pour de meilleures performances.

Voyons un exemple,

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();
  });
});

Vous avez peut-être remarqué que les identifiants « un sélecteur » et « un autre élément » sont mentionnés deux fois dans l'extrait ci-dessus. En enregistrant ces sélecteurs dans des variables, vous pouvez les rendre réutilisables et éviter des opérations de sélection répétées.

Lorsque vous commencez à accumuler divers sélecteurs dans votre code jQuery, vous pouvez apprécier à quel point il est agréable de mettre en cache les sélecteurs dans les objets - sous forme de paires clé-valeur. Cela vous permet d'y accéder plus facilement depuis n'importe où dans votre script, et la maintenance de ces sélecteurs est un jeu d'enfant.

Après avoir mis en cache le sélecteur, le code amélioré ressemblera à ceci,

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();
  });
});

Depuis que le sélecteur a été mis en cache dans la variable, l'arborescence DOM n'a plus besoin d'être parcourue à plusieurs reprises pour trouver l'élément sur lequel opérer. L'objet 'someNamespace_Dom' peut être utilisé pour ajouter davantage de paires clé-valeur, ce qui facilite la maintenance.