The Beauty of dojo.require()

By  on  

I've been working full time with Dojo for the past four months and one of my favorite parts of the toolkit is the dojo.require system.  The dojo.require system allows you to asynchronously request Dojo modules within the current page without needing to adjust your core Dojo build or needing to go out and download the given plugin.  dojo.require is quite comprehensive but I wanted to give you a taste of dojo.require and how it works on a very basic level.

Step 1:  Pull Dojo From CDN

<!-- pull from Google -->
<script src="" type="text/javascript"></script>
<!-- OR pull from AOL -->
<script src="" type="text/javascript"></script>

You can pull the base Dojo JavaScript file from Google or AOL.  This file is very small and loads extremely fast from CDN.

Step 2:  dojo.require

As mentioned earlier, the dojo.require method asynchronously requests Dojo classes from a module path.  Dojo's smart enough to be able to request its classes from CDN even though it's cross-domain.  You can change the module paths if you'd like but that's out of the scope of this post.  Let's say I want to use Dojo's behavior class within my page.  The first step is "requiring" it:


That require statement fires the request for that class from the CDN.  Of course, you can't do anything with the functionality of that class until it has loaded so you need to add a dojo.ready wrapper which doesn't execute until all requires have loaded and the DOM is ready:

//equivalent to jQuery's document.ready and MooTools' window.addEvent('domready')
dojo.ready(function() {
	//this only executes when my "requires" have loaded!
		'a.alert': {
			onclick: function(e) {
				alert('You clicked me!');

Boom!  The behavior class has loaded and you're now ready to use it!

Another cool part about dojo.require is that since each class must define the modules it requires, dependencies are automatically required when you request a class.  For example, let's pretend I want to use a class from DojoX charting library.  I manually require once class, but Dojo's smart enough to figure out I need many more than that:

//I manually type this...
//...but Dojo internally knows to also require more classes that help charting...

Firebug can tell you exactly which dependency classes get pulled from CDN:


Dojo's require system is absolutely brilliant;  it speeds up development ten-fold.  When it comes to production, however, it's best to use Dojo's build system to create one static JavaScript build for speed and caching purposes.  For development, however, dojo.require is a Godsend!

Recent Features

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • By
    Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

Incredible Demos

  • By
    Introducing MooTools LinkAlert

    One of my favorite Firefox plugins is called LinkAlert. LinkAlert shows the user an icon when they hover over a special link, like a link to a Microsoft Word DOC or a PDF file. I love that warning because I hate the surprise...

  • By
    Create Spinning Rays with CSS3 Animations &#038; JavaScript

    Thomas Fuchs, creator of script2 (scriptaculous' second iteration) and Zepto.js (mobile JavaScript framework), creates outstanding animated elements with JavaScript.  He's a legend in his own right, and for good reason:  his work has helped to inspire developers everywhere to drop Flash and opt...


  1. One correction: the normal dojo.require loader is synchronous, while the cross-domain loader (which the CDN’s use) is asynchronous.

  2. rajkamal

    dojo.requireIf( “condition”, “”);

    The above file will be requested only if the “condition” is meet, anthore nicety of dojo require

  3. rajkamal

    i also have one concern regarding dojo require system, its making a lot of http requests.. which is against Steve souder’s first rule (dont make more http request) in making an website faster.

    • Once you’re ready to place your code intro production, you should use the Dojo build system to place the resources you need into one JavaScript file.

  4. Can I import all ‘dijit.form.*’ by one row of code?

    • Sorry AXE, there’s no “*” functionality. I wouldn’t recommend it either — it would be massive!

    • I create web application for me private purpose, this is not needed hight speed of work. (sorry for my Engish :) )

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!