Skip to content

asynchronous module definition

amdsource

The Asynchronous Module Definition (AMD) API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded.

The most important functions in the API are define() and require() for modules: modules But also look at the declare() function for implementing classes and multiple inheritance : declare

define() function

You use this to define a module, the general format is :

define module
1
define(id?, dependencies?, factory);

Both id and dependencies are optional. The parameters are detected by their type:

  • if id (string) is not present then this is an anonymous module
  • if dependencies (an array of id's) is null or absent it defaults to ["require", "exports", "module"].
  • factory is the function that actually implement the module.

The factory does the work, and it is usually a function receiving a parameter for each of the dependencies specified. It does not matter in which order the dependencies were loaded, because function gets called only after all modules are successfully loaded.

So this is all completely asynchronous.

An example :

require() function

This one is used to load a defined() module.

declare() function

This one has everything to do with creating classes and (multiple) inheritance. Don't mix it up with define().

Declare accept 3 arguments : classname, superclass and properties, an example:

declare
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
// Create a new class named "mynamespace.MyClass"
declare("mynamespace.MyClass", 
[
    MySubClass,
    MyOtherClass,
    MyMixinClass
]
, {
    // MyClass now has all of the properties and methods from:
    // MySubClass, MyOtherClass, and MyMixinClass

    // Custom properties and methods here : these override the parents
    examplefield: "empty", 
    examplemethod: function() { alert("Yo!"); }
});

Names are really only used in combination with the Dojo Parser. The parser mainly runs the declarative html code with "data-dojo-type" references and enhances those nodes.

dojo site : "Named classes should only be created if they will be used with the Dojo parser. All other classes should omit the className parameter."

The name can be omitted, but to use it you will have to return a handle :

var MyClass = declare(null, {
// Custom properties and methods here}
});

This is a class with no name and no superclasses. Note that null is needed, the string is not and can be omitted.

A combination of define and declare can also be used :

define and declare
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
define([
    "dojo/_base/declare",
    "dijit/form/Button"
], function(declare, Button){
    return declare("mynamespace.Button", Button, {
        label: "My Button",
        onClick: function(evt){
            console.log("I was clicked!");
            this.inherited(arguments);
        }
    });
});

As you see you will now have to pass declare as a dependencies to define. This code makes a button called mynamespace.Button that inherits all the members from dijit/form/Button.