2

I have two very big functions, a and b, which are currently in one big JavaScript file. My goal is to have each function in a separate JavaScript file.

The problem is that a makes calls to b, and b makes calls to a, so that if I put both functions in different files, then one will be missing the definition of the other, and I get an error message and things break.

When they are in the same file, under the same closure, things don't break because of hoisting. How can I have the two functions in different files when each references the other?

Randomblue
  • 112,777
  • 145
  • 353
  • 547
  • 1
    It depends on *when* the functions are called. If they are only called inside each other, then there is no problem to put the definition in two separate files. – Felix Kling Oct 13 '11 at 21:00
  • 3
    May we ask *why* you need them in separate files when they are interdependent? – Blazemonger Oct 13 '11 at 21:00
  • 4
    Your goal may be to put them in separate files, but best practices these days say to minimize HTTP requests and combine things into as few files as possible: http://developer.yahoo.com/performance/rules.html#num_http – Doozer Blake Oct 13 '11 at 21:01

4 Answers4

4

If they're going to be in different files, then you won't have them in the same closure, so that's the fire problem.

After that, if you're willing to enforce load order (i.e. load A first, the B), then simply have A define a stub of B, and then B will redefine it when it loads. As long as A doesn't execute before B loads, you should be fine.

Will Hartung
  • 115,893
  • 19
  • 128
  • 203
1

Use Google Loader, then you know the scripts are available before your function calls.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
1

I wouldn't split them into separate files if they belong together like this. Instead, try to break up the functions themselves. Long files are no problem, but long functions are generally not maintainable.

Apart from that: if they are separate functions, it doesn't matter if they are in the same file or not, as long as both files are loaded, and you don't call the functions until both files are loaded.

GolezTrol
  • 114,394
  • 18
  • 182
  • 210
0

You are not allowed to something like this:

a.js:

function a() {}
b();

b.js:

function b() {}
a();

Instead are only allowed to define the functions. In a third script which you include after a.js and b.js you call a() or b(). Then calls INSIDE of the function a can have calls to function b and contrariwise.

styrr
  • 829
  • 4
  • 9