Login Register

Dissecting 0.9's dojo.js

Dojo's approach to dojo.js in 0.9 is different than Dojo 0.4.x. In Dojo 0.4.x, dojo.js varied, depending on the type of build you downloaded. While this allowed a nice degree of customization, it ultimately made it hard to talk coherently about dojo.js, both in feature set and in file size.

For the 0.9 release, this has changed. Now, there is only one distributed dojo.js, and it has been crafted to contain the basic set of tools needed to do web development. It is entirely possible to use just dojo.js and nothing else from Dojo, and still build great progressively enhanced web sites. It can be considered similar to the basic jQuery or Prototype libraries. It includes all the basics you need from a JS library: DOM querying, event binding, XMLHttpRequest (basic AJAX) and basic effects, plus a few extras for module loading and making JavaScript, CSS styles, and the DOM easier to use.

If you just want to use dojo.js, and nothing else from Dojo, you can use it directly from a geographic edge-cached Content Delivery Network (CDN). No need to download it and install it on your server. If you want to be able to use other Dojo modules that are not in dojo.js, you can still use the CDN to load all of Dojo, by using the dojo.xd.js file in your HTML source. Again, no need to download and install anything to your server.

So, what is in the basic dojo.js? Let's dissect it. dojo.js can be broken into subcomponents. Below is a list of subcomponents with some file sizes listed. These file sizes represent the gzipped size of the code with comments removed and with some other minification done by the dojo build system.

The entire dojo.js is 24,319 bytes, gzipped. dojo.xd.js is 27,771 bytes. dojo.xd.js has extra code to allow asynchronous loading of JavaScript modules from anywhere on the net, and it also includes dojo.i18n, which enables basic support for internationalization (i18n) resource bundles.

The sizes for the individual subcomponents add up to more than the 24KB size of dojo.js. This is due to the gzip file size overhead for gzipping each file individually, instead of as a group. But hopefully the numbers give you a rough estimate of the relative weight of each subcomponent.

All of the subcomponents can be found in the dojo source, inside the dojo/_base directory. Feel free to check out the source directly. Each subcomponent will be linked to the corresponding source file. All the source files have inline documentation, so check out the source if you are curious about a particular function.

Basic loader (5519 bytes)

