AMD: module specifications in browsers

Modules/Wrappings makes implementation a reality. Although it is not exactly the same as the node. js module writing method, there are also many similarities, so that programmers familiar with node. js have some intimacy.

But NodeJS is the JavaScript on the server end after all, and there is no need to put these lines in the browser's JavaScript environment. At this time, AMD was born, and its full definition is called asynchronous module. It is known from the name that it is suitable for script tag. It can also be said that AMD is designed specifically for the JavaScript environment in the browser. It draws on some advantages of CommonJS, but does not copy its format. At first, AMD existed as the transport format of CommonJS because it was unable to reach an agreement with CommonJS developers and existed independently. It has independent wiki and discussion groups.

AMD has designed a simple write module API:Define.

Define (id ?, Dependencies ?, Factory );

Where:

◆ Id: module id, which can be omitted.

◆ Dependencies: the dependent module, which can be omitted.

◆ Factory: module implementation, or a JavaScript Object.

The id follows the CommonJS Module Identifiers. The order of the dependencies element corresponds to the factory parameter one by one.

The following is a simple three-tier structure (basic library, UI Layer, and application layer) developed in AMD mode ):

Base. js

 
 

  
  
define(function() { 
  
  
    return { 
  
  
        mix: function(source, target) { 
  
  
        } 
  
  
    }; 
  
  
}); 
 
 

Ui. js

 
 

  
  
define(['base'], function(base) { 
  
  
    return { 
  
  
        show: function() { 
  
  
            // todo with module base 
  
  
        } 
  
  
    } 
  
  
}); 
 
 

Page. js

 
 

  
  
define(['data', 'ui'], function(data, ui) { 
  
  
    // init here 
  
  
}); 
 
 

Data. js

 
 

  
  
define({ 
  
  
    users: [], 
  
  
    members: [] 
  
  
}); 
 
 

The preceding three usage methods of define are also demonstrated,

1. Define a non-dependent module (base. js)

2. Define the dependent modules (ui. js, page. js)

3. Define the data Object Module (data. js)

When you are careful, you will find that the module is not displayed, that is, the module named

 
 

  
  
define('index', ['data','base'], function(data, base) { 
  
  
    // todo 
  
  
}); 
 
 

The named module is not recommended most of the time. It is generally used when multiple modules are merged by the packaging tool into a js file.

As mentioned above, the order of dependencies elements is one-to-one correspondence with factory, which is not very rigorous. AMD began to propose its own module style to get rid of CommonJS constraints. But later I made another compromise and was compatible with CommonJS Modules/Wrappings. That is, you can write it like this.

 
 

  
  
define(function(require, exports, module) { 
  
  
    var base = require('base'); 
  
  
    exports.show = function() { 
  
  
        // todo with module base 
  
  
    }  
  
  
}); 
 
 

Aside from a function layer, the format is similar to that of NodeJS. Use require to obtain the dependency module and use the exports export API.

In addition to define, AMD reserves a keyword require. As a globally reserved identifier, require can be implemented as module loader. Or not.

Currently, AMD libraries include RequireJS, curl, Dojo, bdLoad, JSLocalnet, and Nodules.

There are also many libraries that support AMD specifications and will be available as a module, such as MooTools, jQuery, qwery, bonzo, and even firebug.

Original article: http://www.cnblogs.com/snandy/archive/2012/03/12/2390782.html