Detailed explanation of the differences between amd, cmd, esmodule, commonjs

AMD, CMD, ESModule and CommonJS are the most commonly used modular specifications in JavaScript. In this article, I will explore in depth the differences between these specifications and their application in actual development.

AMD Specification

AMD specification (Asynchronous Module Definition) is a specification proposed by RequireJS in the process of promoting modular development. The main feature of this specification is asynchronous loading of modules, so that modules can be loaded only when needed, and improve page loading speed. The code examples of the AMD specification are as follows:

//Define moduledefine(['module1', 'module2'], function(m1, m2) {
  //...
  return module;
});
 
//Use modulerequire(['module'], function(module) {
  //...
});

In the AMD specification, the define function is used to define a module and the require function is used to load a module. In the define function, the first parameter is an array that represents other modules that the module depends on; the second parameter is a callback function that represents the code of the module. In the callback function, we can use the dependent module and use the module as the return value. In the require function, the first parameter is also an array, indicating the module that needs to be loaded; the second parameter is a callback function in which the loaded module can be used.

CMD specifications

CMD specification (Common Module Definition, general module definition) is a specification proposed by SeaJS in the process of promoting modular development. This specification is similar to the AMD specification and is also an asynchronous loading module, but its code style is more concise. The code examples of the CMD specification are as follows:

//Define moduledefine(function(require, exports, module) {
  var m1 = require('module1');
  var m2 = require('module2');
  //...
   = module;
});
 
//Use modulevar module = require('module');

In the CMD specification, the define function is used to define a module and the require function is used to load a module. In the define function, the parameters of the callback function can be customized, but in general, the first parameter is require, which represents methods that depend on other modules; the second parameter is exports, which represents methods and attributes that the module outputs to the outside; the third parameter is module, which represents the module itself. In the callback function, we can use the require function to load other modules and add methods and properties that need to be output to the exports object. In the require function, you only need to pass in the module name that needs to be loaded.

ESModule specification

The ESModule specification (ES6 Module, ES6 module) is a modular specification provided by ECMAScript 6 at the language level. This specification uses static compilation to modularize, just like the previous two specifications, ESModule also supports asynchronous loading of modules. But its syntax is very different from the first two specifications. The code example of the ESModule specification is as follows:

//Define moduleexport function module() {
  //...
}
 
//Use moduleimport { module } from 'module';

In the ESModule specification, the export keyword is used to output the module's methods and properties, and the import keyword is used to load other modules. After the export keyword, you can follow a function or variable name to indicate the method or attribute that needs to be output. After the import keyword, you can follow the module name that needs to be loaded and the method or attribute that needs to be imported.

The syntax of ESModule is relatively concise and has good readability, because ESModule adopts language-level support. Unlike the first two specifications, the ESModule specification does not require the use of additional libraries to achieve modularity, but uses standard syntax to support it.

CommonJS Specification

CommonJS specification is a standard proposed in the process of promoting modular development. The biggest difference between this specification and the first three specifications is that it uses the method of loading modules simultaneously. The code examples of the CommonJS specification are as follows:

//Define modulevar module1 = require('module1');
var module2 = require('module2');
 
//Use modulevar module = require('module');

In the CommonJS specification, use the require function to load other modules and assign the modules to use to variables. When using modules, you only need to use the require function to load.

Since the CommonJS specification is a standard proposed in the process of promoting modular development, it is widely used on the server side. However, in browser-side applications, the synchronous loading method of the CommonJS specification may cause page loading to slow down. Therefore, in browser-side applications, more specifications of asynchronous loading modules are used, such as AMD and CMD.

Summarize

In actual development, we can choose to use modular specifications that suit us based on project needs and team development habits. If you need to load modules asynchronously, you can choose the AMD or CMD specification; if you support modularity at the language level, you can choose the ESModule specification; if you need to use modularity in it, you can choose the CommonJS specification. No matter which specification is used, the purpose of modular development is to improve the maintainability and reusability of the code, make the code clearer and clearer, thereby improving development efficiency.

This is the end of this article about the details of amd, cmd, esmodule, and commonjs. For more related amd cmd esmodule commonjs content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!