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
