AMD Specification for JavaScript

1. Origin

The CommonJS organization has proposed many new JavaScript architecture solutions and standards, hoping to provide unified guidance for front-end development. The AMD specification is one of the more famous ones. Its full name is Asynchronous Module Definition, which is the asynchronous module loading mechanism. Completely describes the module definition, dependencies, reference relationships and loading mechanism. This specification has been used by requireJS, NodeJs, Dojo, JQuery, and it can be seen that it has great value.

2. Introduction

As a specification, you only need to define its syntax API and don't care about its implementation. The AMD specification is as simple as having only one API, the define function:
define([module-name?], [array-of-dependencies?], [module-factory-or-object]);
Among them:
module-name: Module identifier, can be omitted.
array-of-dependencies: The modules it depends on can be omitted.
module-factory-or-object: module implementation, or a Javascript object.
Another property of define function is asynchronousness. When the define function is executed,
1) First, the dependent modules listed in the second parameter will be called asynchronously
2) After all modules are loaded, if the third parameter is a callback function, it will be executed
3) Then tell the system module that it is available, which also notifies the modules that depend on itself that it is available.

3. AMD Example

1. How to define a module

The following code defines an alpha module and relies on the built-in require, exports modules, and external beta modules. As you can see, the third parameter is the callback function, and the dependent modules can be used directly. They are provided to the callback function as parameters in the order of dependency declaration.
1) The require function allows you to rely on a module at any time, that is, get a reference to 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, defined on it Any properties and methods are also properties and methods of the alpha module. By exports.verb = ..., a verb method is defined for the alpha module.
3) In the example, the verb method of module beta is simply 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, thus defining an anonymous module. At this time, the file name of the module file is the module identifier.

The advantage is that modules are highly reusable. You can use an anonymous module by placing it anywhere. The module name is its file path.
The following code defines an anonymous module that depends on the alpha module:

define(["alpha"], function (alpha) {

　　verb: function(){
　　　return alpha.verb() + 2 ;
　　}
　};
});


3. The first two parameters of define

define with only one parameter can be omitted. There are two situations for the third parameter, one is a JavaScript object, and the other is a function.

If it is an object, then it may be an object that contains methods and functions; it may also only provide data. The latter is very similar to JSON-P, so AMD can also be considered to include a complete JSON-P implementation. The module evolves into a simple data object. Such a data object is highly available, and because it is a static object, it is also CDN-friendly and can improve the performance of JSON-P. Consider a JavaScript object that provides correspondence between provinces and cities in China. If it is provided to the client in the form of traditional JSON-P, it must provide a callback function name and dynamically generate return data based on this function name. This makes standard JSON-P data certain Not CDN friendly. But if you use AMD, this data file is in the following form:

define({ PRovinces: [ {name: 'Shanghai', areas: ['Pudong New Area', 'Xuhui District']}, {name: 'Jiangsu',cities: ['Nanjing', 'Nantong']}

define(['china'], function(china){ //Use Chinese province and city data here});

In this way, this module is truly highly reusable, whether using remote Yes, or copying it to a local project, it saves development time and maintenance time.

If the parameter is a function, one of its uses is to quickly develop and implement it. Suitable for smaller applications, you don’t need to pay attention in advance what modules you need and who will use them. In the function, you can require the modules you need at any time. For example:

define(function(){
　var p = require('china');
　 //Use the china module});

That is, you omit the module name and the modules you need to depend on. This doesn't mean you don't need to depend on other modules, but it does allow you to require these modules when needed. When the define method is executed, it will call the toString method of the function and scan the require calls in it to help you load these modules in advance, and then execute them after the loading is completed. This enables rapid development.

One thing to note is that Opera does not support the toString method of the function very well, so its applicability in browsers is not very strong. But if you package all JavaScript files through the build tool, this will not be a problem. The build tool will help you scan the require and force the loading of dependent modules.

The above is the AMD specification content of JavaScript. For more related articles, please pay attention to the PHP Chinese website (m.sbmmt.com)!