This part includes basic environment detection, and one of the more unique and useful parts of Dojo: the module loader. The module loader allows you to dynamically load other JavaScript modules at any time.

  • Module loading, tracking module dependencies: dojo.require/dojo.provide. Manipulating logic names to path names, and registering the path/logical name mappings.
  • dojo.addOnLoad()
  • dojo.addOnUnload()
  • DOMContentLoaded implementation (triggers callbacks registered via dojo.addOnLoad()).
  • dojo._Url: object for parsing a string repsenting an URL into an object.
  • Browser detection (dojo.isIE, dojo.isFF, etc...)
  • Google Gears detection and wrapper around the Gears plugin.
  • Basic code to retrieve an XMLHttpRequest object.
  • dojo.body()/dojo.doc, dojo.withDoc() dojo.withBody(): convenience functions for getting document and body objects, and for temporarily switching document and body object contexts.
  • dojo.getObject/setObject/dojo.exists (deal with strings that represent nested objects. For instance, get/set/test properties on an object represented by the string "dojo.io.iframe". Can create mising objects in the object hierachy represented by the string.
  • djConfig initialization. djConfig is the configuration object for Dojo.

array.js (804 bytes)

Methods for dealing with arrays.

  • dojo.indexOf()
  • dojo.lastIndexOf()
  • dojo.forEach()
  • dojo.every()
  • dojo.some()
  • dojo.map()
  • dojo.filter()

json.js (810 bytes)

Methods for dealing with JSON.

  • dojo.fromJson()
  • dojo.toJson()

connect.js (928 bytes)

Defines the general event connection and disconnection, designed to avoid memory leaks browsers like IE. Has the ability to connect to almost any method on any JS object (DOM Node or regular JS object). Also has event topic publish/subscribe support.

  • dojo.connect()
  • dojo.disconnect()
  • dojo.subscribe()
  • dojo.unsubscribe()
  • dojo.publish()
  • dojo.connectPublisher()

Deferred.js (1008 bytes)

Encapsulates a sequence of callbacks in response to a value that may not yet be available.  This is modeled after the Deferred class from Twisted. Ideal for use in asynchronous IO operations, but applicable any time you want to run code at a later time based on a particular trigger. Used in xhr.js.

  • dojo.Deferred() (constructor). Supports callbacks on success and/or error triggers.

Color.js (1164 bytes)

Deals with doing work with color values. Needed by fx.js to do color transitions.

  • dojo.Color() (constructor). Has methods like toRgb(), toRgba(), toHex(), toCss()
  • dojo.blendColors()
  • dojo.colorFromRgb()
  • dojo.colorFromHex()
  • dojo.colorFromArray()
  • dojo.colorFromString()

lang.js (1345 bytes)

Utilities to help with the JavaScript language.

  • dojo.isString()
  • dojo.isArray()
  • dojo.isFunction()
  • dojo.isObject()
  • dojo.isArrayLike()
  • dojo.isAlien()
  • dojo.mixin()
  • dojo.extend()
  • dojo.hitch()
  • dojo.partial()
  • dojo.clone()
  • dojo.trim()

declare.js (1408 bytes)

From the source summary: "Creates a feature-rich constructor from compact notation". Dojo's way of creating "classes" and "subclasses". All dijit widgets use dojo.declare to define themselves. Also used in fx.js to create the fundamental animation/effects constructor.

NodeList.js (1607 bytes)

dojo.NodeList is as subclass of Array which adds syntactic sugar for chaining, common iteration operations, animation, and node manipulation. NodeLists are most often returned as the result of dojo.query() calls. Allows you to chain method calls, similar to what is possible in jQuery. Methods on a NodeList:

  • indexOf()
  • lastIndexOf()
  • every()
  • some()
  • forEach()
  • map()
  • coords()
  • style()
  • styles()
  • addClass()
  • removeClass()
  • place()
  • connect()
  • orphan()
  • adopt()
  • query()
  • filter()
  • addContent()
  • fadeIn()
  • fadeOut()
  • animateProperty()
  • onmouseover()
  • onclick()
  • onmouseout()
  • onmousemove()
  • onblur()
  • onmousedown()
  • onmouseup()
  • onmousemove()
  • onkeydown()
  • onkeyup()
  • onkeypress()

fx.js (2002 bytes)

Defines the fundamental animation/effects constructor, and it is used by the following public methods:

  • dojo.fadeIn()
  • dojo.fadeOut()
  • dojo.animateProperty() (transitions any property on a node, uses Color.js)

xhr.js (2803 bytes)

XMLHttpRequest (XHR) operations and utilities for dealing with data that comes in and out of XHR operations. Uses Deferreds to manage XHR callbacks.

  • dojo.formToObject()
  • dojo.objectToQuery()
  • dojo.formToQuery()
  • dojo.formToJson()
  • dojo.queryToObject()
  • dojo.xhrGet()
  • dojo.xhrPost()
  • dojo.rawXhrPost()
  • dojo.xhrPut()
  • dojo.rawXhrPut()
  • dojo.xhrDelete()

event.js (2990 bytes)

Utilities for dealing with browser events. Related to connect.js.

  • dojo.fixEvent(): event normalization.
  • dojo.stopEvent()
  • dojo.keys: handy normalized set of keyCodes that works across browsers.

html.js (3902 bytes)

Utilities for dealing with the DOM and styles.

  • dojo.byId()
  • dojo.isDescendant()
  • dojo.setSelectable()
  • dojo.place()
  • dojo.boxModel
  • dojo.style()
  • dojo.marginBox()
  • dojo.contentBox()
  • dojo.coords()
  • dojo.hasClass()
  • dojo.addClass()
  • dojo.removeClass()
  • dojo.toggleClass()

query.js (3954 bytes)

A powerful DOM node querying function that uses CSS3 selectors to find nodes. Returns a NodeList object.

  • dojo.query()

NodeList.js method signitures aren't quite right

as per http://svn.dojotoolkit.org/dojo/dojo/trunk/_base/NodeList.js
these methods should be prefixed with 'on'

  • mouseover
  • click
  • mouseout
  • mousemove
  • blur
  • mousedown
  • mouseup
  • mousemove
  • keydown
  • keyup
  • keypress

cameronbraid: thanks for the

cameronbraid: thanks for the correction! I updated the blog entry to add "on" to those methods.