Javascript Variable non disponible en fichier externe

Question

Est-ce quelque chose avec javascript; ou est-ce autre chose que je fais mal?

file1.js

var collection = new Object(); 
collection.foo = new Array(1, 2, 3); 

fichier

2.js

var someClass = new Class({ 
    bar : function() { 
     alert(collection.foo.length); 
    } 
}); 

index.html

<script type="text/javascript" src="file1.js"></script> 
<script type="text/javascript" src="file2.js"></script> 
<script type="text/javascript"> 
var x = new someClass(); 
x.bar(); //cannot find collection 
</script> 

donc j'ai essayé une autre approche:

file1.js

collection.foo = new Array(1, 2, 3); 

fichier

2.js

var someClass = new Class({ 
    bar : function() { 
     alert(collection.foo.length); 
    } 
}); 

index.html

<script type="text/javascript"> 
var collection = new Object(); 
</script> 
<script type="text/javascript" src="file1.js"></script> 
<script type="text/javascript" src="file2.js"></script> 
<script type="text/javascript"> 
var x = new someClass(); 
x.bar(); //cannot find collection.foo 
</script> 

J'utilise MooTools (où l'objet de classe vient) si vous pensez que les questions. Je l'ai simplifié pour l'exemple, mais le x.bar() fait partie d'un événement click pour une autre méthode. Mais après quelques tests alert(), j'ai découvert que file1 n'était pas en cours d'exécution. C'est en fait un fichier .axd envoyé avec le text/javascript contenttype, donc je ne sais pas pourquoi - je vais devoir enquêter demain.

Et oui, les étiquettes seront en bas. file1 est un gros fichier javascript ennuyeux, c'est pourquoi il est séparé - le but est de mettre en cache sur le client autant que possible humainement. C'est un fichier .axd car il est généré à partir de la base de données (Ref data) et je définis explicitement les expires, la compression, le contenttype et la cachability.

Mise à jour: Après plus de bidouillage, j'ai compris qu'il y avait une erreur dans les données générées que firebug n'attirait pas; et c'était juste un bug, pas un problème technique profond. En tant que tel; fermeture.

Answer 1

est votre source de fichier1 enveloppé dans le (modèle quelque peu la norme)

(function() { 


})(); 

qui fait ce qu'il entend dans ce cas, ce qui est de rendre les variables locales?

EDIT: Est-ce que l'ajout d'un espace entre < scénario > et </script > aide?J'ai eu quelques problèmes où les étiquettes vides ont été ignorées mais je ne suis pas sûr que ce soit applicable dans ce cas.

Answer 2

Quelle est l'utilisation de "Class"? Est-ce que javascript supporte la création de classe en utilisant le mot-clé Class?

Answer 3

Il se peut que ce soit l'ordre dans lequel les fichiers sont en cours d'exécution. Le navigateur exécutera les fichiers dans l'ordre qu'ils chargent, pas nécessairement dans l'ordre dans lequel ils ont été inclus. Un moyen simple de tester si c'est le cas est d'ajouter une ligne de débogage à chaque fichier.

file1.js

alert("Loading File 1"); 
var collection = new Object(); 
collection.foo = new Array(1, 2, 3); 

file2.js

alert("Loading File 2"); 
// ... your code. 

Si elle montre le fichier 2 avant 1 fichier, puis il y a votre problème. Je ne suis pas sûr d'une méthode robuste pour éviter cela, mais ce que je fais est d'utiliser un script pour emballer tout mon javascript dans un gros fichier - de cette façon, vous savez exactement l'ordre dans lequel tout va charger, quoi qu'il arrive.

Answer 4

Les fichiers JS bloquent les autres téléchargements et provoquent des retards de chargement pour les utilisateurs. Pour cette raison, il est préférable de coller les balises de script au bas de la page lorsque vous le pouvez. Voir here dans la section "Scripts en bas", ou here.

Ce qui se passe probablement, c'est que les fichiers JS ne sont pas complètement prêts au moment où le JS sur la page est prêt à s'exécuter. Vous devrez réfléchir à ces options.

Y a-t-il une raison pour laquelle ces fichiers ne peuvent pas être consolidés? Pouvez-vous encapsuler le script inline (exemple 1 - index.HTML) dans une fonction et lier cette fonction à l'événement onload()?