1, the CommonJs

Nodejs, the main Commonjs practitioner, has four important environment variables to support modularity. Module, export, require, global. In actual use, module.exports is used to define the output interface of the current module, and require is used to load the module.

// Define module math.js var basicNum = 0;function add(a, b) {
  returna + b; } module.exports = {// add: add, basicNum: basicNum} // add: add, basicNum: basicNum}'./math'); math.add(2, 5); Var HTTP = require() var HTTP = require()'http'); http.createService(...) .listen(3000);Copy the code

Commonjs loads modules synchronously. On the server side, the module files are stored on a local disk and can be read quickly, so this should not be a problem. However, in the browser, it is more reasonable to use the asynchronous loading method due to network reasons.

2. AMD and require.js

AMD adopts the asynchronous module loading mechanism, its loading does not affect the later file loading, all the statements that depend on this module are put in a callback function, and the callback function is executed after all the loaded. AMD is the product of the promotion process of require. Even modules that are not used are loaded ahead of time. Requie uses require.config() to define the module path, define() to define dependent modules, and require to load modules.

/** introduce require.js and main.js **/ <script SRC ="js/require.js" data-main="js/main"></script> /** main.js entry file/main module **/ // / first use config() to specify the module path and reference name require.config({baseUrl:"js/lib",
  paths: {
    "jquery": "jquery.min"// The actual path is js/lib/jquery.min.js"underscore": "underscore.min",}}); // Perform the basic operation require(["jquery"."underscore"].function($,_){
  // some code here
});
Copy the code

3, CMD and sea-.js

CMD is another module loading mechanism, which is very similar to AMD. The difference is that AMD uses dependency front-loading and pre-loading, while CMD uses dependency nearby and delayed execution. CMD is a product of the promotion process of sea-.js.

/** AMD **/ define(["a"."b"."c"."d"."e"."f"].function(a, b, c, d, e, f) {// equals to declare and initialize all modules to be used in the first place a.dosomething ();if (false) {// b. dosomething ()}}); /** define()function(require, exports, module) {
    var a = require('./a'); // declare a.dosomething () when needed;if (false) {
        var b = require('./b'); b.doSomething(); }}); /** sea-.js **/function(require, exports, module) {
    var $ = require('jquery.js');
    var add = function(a,b){
        returna+b; } exports.add = add; }); Seajs.use ([seajs.use])'math.js'].function(math){
    var sum = math.add(1+2);
});
Copy the code

4. ES6 module system

The module system of ES6 is mainly composed of two commands on the right, export and import. Export specifies the external interface, and import refers to other module functions. ES6 modules are not objects, and the import command is statically shared by the javaScript engine, referring to modules at compile time, not at run time.

/** define module math.js **/ var basicNum = 0; var add =function (a, b) {
    return a + b;
};
export{ basicNum, add }; /** reference module **/ import {basicNum, add} from'./math';
function test(ele) {
    ele.textContent = add(99 + basicNum);
}
Copy the code

5, ES6 module system and Commonjs differences

  1. The ES6 module system outputs a worthy reference, while Commonjs outputs a copy of the value.
  • Commonjs output is worth copying. Once output, changes within the module will not affect the output value.
  • The ES6 module system, which is a static analysis of the javaScript engine, uses the import reference to generate a reference, and loads the value into the module only when the reference is actually loaded.
  1. The ES6 module system is a compile-time output interface, Commonjs is a load-time output interface.
  • Runtime load: Commonjs is an object that loads the entire module on input, generates an object, and then reads methods from that object.
  • Load at compile time: The ES6 module system is not an object, but the code specified by the output displayed through export. The import command is static. Import allows you to specify an output value rather than the entire file.

Transfer: juejin. Cn/post / 684490…