Modular development can improve code reuse rate and facilitate code management.

CommonJS

  • It is mainly used on the server side, such as Node
  • Module. exports defines the interface to which the current module exports and loads the module with require.
    • The require parameters:
      • To reference a core module, write the name of the module to be referenced without writing the path
      • When a customized module is referenced, the parameter must be in the path, and the.js can be omitted

Exports = {plus, minus,} // exports = {plus, minus,} // exports = module. Exports; // Exports cannot be directly assigned; Exports will be deactivated if you assign a value to module.exports. exports.plus = plus; exports.minus = minus; Var a = require('./a');
Copy the code

ES6 Module

  • ES6 implements module functions on the level of language standards.
  • It consists of two commands: export and import
    • The export command is used to specify the external interface of a module
    • The import command is used to input functions provided by other modules.
// Expose the moduleexport var a = 1;
export var b = 2;
// or
export { a, b };
// or
exportDefault {a, b} // reference module import {a, b} from'./a';
Copy the code

CommonJS vs. ES6 Module

  • The CommonJS module prints a copy of the value, the ES6 module prints a reference to the value
    • The CommonJS module outputs a copy of the value, meaning that once a value is output, changes within the module do not affect that value.
    • The ES6 module outputs references to values, and if the contents of the module change, the output content will also change.
  • The CommonJS module is run time loaded, and the ES6 module is compile time output interface
    • Runtime loading:
      • CommonJS modules are objects; That is, the entire module is loaded on input, an object is generated, and methods are read from that object. This loading is called “runtime loading.”
    • Load at compile time:
      • The ES6 module is not an object. Instead, it explicitly specifies the output code through the export command, and takes the form of static commands when importing. That is, when you import, you can specify that an output value is loaded instead of the entire module, which is called “compile-time loading.”

AMD

AMD is the result of requireJS ‘standardization of module definition in the promotion process: it loads modules asynchronously without affecting subsequent statements. All statements that depend on this module are defined in a callback function that will not run until the load is complete


Simply put, AMD is early execution (asynchronous loading: dependent execution first) + delayed execution

  • Mainly used in the browser environment,RequireJS output
  • The dependency preposition is advocated. When defining a module, it is necessary to declare its dependent module.
define(['./a'.'./b'].function(a, b) {a.dosomething () {a.dosomething (); })Copy the code

CMD

Delayed execution (run until needed to load, execute in order)

  • Mainly used in the browser environment, SeaJS output
  • Rely on proximity and only require modules when they are needed
  • In the CMD specification, a module is a file
define(function (require, exports, module) {
  var a = require('./a') a.dosomething () var b = require()'./b') 
  b.doSomething()
  // ...
})
Copy the code

AMD vs CMD

  • AMD: declare dependent modules at the beginning, and run the module code immediately after loading the module, regardless of whether the module is used in the callback function
  • CMD: Declare dependencies and load modules as needed

Reference 1 Reference 2 Reference 3