Code in JavaScript the smart, modular way

Are you a JavaScript hack or a real developer? Use this quick start guide to learn to write modularized JavaScript code

Page 2 of 3

AMD (asynchronous module definition)

AMD was born out of the need for specifying explicit dependencies while avoiding the synchronous loading of all scripts. It's easy to use in a browser but is not native, so you need to include a library that does script-loading, like RequireJS or curl.js. Here is what it looks like to define a module using AMD:

// libs/order-module.js


//'private' variable

var orderId = 123;

// expose methods and variables by returning them

return {

getOrderId: function(){

return orderId;



It looks similar to what we were dealing with before, except that instead of immediately calling our factory function directly, we're passing as an argument to define. The real magic starts happening when you want to use the module later on:

define( [ 'libs/order-module' ], function(orderModule) {

orderModule.getOrderId(); //evaluates to 123


The first argument of define is now an array of dependencies, which can be arbitrarily long, and the factory function lists formal parameters for those dependencies to be attached to it. Now, some dependencies you need may have dependencies of their own, but with AMD, you don't need to know that:

// src/utils.js

define( [ 'libs/underscore' ], function(_) {

return {

moduleId: 'foo',

_ : _


// src/myapp.js

define( [




], function($, Handlebars, Utils){

// Use each of the stated dependencies without

// worrying if they're there or not.


// Sub dependencies have also been taken care of



This is a great way to develop modular JavaScript when dealing with a lot of moving parts and dependencies. The responsibility of ordering and including scripts is now on the shoulders of the script-loader, leaving you free to simply state what you need and begin using it.

On the other hand, there are a few potential issues. First, you have an additional library to include and learn to use. I have no experience with curl.js, but RequireJS involves learning how to set up configuration for your project. This will take some hours to get familiar with the settings, after which writing the initial configuration should take mere minutes. Also, module definitions can grow lengthy if they lead to a pile of dependencies. Here's an example, taken from the explanation of this problem in the RequireJS documentation:

// From RequireJS documentation:


define([ "require", "jquery", "blade/object", "blade/fn", "rdapi",

"oauth", "blade/jig", "blade/url", "dispatch", "accounts",

"storage", "services", "widgets/AccountPanel", "widgets/TabButton",

"widgets/AddAccount", "less", "osTheme", "jquery-ui-1.8.7.min",


function (require, $, object, fn, rdapi,

oauth, jig, url, dispatch, accounts,

storage, services, AccountPanel, TabButton,

AddAccount, less, osTheme) {


Ouch! RequireJS provides some syntactic sugar to deal with this, which looks quite a bit like another popular API for modular development, CommonJS.

| 1 2 3 Page 2