Mettre à jour les variables dans la portée de base de jQuery $(document).ready() ?

Question

J'essaie de trouver un moyen de minimiser le nombre de consultations du sélecteur. Mon problème est que j'ai une variable définie avec la base $(document).ready() qui doit être mise à jour dans les fonctions imbriquées dans $(document).ready().

Considérez cet exemple (EDIT : je l'ai mis à jour pour qu'il soit plus explicatif)

<script>

//var $current_page = $home_page;  **<--I DONT want to do this, going global
                                        and of course it doesn't work since
                                        $home_page isn't defined yet.**

$(document).ready(function() {
  var $home_page = $("#home-page");
  var $portfolio_page = $("#portfolio-page");
  var $about_page = $("#about-page");
  var $current_page = $home_page;  // **<--This variable, in this scope level,
                                   //      is what I want updated**

  $("#home-btn").click(function () {
   $current_page.stop()
   $current_page.show()
   $current_page.animate({
    duration: 360, 
    easing: 'easeInCirc',
    complete: function() {
        $(this).css({ top: -700 });
    }

   ); 

   $current_page = $home_page;
  });

   $("#portfolio-btn").click(function () {
       $current_page.stop()
       $current_page.show()
       $current_page.animate({
         duration: 360, 
         easing: 'easeInCirc',
         complete: function() {
             $(this).css({ top: -700 });
         }

   ); 

   $current_page = $portfolio_page; //<--This needs to somehow update the
                                    //   variable in the $(document).ready
                                    //   scope, but not global**
  });
 });
 <script>

Comment puis-je mettre à jour la variable $current_page ? sans en en faisant une variable globale ?

EDIT : Ceci est fait pour animer la div de la page actuelle lorsque vous cliquez sur un élément de menu. Oui, il manque des choses, oui cela peut ne pas avoir de sens. C'est juste un exemple, pas l'application réelle.

Je comprends que cet exemple est encore trivial pour les performances, ignorez ce fait. Je veux juste savoir comment réaliser cela, pas une leçon sur le fait que c'est la meilleure pratique ou performance. Merci à tous.

Answer 1

La fonction interne crée un fermeture capturant les variables de la portée dans laquelle il est défini. Donc, vous avez déjà ce que vous demandez...

...que ce soit une bonne idée ou pas est une autre question.

Pour commencer, vous n'êtes pas vraiment modification de la valeur dans le code que vous avez listé - vous assignez $current_page la même valeur avec laquelle il a déjà été initialisé.

Mais en supposant que vous avez juste omis le code que vous utiliseriez normalement pour choisir un différents valeur pour $current_page vous devez vous demander : est-ce que c'est vraiment nécessaire ? Vous effectuez une recherche basée sur l'ID d'un élément et mettez en cache une référence à cet élément dans une variable sans savoir si ou quand vous en aurez à nouveau besoin. Au mieux, cela entraîne une recherche potentiellement inutile ; au pire, cela peut entraîner une fuite de mémoire. Pourquoi ne pas simplement garder la trace de l'ID lui-même, et rechercher l'élément quand et où vous en avez réellement besoin ? Ne vous préoccupez pas des performances tant que vous ne rencontrez pas un problème de performance. problème ... ou vous pouvez constater que votre optimisation prématurée a causé plus de problèmes qu'elle n'en résout.

Il en va de même pour $home_page , $portfolio_page y $about_page - vous ralentissez (un peu) le chargement de votre page au cas où vous auriez besoin d'une référence à ces éléments plus tard, alors que vous pourriez tout aussi bien les consulter en cas de besoin.

Answer 2

• "Comment puis-je mettre à jour la variable $current_page sans en faire une variable globale ?"

  Vous pouvez le mettre à jour dès maintenant. La fonction interne click-handler peut modifier $current_page.

• "J'essaie de trouver un moyen de minimiser le nombre de consultations du Sélecteur."

  Mais il semble qu'en fait vous êtes sur le point d'en faire plus, si vous changez $current_page avec un autre sélecteur.

Mais ce que vous essayez de faire n'est pas vraiment clair.