2010-12-06 14 views
14

Donc, pour rester organisé, j'ai plusieurs fichiers javascript, même si tous (à la fin) sont minifiés ensemble pour former un fichier javascript final.

contenu de chaque fichier sont enveloppés dans:

$(document).ready(function(){ 
    //some javascript here 
}); 

Il semble que si j'ai des choses dans des fichiers séparés (dans entre ce code), ils n'ont pas accès les uns aux autres. Est-ce un problème de portée? Que puis-je faire? Par exemple, dans un fichier, j'avais un tas de code pour créer des tables à partir de données reçues par ajax. Cependant, la moitié du fichier n'était que des modèles pour afficher les données en fonction de leurs types et autres. Je voudrais avoir les modèles dans leur propre fichier. Je comprends que c'est juste un problème de 'préférence' et que je pourrais tout avoir dans un seul fichier. Mais j'espère apprendre de cela et peut-être même être en mesure de l'avoir «mon» chemin.

Répondre

26

Javascript utilise des étendues fonctionnelles, donc les variables locales à l'intérieur d'une fonction ne sont pas visibles à l'extérieur. C'est pourquoi votre code ne peut pas accéder au code d'autres portées.

La solution idéale pour cela est de créer un espace de noms .

var NS = {}; 

(function(){ 
    function privateFunction() { ... } 
    NS.publicFunction = function(){ ... } 
})(); 

$(document).ready(function(){ 
    NS.publicFunction(); 
}); 

Ceci est également un modèle utile car il vous permet de faire une distinction entre & privés éléments publics.

+0

Notez que si vous déclarez votre fonction comme 'privateFunctionAttempt = function() {/ * faites quelque chose * /}' alors il est réellement dans la portée globale. Donc faire 'console.log (window.privateFunctionAttempt)' montrera votre fonction au lieu de renvoyer undefined comme ce serait le cas pour 'console.log (window.privateFunction)'. Voir http://stackoverflow.com/questions/11819425/jquery-document-ready-and-function-scope –

1

Il s'agit d'un problème de portée. Par exemple:

function a() { 
    var myHiddenStr = 'abc'; 
} 
alert(typeof(myHiddenStr)); 

Vous ne pouvez pas accéder myHiddenStr en dehors de la fonction a. De la même manière, la fonction anonyme que vous utilisez pour le document prêt cache tout ce qu'il contient.

Avoir une portée globale où vous placez des choses à partir de différents fichiers js n'est pas une bonne idée. Il est probablement préférable d'avoir un gestionnaire document.ready et d'appeler des fonctions respectives à partir de celui-ci. Vous pouvez ensuite extraire les résultats des fonctions et les transmettre à d'autres fonctions qui doivent les utiliser.