Javascript scope help

Question

Je suis relativement nouveau à javascript alors s'il vous plaît soyez patient si ce que je demande est complètement stupide! J'essaye de faire un module simple. A l'intérieur du module je veux avoir un objet de configuration qui contient les paramètres pour le module. J'utilise aussi jquery. Les sélecteurs jquery ne fonctionnent que dans une fonction directement dans l'objet/module principal. Je comprends que javascript a une portée fonctionnelle, donc je suis surpris que je ne peux pas utiliser les sélecteurs de jquery n'importe où à l'intérieur du module.

EDIT: Je veux être en mesure de définir directement toutes mes configs à l'intérieur de l'objet configs en utilisant les sélecteurs jquery. De cette façon, je garde toutes les choses en désordre à l'intérieur d'un seul endroit et peut alors accéder à configs.whatever tout au long du reste du module. Pour le moment, les sélecteurs jquery ne fonctionnent pas dans le module configs.

var OB = function() { 

    var configs = { 
     'mode' : 'test', 
     'numOfSelects' : $('.mySelect').find('select').length, // This doesnt work 
    } 

    var getMode = function() { 
     return configs.mode; 
    } 

    function init() { 
     alert(configs.numOfSelects); // This alerts 0 until the following line 
     alert($('.mySelect').find('select').length); // This correctly alerts 2 
    }; 

    var handlers = { 
     successHandler : function() { 
      alert("Success"); 
     }, 
     errorHandler : function() { 
      alert("error"); 
     } 
    } 

    return { 
     init : init, 
     getMode : getMode 
    } 

}(); 

$(document).ready(function(){ 
    OB.init(); 
}); 

Answer 1

Il est pas que jQuery n'est pas portée - c'est que le code ne s'exécute pas quand vous pensez qu'il est . La variable config est définie lorsque cette fonction anonyme (var OB = function() {}()) est exécutée. Le DOM n'est pas encore prêt, de sorte que DOM traversal ne trouve rien. Lorsque vous effectuez la traversée DOM dans init(), elle n'est pas exécutée jusqu'à ce qu'elle soit explicitement appelée dans le gestionnaire $(document).ready(), à quel point ce DOM est configuré. C'est la différence que vous voyez.

Answer 2

EDIT: Il est drôle que ma première réponse ci-dessous était incorrecte parce que je ne l'ai pas remarqué deux petites parenthèses à la fin de la définition de OB, et il se trouve que ce sont le coupable. Vous définissez puis invoquez immédiatement OB, avant que le DOM ne soit entièrement chargé. Enlevez ces parenthèses et faites le changement que je suggère ci-dessous.

Appel OB() retourne un objet avec init et getMode, mais vous n'avez pas appelé OB(), vous avez seulement fait référence à OB. Essayez ceci à la place:

$(document).ready(function(){ 
    OB().init(); 
}); 

Aussi, je suppose que vous voulez vous référer plus tard à getMode. En particulier, vous obtiendrez la copie de getMode qui a accès à la portée locale à laquelle votre appel init() a accès. Pour ce faire, vous devez stocker le résultat de l'appel OB() pour une utilisation ultérieure:

var ob; 

$(document).ready(function(){ 
    ob = OB(); 
    ob.init(); 
}); 

function some_other_function() { 
    ... ob.getMode() ...; 
} 

Answer 3

OB() doit être appelée après le chargement complet du DOM. D'où la réponse de Marcelo, qui appelle OB() dans la méthode ready().