Javascript Modular Programming (2): AMD Specification
The first part of this series introduced the basic writing of Javascript modules, and today we will introduce how to use modules in a standardized manner.
(Contact supra )
Seven, the specification of the module
Think about it first, why are modules important?
Because of the module, we can use other people’s code more conveniently, and load any module for what function we want.
However, there is a prerequisite for this, that is, everyone must write the module in the same way, otherwise you have your way of writing, I have my way of writing, isn’t it a mess! Considering that there is no official specification for Javascript modules, this is even more important.
Currently, there are two common Javascript module specifications: CommonJS and AMD . I mainly introduce AMD, but I must start with CommonJS.
Eight, CommonJS
In 2009, American programmer Ryan Dahl created the node.js project, using javascript language for server-side programming.
This marks the official birth of “Javascript Modular Programming”. Because honestly speaking, in the browser environment, the lack of modules is not a particularly big problem. After all, the complexity of web programs is limited; but on the server side, there must be modules to interact with the operating system and other applications, otherwise there is no way. Programming.
The node.js module system is implemented by referring to the CommonJS specification. In CommonJS, there is a global method require() for loading modules. Assuming there is a math module math.js, it can be loaded as follows.
var math = require(‘math’);
Then, you can call the method provided by the module:
var math = require(‘math’);
math.add(2,3); // 5
Because this series is mainly for browser programming and does not involve node.js, I won’t introduce CommonJS much. As long as we know here, require() is used to load modules.
Nine, browser environment
With the server-side module, it is natural for everyone to want the client-side module. And it is best that the two are compatible, a module does not need to be modified, and it can run on both the server and the browser.
However, due to a major limitation, the CommonJS specification does not apply to the browser environment. It is the code in the previous section. If you run it in a browser, there will be a big problem. Can you see it?
var math = require(‘math’);
math.add(2, 3);
The second line math.add(2, 3) runs after the first line require(‘math’), so you must wait for math.js to load. In other words, if the loading time is long, the entire application will stop there and wait.
This is not a problem for the server side, because all the modules are stored in the local hard disk and can be loaded synchronously. The waiting time is the read time of the hard disk. However, for the browser, this is a big problem, because the modules are all placed on the server side, and the waiting time depends on the speed of the network. It may take a long time, and the browser is in a “feign death” state.
Therefore, the browser-side module cannot use “synchronous loading” (synchronous), but can only use “asynchronous loading” (asynchronous). This is the background of the birth of the AMD specification.
10. AMD
AMD is the abbreviation of “Asynchronous Module Definition”, which means “Asynchronous Module Definition”. It loads modules asynchronously, and the loading of modules does not affect the execution of the statements following it. All statements that depend on this module are defined in a callback function, which will not run until the loading is complete.
AMD also uses the require() statement to load modules, but unlike CommonJS, it requires two parameters:
require([module], callback);
The first parameter [module] is an array, and the members in it are the modules to be loaded; the second parameter callback is the callback function after successful loading. If the previous code is rewritten into AMD form, it is as follows:
require([‘math’], function (math) {
math.add(2, 3);
});
math.add() is not synchronized with the math module loading, and the browser will not be suspended. So obviously, AMD is more suitable for the browser environment.
Currently, there are two main Javascript library implements the AMD specification: require.js and curl.js . The third part of this series will further explain the usage of AMD and how to put modular programming into actual combat by introducing require.js.
(over)