browser modules - decoupling dependency declaration and loading from module definition

app.js

// load modules passed in first argument, call function argument when loaded.
// note that modules are loaded and defined, but not yet executed (the module function is not called)

load(["single", "multi", "package"], function(require) {

    // modules listed above are available via synchronous require() here.
    // note that any of the modules may itself invoke load(), causing invocation of 
    // this function to be further delayed if the modules haven't been loaded yet

    load("baz", function(require) {
        // we can require "baz" here in addition to what's available outside
    });

});

multi.js

// defines modules with ids "foo" and "bar" - think of this as a transport optimized format

define("foo", function(require, exports, module) {
    // definition of module "foo"
});

define("bar", function(require, exports, module) {
    // definition of module "bar"
});    

package.js

// load modules "a" and "b" belonging to this package or directory. 
// No callback here, but loading will delay callbacks waiting for "package"
load(["./a", "./b"]);

// definition of module "package" itself
define(function(require, exports, module) {
    // ...
});

// note that "package" here doesn't necessarily mean CommonJS package - 
// it's just any group of modules used together, a directory of script files, 
// anything you want to structure your app by

single.js

// defines single module with the id derived from its file name

define(function(require, exports, module) {
    // definition of module "single"
});