Module CommonJs for Node server

The sample

/ / import
require("module");
require(".. /app.js");
/ / export
exports.getStoreInfo = function() {};
module.exports = someValue;

Copy the code

Features: synchronous loading module, runtime loading. It is applicable to the application scenario of the server, but cannot be applied to the browser client.

AMD modular specification (on behalf of library require.js)

The sample

// Define the module
define("module"["dep1"."dep2"].function(d1, d2) {... });// Load the module
require(["module".".. /app"].function(module, app) {... });Copy the code

Features: Asynchronous loading module. Applicable to the browser, it can load multiple modules in parallel, but it increases the complexity of loading logic and the cost of development and maintenance.

CMD modular specification (on behalf of library Sea-js Ali Yubo works)

The sample

define(function(require.exports.module) {
  var a = require('./a');
  a.doSomething();
  // Rely on nearby writing, when to use and when to introduce
  var b = require('./b');
  b.doSomething();
});

Copy the code

Features: Proximity, delayed execution, can run in Node.

The difference between AMD and CMD

  1. For dependent modules, AMD executes early and CMD executes late. Since 2.0, however, RequireJS has been changed to defer execution (depending on how it is written, it can be handled differently). CMD advocates as lazy as possible.
  2. AMD relies on the front end; CMD advocates relying on proximity, requiring only when a module is needed.

The sample

// AMD define(['./a', './b'], function(a, b) {// AMD define(['./a', '. }); // CMD define(function(require, exports, Module) {var a = require('./a') a.dosomething () var b = require('./b') b.dosomething ()  });Copy the code

UMD specification

  1. UMD is a mashup of AMD and CommonJS
  2. CommonJS modules evolve with server first principles, choosing synchronous loading, and its modules do not need to be wrapped.
  3. AMD developed asynchronous loading modules based on browser first principles.
  4. UMD determines whether any module (exports) that supports Node.js exists. If so, node.js module mode is used. Check whether AMD is supported (define exists). If AMD exists, load modules in AMD mode.

The sample

(function (window, factory) {
    if (typeof exports === 'object') {
    
        module.exports = factory();
    } else if (typeof define === 'function' && define.amd) {
    
        define(factory);
    } else {
    
        window.eventUtil = factory();
    }
})(this, function () {
    //module ...
});
Copy the code

Modularity of IMPORT ES6 (currently the mainstream modularity solution for front-end development)

The sample

Export function aaa() {... }; export var age = 18; export default ... // Import import "/app"; import React from "react"; Import {Component} from "react";Copy the code

Features: js official standard, the above is a transition solution, but currently browser direct support is not very good Node V13 directly support.

The difference between import and require (important)

Require uses the CommonJs specification, import uses the Es6 module specification; So the difference between the two is essentially the difference between the two norms;

  • CommonJS:
  1. For basic data types, it is replication. That is, cached by modules; At the same time, in another module you can reassign the variable output from that module.
  2. Shallow copy for complex data types. Because both modules reference objects that point to the same memory space, changes to the value of one module affect the other.
  3. When a module is loaded using the require command, the entire module code is run.
  4. When the same module is loaded using the require command, the module is not executed, but is fetched from the cache. That is, no matter how many times the CommonJS module is loaded, it only runs once on the first load and returns the result of the first run when it is loaded later, unless the system cache is manually cleared.
  5. When cyclic loading is performed, it is load-time. When the script code is required, it will all be executed. Once a module is “looping”, only the parts that have been executed are printed, not the parts that have not been executed.
  • ES6 module
  1. Values in ES6 modules are dynamic read-only references.
  2. For read-only, that is, it is not allowed to change the value of the imported variable, and the imported variable is read-only, whether it is a basic data type or a complex data type. When a module encounters an import command, it generates a read-only reference. When the script is actually executed, it will be evaluated in the loaded module based on the read-only reference.
  3. For dynamic, when the original value changes, so does the value that the import loads. Both basic and complex data types.
  4. When looping, ES6 modules are referenced dynamically. As long as there is a reference between the two modules, the code can execute.
  • Last: require/exports is essential and required; Because of the fact that currently you write import/export and end up compiling it as require/exports.