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.
( continued from above )
Seven, the specification of the module
Think first, why are modules important?
Because of modules, we can use other people's code more easily, and load whatever modules we want for whatever functions we want.
However, there is a premise for doing this, that is, everyone must write modules in the same way, otherwise you have your way of writing, and I have my way of writing, isn't it messed up! This is even more important considering that there is no official specification for Javascript modules yet.
Currently, there are two common Javascript module specifications: CommonJS and AMD . I'm mainly covering AMD, but I'll start with CommonJS.
Eight, CommonJS
In 2009, American programmer Ryan Dahl created the node.js project to use the javascript language for server-side programming.
This marks the official birth of "Javascript modular programming". Because to be honest, in the browser environment, the absence of 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 at all. programming.
The module system of node.js is implemented with reference 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 methods 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, I will not introduce more about CommonJS. All we need to know here is that require() is used to load modules.
9. Browser Environment
With server-side modules, it's natural to want client-side modules. 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, there is a major limitation that makes the CommonJS specification unsuitable for browser environments. Still the code in the previous section, if it runs in the browser, there will be a big problem, 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 it must wait for math.js to load. That is, if it takes a long time to load, the whole app just stops there and waits.
This is not a problem for the server side, because all modules are stored on the local hard disk and can be loaded synchronously, and the waiting time is the reading time of the hard disk. However, for the browser, this is a big problem, because the modules are all placed on the server side, the waiting time depends on the speed of the Internet, it may take a long time, and the browser is in a "suspended death" state.
Therefore, the modules on the browser side 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 the module asynchronously, and the loading of the module does not affect the execution of the statement 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 arguments:
require([module], callback);
The first parameter [module] is an array whose members are the modules to be loaded; the second parameter callback is the callback function after the loading is successful. 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 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, by introducing require.js, will further explain the usage of AMD and how to put modular programming into practice.