$.mods Dynamic Module Loading

computercolin edited this page Apr 26, 2012 · 1 revision

$.mods enables us not to have to declare all the js and css files in the header of our HTML file. This way, some modules can only be loaded if and when needed. Also, we don't have to keep track of all dependencies for each modules.

We use $.mods in conjunction with a slighty modified version of the head.js library.

Suppose you're building a module called docView, that itself requires other libraries. An important question is _Should you tell the caller (main.js in the example) to declare only 1 file (say docview.js), and inside your docview.js file, use $.mods to load all related files (css, and libraries that docview depends on), or should you tell the caller to declare docview.js as well as its depedencies ?

The answer depends on when docView needs the dependencies. If they're needed as soon as docview will be ready, it's important to have them declared in the caller, since the $.mods.ready callback will be executed as soon as all the files specified ny the caller are ready. So, for instance, if some CSS is needed to position things correctly and that the code executed by mods.ready assumes that, or if that same code.

On the other hand, if some code only has to be loaded at a later time (say, then the user clicks a button for example), then it makes sense to include it in the library itself, so that the library will be loaded faster, and it makes a smaller list of dependencies to give to the caller.

In main.js, we need docView to have its CSS ready and drawable loaded when we call the .mods.ready function docview: Other libraries, not needed in .ready, can be declared in docview.js itself (for instance, a contextmenu library).

in main.js
 $.mods.declare({
        docview: {
        js: ["/content/modules/dev/docview.js",  "/content/modules/dev/ui.drawable.js"],
            css: [ "/content/modules/dev/docView.css" , "/content/modules/dev/ui.drawable.css" ] }, 
            });
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.