Why loom.js

• Structure code in modules
• Define dependencies for each module
• Define and require modules in any order.

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.

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.

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;
    }
});

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

• consider adding define() and require() to global space.
• get rid of self executing modules? Loading modules only with require()?
• using require() synchronous, too. var $ = module.require('jQuery');
• change to conform with AMD standard.

Download

Download from github.

← How to setup a IOTA fullnode on Ubuntu 16.04