Coffeescript, Backbone and load order

Question

Consider this Coffeescript class, in an app where each class lives in its own file.

class Manager extends Person
  title: titles["manager"]

If that file is loaded before the "titles" object, an error generated. I'm assuming this is because of Coffeescripts safety wrapper which is performing ".call(this)" when this file is first loaded?

Otherwise, if I were to delay running any code until after the entire page had fully loaded ($(document.ready()), I could be sure that all the javascript files were fully loaded before any code actually ran.

Doesn't this create some annoying load order problems, or am I not doing something correctly?

Answer 1

It can't be both an order issue and a wrapper issue. Wrapping something with a function that's run immediately has no effect on order, only on scope.

And if titles is defined in another file, then the scoping of class Manager doesn't matter. So, it's an order issue. How is titles defined?

if I were to delay running any code until after the entire page had fully loaded ($(document.ready()), I could be sure that all the javascript files were fully loaded before any code actually ran.

Not quite. $(document).ready() (note the parentheses—there is no document.ready function...) delays a function's execution until all of the page's HTML has been loaded, which doesn't mean all JavaScript has been loaded. Here's the good news: From the standpoint of JavaScript code, it doesn't matter whether other JavaScript files have been loaded, because they're all run in order. (Note: I'm assuming here that you're not doing anything fancy like adding additional <script> tags from your JavaScript code.) So as long as you have

<script src="titles.js"></script>
<script src="Manager.js"></script>

you can rest assured that Manager.js will only run after titles.js has.

Warning! Relying on $(document).ready() for ordering JS code is a common mistake that can lead to confusion! If your HTML looked like this

<script src="Manager.js"></script>
<script src="titles.js"></script>

where titles.js creates a global called titles and Manager.js looks like this

$(document).ready ->
  console.log titles

then the output will sometimes be titles, and sometimes be undefined. Why? Because as the docs say,

If .ready() is called after the DOM has been initialized, the new handler passed in will be executed immediately.

And the DOM may already have been initialized when the first JS file is run! (In practice, this will tend to happen if the browser has the page's HTML cached.)

So, keep it simple. Just load your scripts in the right order. Remember that, for all practical purposes, your scripts are concatenated together by the browser, in order, into a single JS file.