AMD specification for JavaScript and JavaScriptAMD Specification

AMD specification for JavaScript and JavaScriptAMD Specification
I. Origin

Many new JavaScript architecture solutions and standards have been proposed by CommonJS, hoping to provide unified guidance 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. Describes the module definition, dependency, reference relationship, and loading mechanism. This specification has been used by requireJS, NodeJs, Dojo, and JQuery. It can be seen that it has great value.

II. Introduction

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.
The define function has another property, asynchronous. When the define function is executed,
1) The dependency modules listed in the second parameter are called asynchronously.
2) After all modules are loaded, if the third parameter is a callback function
3) then tell the system module that it is available, and then notify the module that it depends on itself that it is available.

Iii. AMD instance 1. 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.
1) 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;
2) 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.
3) In the 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 ();}});

 

2. 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.
The advantage is that a module is highly reusable. An anonymous module can be used in any location. The module name is its file path.
The following code defines an anonymous module dependent on the alpha module:

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

3. define with only one parameter

The first two parameters of define can be omitted. The third parameter can be a JavaScript object or a function.

If it is an object,It may be an object that contains functions of the method, or it may only provide data. The latter is very similar to the JSON-P, so AMD can also be considered to include a complete JSON-P implementation. Module evolved into a simple data object, such data object is highly available, and because it is a static object, it is also CDN-friendly, can improve the performance of JSON-P. Consider a JavaScript Object that provides ing between provinces and cities in China. If it is provided to the client in the form of a traditional JSON-P, it must provide a callback function name that dynamically generates the returned data based on this function name, this makes the standard JSON-P data not CDN friendly. However, If AMD is used, the data file is in the following format:

Define ({provinces: [{name: 'shanghai', areas: ['pudong New Area ', 'xuhui district']}, {name: 'jiangsu ', cities: ['nanjing ', 'nantong']}
// ......]});

 

Assume that the file name is china. js. If a module needs this data, you only need:

Define (['China'], function (china) {// use Chinese provincial and municipal data here });

 

In this way, this module is truly highly reusable. both remote and Copy-to-Local Projects save development time and maintenance time.

If the parameter is a function,One of its purposes is quick development. Applicable to small applications. You do not need to pay attention to the modules you need and who you want to use them. In a function, you can request the required modules at any time. For example:

Define (function () {var p = require ('China'); // use the china module });

 

That is, you omit the module name and the module you need to depend on. This does not mean that you do not need to rely on other modules. Instead, you can request these modules as needed. When the define method is executed, it will call the toString method of the function, and scan the require call in it to help you load these modules in advance, and then execute after loading. This makes rapid development possible.

It should be noted that Opera does not support the toString method of functions very well. Therefore, it is not applicable very well in the browser. However, if you use the build tool to package all JavaScript files, this will not be a problem. The build tool will help you scan require and forcibly load the dependent modules.