The Asynchronous Module Definition Specification (AMD) formulates rules for defining modules so that modules and their dependencies can be loaded asynchronously. This just adapts to the browser’s asynchronous loading module environment (the browser’s synchronous loading of modules will cause performance, usability, debugging, and cross-domain access issues).
API description
define( )Function
This specification defines only one function “define”, which is a global variable. The description of the function is:
define(id?,dependencies? ,factory);
ID span>
Name
The first parameter, ID is a string. It specifies the name of the module in the definition. This parameter is optional. If this parameter is not provided, the name of the module should default to the name of the specified script requested by the module loader. If this parameter is provided, the module name must be “top-level” and “absolute” (relative names are not allowed).
Module name format
Module names are used to uniquely identify the modules in the definition, and they are also used in dependent data. AMD’s module name specification is a superset of the CommonJs module name specification. The quote is as follows:
- The module name is a string of one or more words concatenated with forward slashes as separators
- Words must be in camel case, or “.”, “..”
- < span style="font-size:24px"> Module names do not allow file extensions, such as “.js”
- Module The name can be “relative” or “top-level”. If the first character is “.” or “..”, it is the “relative” module name
- The top-level module name is named from the root Conceptual module analysis of space
- Relative module name is resolved from the module written and called by “require”
The CommonJs module ID attribute cited above is often used in JavaScript modules.
Relative module name resolution example:
- If the module “a/b/c” requests “../d”, it will be parsed as “a/d”
- If the module “a/b/c” requests “./e”, it will be parsed as “a/b/e”
dependency
The second parameter, dependencies, is an array of modules that the modules in the definition depend on. The dependent module must be executed according to the module’s factory method priority, and the result of the execution should be passed into the factory method (of the module in the definition) in the form of parameters in the order of position in the dependent data.
If the dependent module name is relative, it should be resolved into the relative definition Module. In other words, the relative name resolves to the name relative to the module, not relative to the path to find the name of the module.
This specification defines three special keywords. If “require”, “exports”, or “module” appears in the dependency list, the parameters should be parsed according to the commonJs module specification and free variables.
The dependent parameters are optional. If this parameter is omitted, it should default to [“require”,”exports”,””module”]. However, if the number of parameters of the factory method is less than 3, the loader will choose to call the factory method with the number of parameters specified by the function .
Factory method span>
Third A parameter, factory, is the function or object to be executed when the module is initialized. If it is a function, it should only be executed once. If it is an object, this object should be the output value of the module.
If the factory method returns a value (object, function, or any value that is cast to true), it should be set to the output value of the module .
Simple commonJs conversion
< span style="font-size:24px"> If the dependency parameter is ignored, the module loader can choose Scan the require statement in the factory method to obtain dependencies (the literal form is require(“module-id”)). The first parameter must be literally require for this mechanism to work properly.
< span style="font-size:24px"> In some cases, the toString method (Opera Mobile is a known toString method that does not support functions), the module loader can choose to scan without scanning dependencies.
If there are dependent parameters, the module loader should not be in the factory Scan dependency in the method.
In order to clearly identify the global function (necessary for the browser to load the script) and comply with the AMD programming interface, any global function should have an “amd” attribute, which is The value is an object. This prevents conflicts with existing codes that define define functions but do not comply with the AMD programming interface. Currently, the attributes of the define.amd object are not included in this specification. Authors who implement this specification can use it to notify additional capabilities beyond the basic implementation of the programming interface of this specification. The existence of define.amd indicates that the function complies with this specification. If there is another version of the programming interface, then another attribute should be defined, such as define.amd2, indicating that the implementation only follows this version of the programming interface. span>How to define an implementation of a module that allows multiple loading of the same version in the same environment: define.amd = { The shortest definition: define.amd = {};
multiversion: true
multiversion: true
span style=”font-size:24px”>};< /span> Output multiple modules at once h2> Multiple define calls can be used in a script. The order of these define calls should not be important. Dependencies specified in earlier module definitions can be defined later in the same script. The module loader is responsible for delaying loading of unresolved dependencies until all scripts are loaded to prevent unnecessary requests.
Example
Use require and exports
Create a module named “alpha”, the usage rate requires, exports, and a module named “beta”:
define(“alpha”, [“require”, “exports”, “beta”] , function (require, exports, beta) {
exports.verb = function() {
return beta.verb();
//Or:
return require(“beta”).verb();
}
});
An anonymous module that returns objects:
< /span>
define([“alpha”], function (alpha) {
return {
verb: function(){
return alpha.verb() + 2;
}
A module without dependencies can directly define objects:
define({
add: function(x, y){
return x + y;
}
});
A module definition that uses a simple CommonJS conversion:
< p> define(function (require, exports, module) {var a = require(‘a’), b = require(‘b’); exports.action = function () {}; });