RequireJS basic introduction

<b>RequireJS</b>

Module based coding eases the effort for maintenance and increases reusability.

In RequireJS we separate code into modules which each handle a single responsibility.

RequireJS implements the AMD API, another API for module loading is CommonJS.

<b>Simple Example</b>

In this example we will create a <b>user module</b> and a <b>post module</b>.

The script tag that initialises require.js includes a “data-main” attribute pointing to the main.js file

<b>Index.html</b>

<!doctype html>
<html>
<body>
<script data-main="js/main" src="js/vendor/require.js"></script>
</body>
</html>

The main module initializes our app.The require() function takes two arguments: an array of dependencies, and a callback function to execute once all the dependencies are loaded. This callback function loads our user and post modules.

<b>js/main.js</b>

require(['user', 'blog/post'], function(u, p){
    var user = new u(), post = new p();
    post.makePost();
});

The user module has a define() function provided by RequireJS, which has to return something, which will be forwarded to the callback function.

<b>js/user.js</b>

define([], function () {

    var returnedModule = function () {
        var name = 'Steven';
        this.getName = function () {
            return name;
        }
    };

    return returnedModule; 
});

The post module in the js/blog/ folder takes in a dependency for the user module. It returns a method which posts the user name and message to the console.

<b>js/blog/post.js</b>

define(['user'], function (u) {
    // load in user module
    var user = new u();

    var returnedModule = function () {
        var name = user.getName();

        this.makePost = function (message) {
            console.log( name + message + " posted at " + new Date() );
        }
    };

    return returnedModule;  
});

Now we have finished our application, I wanted to add some dependancies like jQuery or underscore. To set up libraries like jQuery as a dependency, we must tell RequireJS the path to find the JavaScript file, and the global variable to use in our main.js

<b>Loading other dependencies</b>

require.config({
    paths: {
        'jQuery': 'vendor/jquery-1.9.0.min',
        'underscore': 'vendor/underscore-1.9.min'
    },
    shim: {
        'jQuery': {
            exports: '$'
        },
        'underscore': {
            exports: '_'
        }
    }
});

Then we can use these libraries by adding them into our modules.

require(['user', 'jQuery'], function (u, $) {

    var user = new u()
    // now append user name to the dom using jQuery
    $("p").append(user.getName())
});

I have found another really good intro post on stack overflow showing a basic starter app using requirejs as well as Matthieu Larcher's example tutorial that this post is based on.