Question

I would like to break my javascript code to several .js files. Each of those .js has code that need to be inside the $(document).ready(..). So in each file a new $(document).ready(..) will start.

How could I call from filea.js functions declared in fileb.js (both inside a $(document).ready block) ?

If this is not possible, can you propose an alternative?
Thank you.

Edit: I would like to clarify that I would like to avoid using the global scope. I was hoping something in the line of using named functions as handlers for the event but I can’t really see how to do it.

Answer 1

You really can’t get away from declaring a global. Creating a single global isn’t so bad, you can then namespace all your functions under it.

Put this in something like a main.js file, so you can keep your shared functions here:

// name this something unique to your page/site/app
var MYAPP = {};

// now we can attach functions to it

MYAPP.funcA = function() { /* ... */ };
MYAPP.funcB = function() { /* ... */ };

Then, in each of your anonymous functions you can access MYAPP.funcA(), MYAPP.funcB(), etc. You can also modify MYAPP on the fly to add functions, properties, etc.

In the end you have a single global (darn it!), but if you’ve named it properly you are creating a global namespace where your app code can safely reside.