This article borrows a lot of reference in the document’s original text, I only summarize the record, provides for own review with. You are encouraged to follow the link to see the article in the reference document, and click “like” to encourage the original author. I’m just a porter.

AMD

Real name: asynchronous module definition.

Features: asynchronous loading module, dependency pre, pre – execution. That is, it depends on executing the callback method first and then executing it

CMD

Real name: Generic module definition.

Features: Rely on nearby, lazy execution. That is, it is loaded until it needs to be loaded and executed in sequence

AMD and CMD

/** AMD **/
define(["a"."b"."c"."d"."e"."f"].function(a, b, c, d, e, f) { 
     // all modules are declared and initialized first
    a.doSomething();
    if (false) {
        // Module B is executed ahead of time even if it is not used
        b.doSomething()
    } 
});

/** CMD **/
define(function(require, exports, module) {
    var a = require('./a'); // If required
    a.doSomething();
    if (false) {
        var b = require('./b'); b.doSomething(); }});Copy the code

CommonJS

Real name: line does not change the name, sit does not change the surname

Features:

  • Load modules synchronously

  • The output is a copy of the value (that is, once the output has been made, changes within the module do not affect the value)

  • Run time loading (that is, loading the entire module on input, generating an object, and then reading methods from the object)

// Define the module math.js
var basicNum = 0;
function add(a, b) {
  return a + b;
}
module.exports = { // Write functions and variables that need to be exposed here
  add: add,
  basicNum: basicNum
}

// When referencing a custom module, the argument contains the path and can omit.js
var math = require('./math');
math.add(2.5);
Copy the code

Es6 Module

Real name: line does not change the name, sit does not change the surname

Features:

  • Want to be a common module solution for browsers and servers (connected to AMD)

  • The output is a reference to a value, and the import command is statically parsed by the javaScript engine, importing module code at compile time, generating a read-only reference, and then, when the script is actually executed, taking the value from that read-only reference into the loaded module. Therefore, Es6 modules are referenced dynamically and do not cache values, and variables in modules are bound to their modules.

  • Compile-time output interface, that is, the Es6 module is not an object, but a code that is explicitly specified to be output through export, and a static command is used to import, that is, a single output value can be specified to be loaded, rather than the entire module.

/** Define the module math.js **/
var basicNum = 0;
var add = function (a, b) {
    return a + b;
};
export { basicNum, add };

/** references the module **/
import { basicNum, add } from './math';
function test(ele) {
    ele.textContent = add(99 + basicNum);
}


/** export default **/
// Define the output
export default { basicNum, add };
/ / introduction
import math from './math';
function test(ele) {
    ele.textContent = math.add(99 + math.basicNum);
}
Copy the code

CommonJS loads an object (that is, the module.exports property) that is generated only after the script runs. An ES6 module is not an object, and its external interface is a static definition that is generated during the code static parsing phase.

reference

Analysis of JS module specifications: AMD and CMD

Front-end modular: CommonJS,AMD,CMD,ES6