RequireJS basic introduction

#requirejs

#javascript

<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.

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.

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.

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.

#requirejs

#javascript