Javascript Variable not available in external file

Question

Is this something with javascript; or is it something else I'm doing wrong.

file1.js

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

file 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>

So I tried another approach:

file1.js

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

file 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>

I'm using mooTools (where the Class object comes from) if you think that matters.

Update: I simplified it for posting the example, but the x.bar() is part of a click event for another method. But after some alert() testing I discovered file1 was not actually being executed. It's actually a .axd file being send with the text/javascript contenttype, so I'm not sure why - I'll have to investigate tommorrow.

And yes, the tags will be at the bottom. file1 is an annoying large javascript file, which is why it's separated out - the goal is to have to cached on the client as much as humanly possible. It's an .axd file because it generated from the database (Ref data) and I set the expires, compression, contenttype, and cachability explicitly.

Update: After more fiddling, I figured out there was an error in the data generated that firebug wasn't catching; and this was just a bug, not some deep technical problem. As such; closing.

Answer 1

is your file1 source wrapped in the (somewhat standard pattern)

(function() {


})();

which does what it intends in this case, which is to make variables local?

EDIT: Does adding a space between <script> and </script> help? I've had some problems where empty tags were ignored but I'm not sure if that's applicable in this case.

Answer 2

What is the use of "Class"? Does javascript support Class creation by using Class keyword?

Answer 3

It may just be the order in which the files are being executed. The browser will run the files in the order they load, not necessarily in the order they were included. A simple way to test if this is the case is to add a line of debugging to each file.

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.

If it shows file 2 before file 1, then there's your problem. I'm not sure of a robust method to avoid this, but what I do is use a script to pack all my javascript into one big file - that way you know exactly the order in which everything will load, no matter what.

Answer 4

JS files will block other downloads and cause loading delays for users. For this reason, its best to stick the script tags at the bottom of the page when you can. See here at the section for "Scripts at the bottom", or here.

What is probably happening, is that the JS files are not completely ready by the time the JS on the page is ready to execute. You will need to think about these options.

Is there any reason these files cannot be consolidated? Can you wrap the inline script (Example 1 - index.HTML) into a funciton, and tie that function to the onload() event?