This is an early version of loom.js, the API may change.

Why loom.js

How to use loom.js

There are two base methods, define() and require(). Define your module using the module.define() method like so:

module.define('moduleName', ['dependency1', 'dependency2'], function (dep1, dep2) {
    // module code goes here

    return publicMethods;
}, resolve);

Request modules using modules.require():

module.require('moduleName', function (module) {
    // use the module here
});

Modules are only evaluated, if the optional parameter resolve is set to true or they are requested using module.require().

Examples

The following examples show different use cases for loom.js.

Examle 1: Basic module definition and loading

The modules appear in the code in the same order as they are shown here.

1) Module Square is defined using module.define():

module.define('Square', ['Multiply'], function (multi) {

    return function (num) {
        return multi(num, num);
    }
});

Square has a dependency on Multiply, which is passed to the callback as a parameter. The dependencies are passed in the order in which they are requested. The parameter names don't matter.

Modules are only evaluated, if they are requested. Since *Square* hasn't been requested yet, the module has not been called and the dependencies haven't been resolved.

2) The main module of the app is defined. It is the main module, because the last optional parameter of the define() method is set to true.

module.define('Main', ['Square', 'Multiply', 'Add', 'jQuery'], function (sq, mul, add, $) {
    var a = 3;

    console.log( sq(a) );
    console.log( mul(a,3) );
    console.log( add(a,4) );

    $('body').text('works!');
}, true);

The main module is where the actual application logic goes. All dependencies are passed as arguments to the module.

After the the first define() with resolve=true or a require() was found, loom tries to resolve the dependencies. loom tries to resolve *Square*. While resolving Square, it looks for its dependency *Multiply*. Since *Multiply* wasn't defined yet, loom adds it to a waitingFor list and stops resolving *Main*.

3) Modules Multiply, Add and jQuery are defined:

module.define('Multiply', function () {

    return function (num1, num2) {
        return num1 * num2;
    }
});

module.define('jQuery', function () {

    return jQuery.noConflict(); //assuming jQuery is loaded
});

module.define('Add', function () {

    return function (num1, num2) {
        return num1 + num2;
    }
});
Note that all dependencies of *Main* are defined now. They are all resolved and the instances are saved to the module container. These instances will be passed to further request for *Add*, *Multiply*, … . Eventually *Main* gets executed and you can see 9 9 7 in the console.

Example 2: loom.js as module loader

to load modules over http only if they are requested, similar to require.js.

module.define('jQuery', function () {
    return customMethodToLoadJsOverHttp('https://code.jquery.com/jquery-2.1.1.min.js');
});

Since modules are only evaluated if they are requested in any way, the http request will not be made until jQuery is requested.

Example 3: conditional and nested require

Requires can of course be nested and used in conditions.

module.require(['jQuery'], function ($) {

    if (document.title == 'Home') {
        module.require(['slideshow', 'jQuery'], function (slide, $) {
            slide.start();
            $('.help').hide();
        });
    } else {
        module.require('spaceUnicorn', function (game) {
            game.init(42);
        });
    }

});

Reference

define

module.define(moduleName, [optDependency, moreOptDeps], callback, optResolve);

require

module.require([Dependency, moreOptDeps], callback);

Remarks / Todos

Download

Download from github.

← Custom form collection prototype in Symfony2
→ How to call jQuery plugins using the apply() or call() functions