32
What you want to do is export functionality. For instance, if you start with
class Foo
...
class Bar extends Foo
...
and you decide you move Foo to its own file, that file should look like
class Foo
...
window.Foo = Foo
(where window.Foo = Foo makes Foo a global), and Bar's file should start with the Sprockets directive
#= require Foo
(assuming that you've named Foo's file Foo.js.coffee). Each file is compiled into JS independently, but Sprockets will ensure that Foo is included before Bar.
Note that, as a shortcut, you can get rid of the window.Foo = Foo line, and instead write
class window.Foo
...
or simply
class @Foo
...
to define a class named Foo that's attached to the window object.
While using the window object as a place to share functionality among different parts of your code can work quite well, it can get somewhat ugly when you're working on a big/complex codebase. Also, you have to handle loading all of the dependencies manually, which can get somewhat frustrating too. Many people just end up loading everything in every request, regardless of what's actually needed for that particular page.
There are plenty of libraries built in an attempt to solve those issues and make exporting and importing functionality among files more managable. One of the more common ones today is RequireJS which is an implementation of the CommonJS AMD specs. You can find other libraries and a comparison between them here, and there's a great tutorial on how to write modular JavaScript using those libraries over at Addy Osmani blog - which also talks about the new upcoming modules system in ES.next, which is quite interesting too.
I personally really like NodeJS's modules system (with the exports object and the require function), so I use node-browserify to package it up for working on the client side too. While that doesn't allow dynamically loading dependencies in an asynchronous way as the AMD specs does, it does allow to nicely share the same JavaScript code on both the client-side and server-side, which is a huge bonus for me (mainly because I'm working with NodeJS on the server side too, so I'm not sure how important that mi
You can also do it like this:
@app = window.app ? {}
app.Foo = Foo
This will make app contain all your global classes, and window.app ? {} makes sure that you will only create one app.