Sélecteurs jQuery stockés en tant que propriétés dans un espace de noms

Question

Je travaille sur la refactorisation d'un espace de noms JavaScript pour un site. L'espace de noms utilise jQuery pour les sélecteurs et les événements. Voici un exemple.

MyNamespace = { 
    eventElements : { 
     headerSectionA : $("h1.section-a"); 
     headerSectionB : $("h1.section-b"); 
    } 
    sectionA : function() { 
     // do stuff for section A here, such as 
     MyNamespace.eventElements.headerSectionA.click(function(){ 
      // behavior A 
     }); 
    } 
    sectionB : function() { 
     // do stuff for section B here, such as 
     MyNamespace.eventElements.headerSectionB.click(function(){ 
      // behavior B 
     }); 
    } 
} 

Ceci est un échantillon de code distillé. Imaginez de nombreux eventsElements et de nombreuses sections de site qui utilisent des sous-ensembles de ces eventElements.

Ma question est de savoir si jQuery parcourt le DOM pour tous les eventElements chaque fois que ce script se charge, ou seulement lorsqu'une fonction qui utilise cet événement eventElement est appelée.

Je souhaite éviter la perte de performances, mais je ne suis pas sûr que jQuery traverse le DOM lorsqu'une propriété eventElement est déclarée ou uniquement lorsqu'un événement est attaché à l'événement eventElement.

S'il y a une perte de performance en utilisant l'approche ci-dessus, alors je branche dans l'espace de noms pour déclarer uniquement les eventElements dans le contexte de la section qui utilise ces eventElements.

Answer 1

JavaScript est exécuté lorsque des expressions sont rencontrées. Alors oui, si cela est dans votre fichier script:

MyNamespace = { 
    eventElements : { 
     headerSectionA : $("h1.section-a"), 
     headerSectionB : $("h1.section-b") 
    } 
    // ... 
} 

Alors $ est appelée et le DOM est traversèrent au moment où le script est exécuté. Ceci est mauvais sur un niveau de couple:

• la mise en place du script est tributaire du DOM être prêt à traverser (FYI existe toute raison $(document).ready est de contourner ce problème)
• les DOM est traversé avant ces éléments doivent être référencés

Je l'adapter à seulement faire autant de travail que nécessaire:

MyNamespace = { 
    eventElements : { 
     headerSectionA : "h1.section-a", // THESE BECOME STRINGS 
     headerSectionB : "h1.section-b" 
    } 
    ,// ... 
    sectionA : function() { 
     // Call $ as late as possible 
     $(MyNamespace.eventElements.headerSectionA).click(function(){ 
      // ... 
     }); 
    } 
} 

maintenant, si pour une raison quelconque MyNamespace.eventElements.headerSectionAdoit être un objet jQuery avantsectionA est appelé, alors vous devriez au moins attendre de les initialiser jusqu'à ce que le DOM est prêt, afin de réduire la fragilité du script lui-même:

// namespace defined as before 
// wait until DOM is ready 
$(document).ready(function() { 
    for(var selector in MyNamespace.eventElements) { 
     MyNamespace.eventElements[selector] = $(MyNamespace.eventElements[selector]) 
    } 
})