How do you take advantage of prototypal inheritance without needing to include files in a specific order?

Question

When developing JavaScript, I tend to separate JavaScript code out into different files and then run a script to concatenate the files and compress or pack the resulting file. In the end, I have one file that I need to include on my production site.

This approach has usually worked, but I've started to run into a problems with prototypal inheritance. Specifically, if one class inherits from another class, the file for the parent class needs to be included already for the inheritance to work. If the concatenation script I'm using is simply concatenating a directory full of files, the child class might occur in the code before the parent class. Like this:

parent_class.js

var Namespace = Namespace || {};    

Namespace.Parent = function () { };
Namespace.Parent.prototype.doStuff = function () { ... };

child_class.js

var NameSpace = Namespace || {};

Namespace.Child = function () { ... };
Namespace.Child.prototype = new Namespace.Parent();

The only way this works is if parent_class.js is included before child_class.js, which might not happen if the concatenation script places the child code before the parent code.

Is there a way to write this code so that the functionality is the same, but the order in which the code is written no longer matters?

Edit: I forgot that I'm using namespaces as well, so I added that to the code as well, which might change things a little bit.

Answer 1

If the concatenation script I'm using is simply concatenating a directory full of files, the child class might occur in the code before the parent class.

Is it too simple a solution to prepend a sort order value to each filename, and sort by name before performing the operation?

eg:

01_parent.js
02_child.js

Otherwise, perhaps maintaining a preordered list of files in a separate file. Maybe even go one step further and provide a hierarchical dependancy structure in xml to parse? This might be over-engineering the solution a bit :-D

Some options for ways to deal with the problem if you had no way of determining how the javascript files are written.

Answer 2

When I've worked on large apps, I've use requireJS to divide my code into modules, and make sure those modules are loaded in the correct order. Then I just mark my derived class as depending on the parent class.

RequireJS comes with a tool that will combine and minify all your modules for production deployment as well.

Answer 3

I suppose you could do something really hackish like this:

setTimeout(function() { 
  if(typeof(Parent) != "undefined" && typeof(Child) != "undefined") { 
    Child.prototype = new Parent(); 
  } else {
    setTimeout(arguments.callee, 50);
  }
}, 50);

That code could also be anywhere, and would continually run until both the Parent and the Child were loaded...But I wouldn't do that.

Personally, I would just make sure your files are combined in the correct order.

Answer 4

If the objects are "namespaced" then you either have to switch to a build solution that incorporates in-order concatenation or use something like dojo.require (but obviously not dojo specific). Basically you want a framework that will provide you with the ability to check if a given identifier is available and pause execution and include it (via evaled ajax or an inserted script tag) if it isn't.