Skip to content
This repository has been archived by the owner on Aug 8, 2019. It is now read-only.
Raúl Ferràs edited this page Jan 11, 2014 · 16 revisions

AMD (Asynchronous Module Definition) was the response to those who though the CommonJS Module system was not ready for the browser as it's nature was synchronous.

AMD specifies a solution for modular Javascript such that modules can load its dependencies asynchronously, solving the problems synchronous loadnng incur.

Specification

Modules are defined using the define function.

define

The define function is how modules are defined with AMD. It is just a function that has this signature

 define(id?, dependencies?, factory);

id

Specifies the module name. It is optional.

dependencies

This argument specifies which module dependencies the module being defined has.
It is an array containing module identifiers.
It is optional, but if omitted, it defaults to ["require", "exports", "module"].

factory

The last argument is the one who defines the module. It can be a function (which should be called once), or an object. If the factory is a function, the value returned will be the exported value for the module.

Let's see some examples:

Named module: Defines a module named myModule that requires jQuery.

define('myModule', ['jquery'], function($){
     // $ is the export of the jquery module.
	 $('body').text('hello world');
});

Anonymous module: Define the previous module without specifying it's id.

define(['jquery'], function($){
	 $('body').text('hello world');
});

Multiple dependencies: Define a module with multiple dependencies. Note that each dependency export will be passed to the factory function.

define(['jquery','./math.js'], function($,math){
	 // $ and math are the exports of the jquery module.
	 $('body').text('hello world');
});

Export value: Define a module that exports itself.

define(['jquery'], function($){

     var HelloWorldize = function(selector){
     	$(selector).text('helloworld');
     };

     return HelloWorldize;
});

Using require to load dependencies

define(function($){
	var $ = require('jquery');
	$('body').text('hello world');
});

define.amd property

The AMD specification requires that any define function implementation for AMD should have a property named amd to indicate that it conforms with the AMD API.

Advanced example

define(["./dependency1", "./dependency2"], function(dep1, dep2) {
  // dep1 and dep2 are the exports of the files dependency1 and dependency1

  // more dependencies
  var dep3 = require("./dependency3");
  // you can require more dependencies with a sync require.
  // (This is internally acutually threaded like commonjs require.)

  // more dependencies on demand
  require(["./dependency4"], function(dep4) {
    // the async version of require load more dependencies asynchronously.
    // see more in chapter chunks
    // dep4 is the export of dependency4
  });

  // the returned value is exported
  return function doStuff() {};
});

define(function(require, exports, module) {
  // the commonjs wrapping style is also supported
});

define(["exports", "require", "./dependency"], function(exports, require, dep) {
  // the strings "exports", "module" and "require" have special meaning in AMD define/require
});

require(["./file"]);
// without function is possible to just load the files.

define("name", ...)
// named defines are allowed and will behave like anon defines. The name is ignored.
Clone this wiki locally