JavaScript Modular Programming (2): AMD Specification

The first part of this series introduced the basic writing method of Javascript modules. Today, we will introduce how to use modules in a standardized way.

(continued from above)

7. Module specifications

First think about why modules are important?

Because of the module, we can use other people's code more conveniently, and load whatever module we want for whatever 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, and I have my way of writing, wouldn't it be a mess! This is even more important considering that there is currently no official specification for Javascript modules.

Currently, there are two popular Javascript module specifications: CommonJS and AMD. I will mainly introduce AMD, but I will start with CommonJS.

8. CommonJS

In 2009, American programmerRyan Dahl created the node.js project, using JavaScript language for server-side programming.

This marks the official birth of "JavaScript Modular Programming". Because to be honest, in a browser environment, not having modules is not a 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 module system of node.js is implemented with reference to the CommonJS specification. In CommonJS, there is a global method require(), which is used to load 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 aimed at browser programming and does not involve node.js, there is no more introduction to CommonJS. All we need to know here is that require() is used to load modules.

9. Browser environment

After having the server-side module, it is natural that everyone wants the client-side module. And it is best if the two are compatible, so that a module can run on both the server and the browser without modification.

However, due to a major limitation, the CommonJS specification is not suitable for browser environments. The code in the previous section will have a big problem if it is run in a browser. Can you see it?

var math = require('math');
math.add(2, 3);

The second line of math.add(2, 3) runs after the first line of require(‘math’), so you must wait for math.js to be loaded. That is, if it takes a long time to load, the entire app just hangs there waiting.

This is not a problem on the server side, because all modules are stored in the local hard disk and can be loaded synchronously. The waiting time is the reading time of the hard disk. However, for browsers, this is a big problem, because the modules are 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 "suspended death" state.

Therefore, browser-side modules cannot use "synchronous loading" (synchronous), but can only use "asynchronous loading" (asynchronous). This is the background for 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 the module does not affect the execution of subsequent statements. All statements that depend on this module are defined in a callback function. This callback function will not run until the loading is completed.

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 inside are The module to be loaded; the second parameter callback is the callback function after successful loading. If the previous code is rewritten into AMD form, it will look like this:

require(['math'], function (math) {
　　math.add(2, 3);
});

math.add() and math module loading are not synchronized, and the browser will not freeze. So obviously, AMD is more suitable for the browser environment.

Currently, there are two main Javascript libraries that implement 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 practice by introducing require.js.

The above is the content of JavaScript modular programming (2): AMD specifications. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!