
I've added a convenience method to the Core.Web.Library object that makes breaking up JavaScript into multiple modules fairly straightforward.
The method, Core.Web.Library.exec(libraries, f) takes an array of URLs of the libraries to load and a function to execute once loading has completed.
For example, let's say you don't want to load the user account editing JavaScript module until the user needs to use some functionality contained within it, e.g. s/he presses a "create an account" button. That button might have a listener like this one attached to it:
_processCreateAccount: function(e) {
Core.Web.Library.exec(Foo.MODULE_USER, Core.method(this, function() {
var dialog = new Foo.User.CreateAccountDialog();
this.add(dialog);
}));
}
Foo.MODULE_USER is an array containing URLs of the libraries to be loaded. You'll want to define all the modules in a central location in your application, e.g..:
Foo = {
:
:
MODULE_USER: [
"lib/extras/Application.TransitionPane.js",
"lib/extras/Render.TransitionPane.js",
"app/Wizard.js",
"app/User.js"
],
MODULE_EDITOR: [
"lib/echo/Arc.js",
"lib/extras/Application.ColorSelect.js",
"lib/extras/Render.ColorSelect.js",
"lib/extras/Application.RichTextArea.js",
"lib/extras/Render.RichTextArea.js",
"app/Editor.js"
],
:
:
:
:
};
The Core.Web.Library object keeps track of which modules have been loaded for you, so there's never any worry about loading the same code more than once.