Dojo1.6 new features: AMD specifications (1)

Although the front-end technology is constantly evolving, there has been no qualitative leap. In addition to existing famous frameworks, such as Dojo, JQuery, and ExtJs, many companies also have their own front-end development frameworks. The efficiency and development quality of these frameworks depend largely on the developer's familiarity with them and the degree of familiarity with JavaScript, this is why many technical leaders like to develop their own frameworks. It is not difficult to develop a framework that you will use, but it is difficult to develop a framework that everyone like. When migrating from a framework to a new framework, developers are likely to think about and solve problems based on the thinking of the original framework. One of the important reasons is the flexibility of JavaScript itself: the framework cannot absolutely constrain your behavior. One thing can always be implemented in multiple ways, therefore, we can only guide the correct implementation methods in the methodology. Fortunately, software methodology research at this level has been constantly trying and improving, and CommonJS is an important organization. They proposed many new JavaScript architecture solutions and standards, hoping to provide a uniform guide for front-end development.

AMD specification is one of the most famous ones. Its full name is Asynchronous Module Definition, that is, Asynchronous Module loading mechanism. From its standard description page, AMD is very short and simple, but it fully describes the module definition, dependency, reference relationship, and loading mechanism. It can be seen from the use of requireJS, NodeJs, Dojo, and JQuery that it has great value. Yes, JQuery has recently adopted AMD specifications. In this article, we will introduce the nature, usage, advantages, and application scenarios of AMD. From AMD, we can also learn how to design our own front-end applications at a higher level.

1. What is AMD?

As a specification, you only need to define its syntax API, but do not care about its implementation. AMD specifications are as simple as only one API, that is, the define function:

Define ([module-name?], [Array-of-dependencies?], [Module-factory-or-object]);

Where:

◆ Module-name: module ID, which can be omitted.

◆ Array-of-dependencies: the dependent module, which can be omitted.

◆ Module-factory-or-object: module implementation, or a JavaScript object.

We can see that the first and second parameters can be omitted, and the third parameter is the specific implementation of the module. They will use different parameter combinations in different application scenarios.

From this define function A: Asynchronous in AMD, it is not difficult to think of another nature of the define function, Asynchronous. When the define function is executed, it first asynchronously calls the dependent modules listed in the second parameter. After all modules are loaded, if the third parameter is a callback function, it is executed, and then the system module is notified that its own module is available. If it corresponds to the implementation before dojo1.6, the function can have the following correspondence:

◆ Module-name: dojo. provide

◆ Dependencies: dojo. require

◆ Module-factory: dojo. declare

The difference is that AMD uses Asynchronization when loading dependencies, while dojo. require is synchronous. The difference between Asynchronization and synchronization is obvious. The former does not block the browser and provides better performance and flexibility. For server AMD such as NodeJs, module loading does not require blocking server processes, which also improves performance.

2. AMD instance: how to define a module

The following code defines an alpha module and relies on the built-in require, exports module, and external beta module. As you can see, the third parameter is the callback function, which can be directly used by the dependent module. They are provided to the callback function as parameters in the declared order of dependency.

The require function allows you to depend on a module at any time, that is, to obtain the reference of the module, so that the module can be used even if it is not defined as a parameter; exports is the entity of the defined alpha module. Any attributes and methods defined on it are the attributes and methods of the alpha module. Exports. verb =... defines a verb method for the alpha module. In this example, the verb method of the module beta is called.

 
 

  
  
Define ("alpha", ["require", "exports", "beta"], function (require, exports, beta ){
  
  
Exports. verb = function (){
  
  
Return beta. verb ();
  
  
// Or:
  
  
Return require ("beta"). verb ();
  
  
}
  
  
});
 
 

3. Anonymous Module

The define method allows you to omit the first parameter, so that an anonymous module is defined. At this time, the module File Name is the module identifier. If this module File is placed in a. js, a is the module name. You can use "a" in the dependency to depend on this anonymous module. This brings about a high degree of reusability of modules. You can use an anonymous module wherever you are. The module name is its file path. This also fits well with the DRY (Don't Repeat Yourself) principle.

The following code defines an anonymous module dependent on the alpha module:

 
 

  
  
define(["alpha"], function (alpha) {  
  
  
    return {  
  
  
      verb: function(){  
  
  
        return alpha.verb() + 2;  
  
  
      }  
  
  
    };  
  
  
});